JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<body
<form>
<img src="https://cdn2.iconfinder.com/data/icons/space-8/512/Alien-256.png" alt="hi" style="width:256px;height:256px;">
<br>
<br>
<h1>YOUR SCORE</h1>
<h1><div id="output">00</div></h1>
<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">Find your number ?</td>
 <td class="web_dialog_title align_right">
 <a href="#" id="btnClose">Close</a>
 </td>
 </tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<tr>
<td>
Time Left <b id="countdown"></b> seconds &nbsp;&nbsp;      
<img src="https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/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 class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div...

CSS

html {

text-align: center;

}
#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;
}

body {
    background-color:LightCoral;
} 
body {

    background-color:MediumTurquoise;
}

    select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background:#f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;

}

   @media screen and (-webkit-min-device-pixel-ratio:0)

   {

    select
 {

 padding-right:18px

}

}

label

 {

position:relative

}

label:after

 {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}

label:before

 {
    content:'';

    right:6px; top:0px;

    width:20px; height:20px;

    background:#f8f8f8;

    position:absolute;

    pointer-events:none;

    display:block;
}

.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:1px solid...

JavaScript

$(document).ready(function ()
   {
var $divs = $('.cell').removeClass('highlight');
rnd = Math.floor(Math.random() * $divs.length);
$divs.eq(rnd).addClass('highlight');
$('.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 });
}
$('.cell').css("background-color",get_random_color());   
var rnd;
function highlight()
{
var $divs = $('.cell').removeClass('highlight');
rnd = Math.floor(Math.random() * $divs.length);
$divs.eq(rnd).addClass('highlight');
}
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)

     ...