Convert Jquery to vanilla js

[Majesrse]

Hey i have a problem with the code:

$('a').click(function(link) {
link.preventDefault();
location = this.href;
$('body').fadeOut('slow', open);
});
function more() {
window.location = location;
}

It's writen in Jquery but i will convert it to vanilla js. Can somone help me with it?

[MoritzLost]

Checkout You Might Not Need jQuery for this, it will tell you some replacements for the most common jQuery operations!

Here's a rough draft:

function more(url) {
	window.location = url;
}

document.querySelectorAll('a').forEach(
  link => link.addEventListener('click', e => {
    e.preventDefault();
    const href = e.currentTarget.href;
    document.body.classList.add('fade-out');
    setTimeout(() => more(href), 500);
  });
);

Note that the callback to fadeOut in your code is "open" while the reload function is called "more", is that a mistake? Anyway, I corrected it. Note you have to add a CSS transition for the "fade-out" class yourself, check the link above for an easy example. Also make sure that the timeout (500ms in my example) matches the duration of the CSS transition. Cheers!

Sidenote, if all you're doing is delaying the page reload by a couple hundred miliseconds to have the body fadeout, you might as well get rid of that, it only gets in the way of the user without any real benefit. But I don't know anything about your use-case, so I might be way off here!

[wbmnfktr]

https://vanillajstoolkit.com/ is another good location to look for VanillaJS

 

[elabx]

On 12/1/2019 at 12:12 PM, wbmnfktr said:

https://vanillajstoolkit.com/ is another good location to look for VanillaJS

 

The link I've been needing all my life thanks!

[wbmnfktr]

3 minutes ago, elabx said:

The link I've been needing all my life thanks!

Same here! There a some really nice examples, explanations and already "ready to use" snippets.