JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<body

<form>

<img src="https://cdn4.iconfinder.com/data/icons/science-volume-1-3/48/08-256.png" alt="hi" style="width:256px;height:256px;">

<br>

<br>
     <div style="text-align:center;">
    <div id="scr">YOUR SCORE : </div>
    <div id="output">00</div>
   </div>    
<br><br><br>

<input type="button"  class="styled-button-2" id="btnShowSimple" value="START" />

&nbsp;&nbsp;

<input type="button"  class="styled-button-2" id="btnShowModal" value="RESTART" />   

<br /><br />       

<div id="output"></div>
   
<div id="overlay" class="web_dialog_overlay"></div>

<div id="dialog" class="web_dialog">

<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">

 <tr>

 <td class="web_dialog_title"></td>

 <td class="web_dialog_title align_right">

 <a href="#" id="btnClose">Close</a>

 </td>

 </tr>

<td>&nbsp;</td>

<td>&nbsp;</td>
<tr>
<td style="text-align:center";>

Time Left <b id="countdown"></b> seconds &nbsp;&nbsp; 
       
<img src="https://cdn3.iconfinder.com/data/icons/prettyoffice/64/alarm.png" alt="Timer" style="width:48px;height:48px;">

      </td>

      </tr>

       <tr>

       <td>&nbsp;</td>

      </tr>

      <tr>

      <td colspan="2" style="padding-left: 15px;">

      </td>

      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
      <tr>
    <td colspan="2" style="padding-left: 15px;">
    <div id="shuffle">
   <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div...

CSS

html {

text-align: center;

}
#scr, #output
{
   display:inline;
   font-size: xx-large
}

body {

    background-color:Aqua ;
}

 

.styled-button-2

 {
	-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	border-bottom-color:#333;
	border:5px solid GreenYellow ;
	background-color:Aqua  ;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	color:#333;
	font-family:'Verdana',Arial,sans-serif;
	font-size:14px;
	text-shadow:#b2e2f5 0 1px 0;
	padding:10px

}

.styled-button-3 

{
	-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	border-bottom-color:#333;
	border:1px solid #61c4ea;
	background-color:Cyan ;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	color:#333;
	font-family:'Verdana',Arial,sans-serif;
	font-size:14px;
	text-shadow:#b2e2f5 0 1px 0;
	padding:5px
}

  #shuffle > div {
    float: left;
    line-height: 30px;
    width: 30px;
    height: 30px;
    background-color:SpringGreen ;
    border-radius: 4px;
    margin: 3px;
}

#shuffle {
    background-color:HoneyDew;
    max-width: 360px;line-height:30px
    height:360px;
    float:left;
    padding:5px;
    max-width: 360px;
}

.highlight {
 opacity:0.7;
 filter:alpha(opacity=5);
 background-color:#7FFF00;
}

.web_dialog_overlay

{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   background: #000000;
   opacity: .15;
   filter: alpha(opacity=15);
   -moz-opacity: .15;
   z-index: 101;
   display: none;
}

.web_dialog
{
   display: none;
   position: fixed;
   width: 390px;
   height:600px;
   top: 15%;
   left: 50%;
   margin-left: -190px;
   margin-top: -100px;
   background-color: MediumSpringGreen ;
   border: 5px solid Turquoise  ;
   padding: 0px;
   z-index: 102;
   font-family: Verdana;
   font-size:...

JavaScript

$(document).ready(function ()

   {

      var $divs = $('.cell').removeClass('highlight');

      rnd = Math.floor(Math.random() * $divs.length);

      $divs.eq(rnd).addClass('highlight');

      var seconds;

      $("#btnShowSimple").click(function (e)

       {

  $("#output").html("00");

   function countdown() 

    {

    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");
  
  HideDialog();

 }
    }

tick();

}

   countdown();


  ShowDialog(true);


   e.preventDefault();

      });


      $("#btnShowModal").click(function (e)

      {

 function countdown() 

   {

    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");
  
  HideDialog();

 }
    }

tick();

}

       countdown();

       ShowDialog(true);

     e.preventDefault();
   });

$("#btnClose").click(function (e)

      {
         HideDialog();

location.reload();

         e.preventDefault();

      });

$("#btnSubmit").click(function (e)

      {

ShowDialog(false);

location.reload();

e.preventDefault();

});


$("#shuffle div").hover(function() {

 $(this).css('cursor','pointer');

}, function() {

    $(this).css('cursor','auto');

});


$('.cell').click(function(e)

{

function get_random_color() 
{
var letters = '0123456789ABCDEF'.split('');

var color = '#';

for (var i = 0; i < 6; i++ )

{

color += letters[Math.round(Math.random() * 15)];

}

return color;

}  

var className = $(this).attr('class');
 

if (className=="cell highlight")

{

$('#output').html(function(i, val) { return val*1+1...