JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<article id="box">
  
</article>

CSS

body {
    height: 400px;
    background-color: rgb(30,31,31);
}
#box {
  position: relative;
  padding:0;
  width: 800px;
  min-height: 100% !important;
  height: auto;
}
#box>div {
  box-sizing: border-box;
  position: absolute;
  display:block;
  width: 8px;
  background-color: red;
  border:1px solid black;
  bottom:0;
}

JavaScript

function reset() {
let box = document.getElementById("box");
let i=0,j=100,tmp,el1,el2;

while (box.firstChild) box.removeChild(box.firstChild);
let left = 0;
let myRands = [];

for (let e=0;e<100;e++) {
  let myloop=true;
  let node = document.createElement("div");
  while (myloop) {
    let myRand = Math.floor(Math.random() * (100) + 1)*4;
    if (myRands.indexOf(myRand) === -1) {
      myRands.push(myRand);
      document.getElementById("box").appendChild(node);
      node.style.height = myRand+"px";
      node.style.left = left+"px";
      left+=8;
      myloop=false;
    }
  }
}

function bubbleSort () {
  if (i<99/2) {
    j--;
    if (j == i) {
      i=99-j;
       j++;
    }
  } else {
    j++;
    if (j ==i) {
      j--;
      i=99-j;
    }
  }
 
  if (i==Math.round(99/2)) {
    i=0,j=100,tmp="",el1="",el2="";
    let y=0, g=0, r=0;
    let finalYellow = setInterval(function(){
      document.getElementsByTagName("div")[y].style.backgroundColor = "#FFFF00"; y==100?clearInterval(finalYellow):y++; }, 11);
      setTimeout(function(){
      let finalGreen = setInterval(function(){
      document.getElementsByTagName("div")[g].style.backgroundColor = "#00FF00"; g==100?clearInterval(finalGreen):g++; }, 10);}, 100);
      setTimeout(function(){
      let finalRed = setInterval(function(){
      document.getElementsByTagName("div")[r].style.backgroundColor = "#FF0000";
      r==100?clearInterval(finalRed):r++; }, 20);}, 1100);
      return;
  }
  el1 = document.getElementsByTagName("div")[i];
  el2 = document.getElementsByTagName("div")[j];
  el1.style.backgroundColor = "#FFFF00";
  el2.style.backgroundColor = "#FFFF00";
  if (i<99/2?parseInt(el1.offsetHeight)>parseInt(el2.offsetHeight):parseInt(el1.offsetHeight)<parseInt(el2.offsetHeight)) {
    setTimeout(function () {
      el1.style.backgroundColor = "#00FF00";
      el2.style.backgroundColor = "#00FF00";
    }, 1);
    setTimeout(function () {
      tmp = el1.offsetHeight;
      el1.style.height =...