Rewrite jQuery in vanilla js

[Rezvitskyq]

Hello! There was a need to rewrite the code written with jquery into vanilla js. I have little js code on my site and I see no reason to include a library such as jquery ?

$('.progress-wrap .dot').on('click', function () {
	let $this = $(this)
	let stepValue = $this.attr('data-step')

	$this.closest('.progress-wrap').find('.bar').css('width', stepValue + '%')
	$this.siblings('.dot').removeClass('is-current')
	$this.addClass('is-active is-current')
	$this.prevAll('.dot').addClass('is-active')
	$this.nextAll('.dot').removeClass('is-active')

	$('.process-panel-wrap').removeClass('is-active')
	$('.step-title').removeClass('is-active')

	if (stepValue === '0') {
		$('#signup-panel-1, #step-title-1').addClass('is-active')
	} else if (stepValue === '25') {
		$('#signup-panel-2, #step-title-2').addClass('is-active')
	} else if (stepValue === '50') {
		$('#signup-panel-3, #step-title-3').addClass('is-active')
	} else if (stepValue === '75') {
		$('#signup-panel-4, #step-title-4').addClass('is-active')
	} else if (stepValue === '100') {
		$('#signup-panel-5, #step-title-5').addClass('is-active')
	}
})

 

[adrian]

This should help you get going:

https://gist.github.com/joyrexus/7307312

Things like prevAll() will need to be done with a loop. Googling things like "prevAll in vanillajs" will provide you with examples.

 

[kongondo]

And another one: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/ 

Helped me once when I couldn't trigger events using vanilla js.

[diogo]

And one more http://youmightnotneedjquery.com/

[eydun]

Here is a nice alternative: https://kenwheeler.github.io/cash/