Convert jQuery to Vanilla JS

Question

I would like to convert this short code into vanilla JS but I'm lost with some things. Can you help me please ?

This is to convert this Pen

(function (window, $) {

    $(function() {


        $('.ripple').on('click', function (event) {
            event.preventDefault();

            var $div = $('<div/>'),
                btnOffset = $(this).offset(),
                xPos = event.pageX - btnOffset.left,
                yPos = event.pageY - btnOffset.top;



            $div.addClass('ripple-effect');
            var $ripple = $(".ripple-effect");

            $ripple.css("height", $(this).height());
            $ripple.css("width", $(this).height());
            $div
                .css({
                    top: yPos - ($ripple.height()/2),
                    left: xPos - ($ripple.width()/2),
                    background: $(this).data("ripple-color")
                })
                .appendTo($(this));

            window.setTimeout(function(){
                $div.remove();
            }, 2000);
        });

    });

})(window, jQuery);

I already try to replace de "addClass" but I dont understand the final "window, jQuery". And I dont what to do with those $('this')

Answer 1

The final bit ( window.setTimeout ) is removing the div that got added. The function name is the same, so you don't need to change that, assuming you've created the div with document.createElement .

For the $(this) quandry, you can substitute event.target , and then change the jQuery functions to the plain JS function.