JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="start" id="div1">1</div><br>
<div class="start" id="div2">2</div><br>
<div class="start" id="div3">3</div><br>
<div class="start" id="div4">4</div><br><br>
<a href="#" onclick="start()">start</a>

<div id="res"></div>

CSS

.speed1 { transition: width 6s; }
.speed2 { transition: width 6.3s; }
.speed3 { transition: width 6.6s; }
.speed4 { transition: width 6.9s; }

.t1 { transition-timing-function: linear; }
.t2 { transition-timing-function: ease; }
.t3 { transition-timing-function: ease-in; }
.t4 { transition-timing-function: ease-out; }
.t5 { transition-timing-function: ease-in-out; }


.start {
  width: 30px;
  height: 30px;
  background: red;
}

.end {
  width: 300px;
  height: 30px;
  background: red;
}

JavaScript

// Not this!

function move() {
document.getElementById("div1").className = "end speed1 t1";
document.getElementById("div2").className = "end speed2 t2";
document.getElementById("div3").className = "end speed3 t3";
document.getElementById("div4").className = "end speed4 t4";
}



// This!

function start() {
document.getElementById("div1").className = "start";
document.getElementById("div2").className = "start";
document.getElementById("div3").className = "start";
document.getElementById("div4").className = "start";
setTimeout(function(){tranran();},3000);
}



function tranran() {
var roll1 = Math.floor((Math.random() * 5) + 1);
tranran2(roll1);
}

function tranran2(el) {
var roll1 = el;
var roll2 = Math.floor((Math.random() * 5) + 1);
if (roll2 == roll1) {tranran2(roll1);}
else { tranran3(roll1,roll2); }
}

function tranran3(el,el2) {
var roll1 = el;
var roll2 = el2;
var roll3 = Math.floor((Math.random() * 5) + 1);
if (roll3 == roll2 || roll3 == roll1) {tranran3(roll1,roll2);}
else { tranran4(roll1,roll2,roll3); }
}

function tranran4(el,el2,el3) {
var roll1 = el;
var roll2 = el2;
var roll3 = el3;
var roll4 = Math.floor((Math.random() * 5) + 1);
if (roll4 == roll1 || roll4 == roll2 || roll4 == roll3) {tranran4(roll1,roll2,roll3);}
else { addspeed(roll1,roll2,roll3,roll4); }
}

function addspeed(el1,el2,el3,el4) {
var s1 = 1; var s2 = 2; var s3 = 3; var s4 = 4;
tranres(el1,el2,el3,el4,s1,s2,s3,s4);
}

function tranres(el1,el2,el3,el4,s1,s2,s3,s4) {

document.getElementById("div1").className = "end speed" + s1 + " t" + el1;
document.getElementById("div2").className = "end speed" + s2 + " t" + el2;
document.getElementById("div3").className = "end speed" + s3 + " t" + el3;
document.getElementById("div4").className = "end speed" + s4 + " t" + el4;

setTimeout(function(){finish();},7000);
}

function finish() {
document.getElementById("res").innerHTML = "Finish!";

}