JSFiddle - React, Tailwind, and code Playground

by bogdan_vq

HTML

<body>
    <div class="wrap-1">
        <div class="wrap left">
            <div class="elem el"></div>
            <div class="elem-2 css html el"></div>
            <div class="elem-3 css html el"></div>
        </div>
        <div class="wrap left">
            <div class="elem el"></div>
            <div class="elem-2 css html el"></div>
            <div class="elem-3 css html el"></div>
        </div>
    </div>
</body>

CSS

.wrap-1 {
    height: 400px;
    width: 600px;
    background-color:#Be7;
}
.wrap {
    height: 300px;
    width: 200px;
    background-color:#BCC;
}
.elem {
    height: 100px;
    width: 100px;
    background-color:#EEE;
}
.elem-2 {
    height: 100px;
    width: 100px;
    background-color:#CAA;
}
.elem-3 {
    height: 100px;
    width: 100px;
    background-color:#ebA;
}
.left {
    float: left;
}

JavaScript

var timeDiff = {
	    setStartTime: function () {
	        d = new Date();
	        time = d.getTime();
	    },
	    getDiff: function () {
	        d = new Date();
	        t = d.getTime() - time;
	        time = d.getTime();
	        return t;
	    }
	};


	$('.elem-2').click(function (e) {
	    timeDiff.setStartTime();
	    var $target = $(e.target);

	    var clazz = e.target.classList;
	     


	    for (var i in clazz) { 
	        if ('css' === clazz[i]) {
                console.log(timeDiff.getDiff() / 1000 + " seconds");
	        }

	    }

	});



	$('.elem-3').click(function (e) {
	    timeDiff.setStartTime();
	  
	        if ($(this).hasClass('css')) {
                 console.log(timeDiff.getDiff() / 1000 + " seconds");
	        }
 
	});