JSFiddle - React, Tailwind, and code Playground

by neama

HTML

<div id='per_sekond'>
</div>

<div id='plus'>
</div>

<div id='minus'>
</div>

<div id="central">
  <table>
    <tr>
      <td id='left_eye_up'>
      </td>
      <td id='right_eye_up'>
      </td>
    </tr>
    <tr>
      <td id='left_eye_down'>
      
      </td>
      <td id='right_eye_down'>
      
      </td>
    </tr>
  </table>
</div>

CSS

#plus{
  width:50px;
  height:50px;
  background-color: black;
  cursor: pointer;
}

#minus{
  width:50px;
  height:50px;
  background-color: green;
  cursor: pointer;
}

#central{
  width:200px;
  margin:auto;
  height:200px;
  margin-top:100px;
}

#left_eye_up{
   width:100px;
   height:100px;
   border:1px solid;
   background-color: red;
}
#right_eye_up{
   width:100px;
   height:100px;
   border:1px solid;
   background-color: rgb(138, 43, 226);
}

#left_eye_down{
   width:100px;
   height:100px;
   border:1px solid;
   background-color: rgb(138, 43, 226);
}
#right_eye_down{
   width:100px;
   height:100px;
   border:1px solid;
   background-color: red;
}

JavaScript

var step_number_for_left_eye=1;
var step_number_for_right_eye=7;
var ptime=300;

printNumbersInterval(ptime);


$( "#plus" ).click(function() {

clearTimeout(timerId);
ptime=ptime+10;
  printNumbersInterval(ptime);
});

$( "#minus" ).click(function() {

clearTimeout(timerId);
ptime=ptime-10;
  printNumbersInterval(ptime);
});

/*red rgb(255, 0, 0)
orange rgb(255,165,0)
yellow rgb(255,255,0)
green rgb(0,128,0)
blauw rgb(0, 255, 255)
blue rgb(0, 0, 255)
violet rgb(138, 43, 226)*/









function printNumbersInterval(ptime) {
  
  var psek=Math.round(1000/ptime,-2);
  var string=' '+ptime+' -mls  psek-'+psek;
  $('#per_sekond').html(string);
   timerId = setInterval(function() {
  //curent_left_color=1;
  
   var curent_left_color=$('#left_eye_up').css("background-color");
   var curent_right_color=$('#right_eye_up').css("background-color");
if(curent_left_color=='rgb(255, 0, 0)'){$('#left_eye_up').css("background-color",'rgb(255,165,0)');
}
    if(curent_left_color=='rgb(255,165,0)'){
    $('#left_eye_up').css("background-color",'rgb(255,255,0)');
    $('#right_eye_down').css("background-color",'rgb(255,255,0)');
    }
    if(curent_left_color=='rgb(255, 165, 0)'){
    $('#left_eye_up').css("background-color",'rgb(0,128,0)');
    $('#right_eye_down').css("background-color",'rgb(0,128,0)');
    }
    if(curent_left_color=='rgb(0, 128, 0)'){
    $('#left_eye_up').css("background-color",'rgb(0, 255, 255)');
    $('#right_eye_down').css("background-color",'rgb(0, 255, 255)');
    }
    if(curent_left_color=='rgb(0, 255, 255)'){
    $('#left_eye_up').css("background-color",'rgb(0 ,0 ,255)');
    $('#right_eye_down').css("background-color",'rgb(0 ,0 ,255)');
    }
    if(curent_left_color=='rgb(0, 0, 255)'){
    $('#left_eye_up').css("background-color",'rgb(138 ,43 ,226)');
    $('#right_eye_down').css("background-color",'rgb(138 ,43 ,226)');
    }
    if(curent_left_color=='rgb(138, 43, 226)'){
    $('#left_eye_up').css("background-color",'rgb(255, 0, 0)');
   ...