Untitled fiddle

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');
  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;
      }
    }
  }
  let i = 1,
    j = 0,
    minItem = 0,
    tmp,
    mini,
    comp,
    insr;
  function bubbleSort() {
    mini = document.getElementsByTagName('div')[minItem];
    mini.style.backgroundColor = '#00FF00';
    comp = document.getElementsByTagName('div')[i];
    comp.style.backgroundColor = '#FFFF00';
    setTimeout(function () {
      if (comp.offsetHeight < mini.offsetHeight) {
        mini.style.backgroundColor = 'red';
        mini = comp;
        mini.style.backgroundColor = '#00FF00';
        minItem = i;
      } else {
        comp.style.backgroundColor = 'red';
      }
      i++;
    }, 1);
    setTimeout(function () {
      if (i == 100) {
        insr = document.getElementsByTagName('div')[j];
        tmp = insr.offsetHeight;
        insr.style.height = mini.offsetHeight + 'px';
        mini.style.backgroundColor = 'red';
        insr.style.backgroundColor = '#00FF00';
        mini.style.height = tmp + 'px';

        minItem = j++;
        i = ++minItem;
      }
    }, 1);
    if (j == 99) {
      document.getElementsByTagName('div')[j].style.backgroundColor = '#00FF00';
      let r = 0;
      let finalRed = setInterval(function () {
        document.getElementsByTagName('div')[r].style.backgroundColor = 'red';
        r == 100 ? clearInterval(finalRed) : r++;
      }, 20);
     ...