JSFiddle - React, Tailwind, and code Playground
by fenderistic
HTML
<input class="inputi" type="button" id="generisiNovu" value="New Game!"/><br /><br /><br />
<div id="haman" style="width:247px; height:245px; background-color:#7f8c8d;">
<input class="inputi tile"type="button" id="btn1" value="0" style=" margin:2px; width:45px;height:45px;border-radius:5px;background-color:#d35400;text-align: center;vertical-align: middle;line-height: 45px;font-family:Arial;font-size:22pt;color:white;font-weight:bold; border:0px;" onClick="gameWinner()"/>
<input class="inputi tile" type="button" id="btn2" value="0" style="width:45px;height:45px;border-radius:5px;background-color:#d35400;text-align: center;vertical-align: middle;line-height: 45px;font-family:Arial;font-size:22pt;color:white;font-weight:bold; border:0px;"/>
<input class="inputi tile" type="button" id="btn3" value="0" style="width:45px;height:45px;border-radius:5px;background-color:#d35400;text-align: center;vertical-align: middle;line-height: 45px;font-family:Arial;font-size:22pt;color:white;font-weight:bold; border:0px;"/>
<input class="inputi tile" type="button" id="btn4" value="0" style="width:45px;height:45px;border-radius:5px;background-color:#d35400;text-align: center;vertical-align: middle;line-height: 45px;font-family:Arial;font-size:22pt;color:white;font-weight:bold; border:0px;"/>
<input class="inputi tile" type="button" id="btn5" value="0" style="width:45px;height:45px;border-radius:5px;background-color:#d35400;text-align: center;vertical-align: middle;line-height: 45px;font-family:Arial;font-size:22pt;color:white;font-weight:bold; border:0px;"/>
<br />
<input class="inputi tile" type="button" id="btn6" value="0" style=" margin:2px; width:45px;height:45px;border-radius:5px;background-color:#d35400;text-align: center;vertical-align: middle;line-height: 45px;font-family:Arial;font-size:22pt;color:white;font-weight:bold; border:0px;"/> ...JavaScript
//
$(".tile").click(function(){
var count=0;
$(".tile").each(function(){
if($(this).val()==0){
count++
}
}
if(count==2){//lose?
alert("You have lost");
} else if(count==25){//win
alert("You have won");
}
});
//
// Random value ubacivanje
$("#generisiNovu").click(function(){
$("#btn1").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn2").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn3").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn4").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn5").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn6").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn7").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn8").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn9").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn10").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn11").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn12").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn13").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn14").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn15").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn16").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn17").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn18").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn19").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn20").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn21").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn22").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn23").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn24").attr('value', Math.floor((Math.random() * 4) + 0));
$("#btn25").attr('value', Math.floor((Math.random() * 4) + 0));
});
// Button...