JSFiddle - React, Tailwind, and code Playground

by scyrizales

HTML

<label for="inputNumber">Ingrese número</label>
<input name="inputNumber" type="text">
<button class="calculate">Calcular</button>
<button class="clear">Clear</button>
<div id="numbers"></div>
<div id="results"></div>

CSS

.number {
  padding: 10px;
  display: inline-block;
  transition: all 1s linear 1s;
  border: 3px solid transparent;
  margin-top: 0;
  float: left;
}

#numbers .number {
  float: none;
}

.selected {
  border-color: red;
  margin-top: 45px;
}

.processed {
  border-color: black;
}

JavaScript

var numbers = [];
var input = document.querySelector("input");
var calculateBtn = document.querySelector("button.calculate");
var clearBtn = document.querySelector("button.clear");
var resultsDiv = document.getElementById("results");

function validateNumber(num) {
	 return +num && numbers.indexOf(+num) === -1;
}

function renderNumbers() {
	var div = document.getElementById("numbers");
  div.innerHTML = numbers.map(function(n) {
  	return '<div class="number n-' + n + '">' + n + "</div>";
  }).join("");
}

function inputKeydown(e) {
	if (e.which === 13) {
  	if (validateNumber(e.target.value)) {
	    numbers.push(+e.target.value);
      clearResults();
    }
    e.target.value = "";
		renderNumbers();
  }
}

var steps = [];
var intervalId;
function step(fn) {
	steps.push(fn);
  if (!intervalId) {
    intervalId = setInterval(function () {
      if (steps.length) {
      	steps.shift()();
      } else {
        clearInterval(intervalId);
        intervalId = null;
      }
    }, 1000);
  }
}

function insertionSortPaint() {
	//prepare HTML
	var numbersDiv = document.getElementById("numbers");
  var el = document.createElement("div");
  var buffer = [];
  buffer.push('<div class="insertion-sort">');
  buffer.push('<h3>InsertionSort</h3>');
  buffer.push('<div class="numbers">');
  buffer.push(numbersDiv.innerHTML);
  buffer.push('</div>');
  buffer.push('</div>');
  el.innerHTML = buffer.join('');
	resultsDiv.innerHTML += el.innerHTML;
  
  //execute sort
  var numbers = document.querySelectorAll(".insertion-sort .numbers .number");
  function processNumber(e) {
	  step(function() { e.classList.add("selected"); });
    step(function() { 
      var val = +e.value;
      var processedNumbers = document.querySelectorAll(".insertion-sort .numbers .number.processed");
      if (processedNumbers.length === 0) {
        e.classList.remove("selected");
        e.classList.add("processed");
      } else {
      	
      }
    });
  }
  [].forEach.call(numbers,...