JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div class="circle"></div>

CSS

body {
    background: #333;
}
.circle {
    background: rgba(255, 255, 255, 0.5);
    width: 100px;
    height: 100px;
    border-radius: 100px;
    position: absolute;
    display: none;
    opacity: 0;
}
.circle.animate {
    transition: all 0.3s ease;
}
.circle.show {
    opacity: 1;
}

JavaScript

var circle = (function () {

    var styles = {
        click: function(){
            helpers.setStyle({
                opacity: 1
            });
        }
    },
    makeHTML = function (x, y) {
        return '<div class="circle"></div>';
    },
    helpers = {
        setStyle: function(styles){
            $('.circle').css(styles);
        }
    },
    handleShow = function (style, pos) {
        helpers.setStyle({
            display: 'block',
            top: pos.y/2,
            left: pos.x/2
        });
        setTimeout(styles[style], 1);
    };

    return {
        create: makeHTML,
        animate: handleShow
    };
})();

$(document).on('click', function (e) {
    $('body').append(circle.create());
    circle.animate('click', {x:e.pageX, y:e.pageY});
});