JSFiddle - React, Tailwind, and code Playground
HTML
<div class="objects">
<div class="obj obj-01">01</div>
<div class="obj obj-02">02</div>
<div class="obj obj-03">03</div>
<div class="obj obj-04">04</div>
<div class="obj obj-05">05</div>
<div class="obj obj-06">06</div>
<div class="obj obj-07">07</div>
<div class="obj obj-08">08</div>
<div class="obj obj-09">09</div>
<div class="obj obj-10">10</div>
<div class="obj obj-11">11</div>
<div class="obj obj-12">12</div>
<div class="obj obj-13">13</div>
<div class="obj obj-14">14</div>
<div class="obj obj-15">15</div>
</div>
<div id="countdown"></div>
<div id="objects">0</div>
<form name="count"><input type="hidden" name="time-left"></form>
CSS
.obj { width:30px; height:30px; background:red; margin:10px; }
.objects div { float:left; }
JavaScript
$(document).ready(function(){
$('.obj').bind('click', function() {
$(this).unbind('click');
$(this).fadeOut('slow');
$("#objects").text( function (i,current) {return +current+1;} );
return false;
})
});
function countdown() {
var seconds = 60;
function tick() {
var counter = document.getElementById('countdown');
seconds--;
counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);
if( seconds > 0 ) {
setTimeout(tick, 1000);
} else {
alert("Game over");
}
}
tick();
}
// start the countdown
countdown();