JSFiddle - React, Tailwind, and code Playground

by Aletheios

HTML

<div id="container"></div>

CSS

.highlight {
    font-weight: bold;
    color: #f90;
}
body {
    font-family: sans-serif;
    font-size: 200%;
}

JavaScript

var SORT = function(type, list, selector){
        var container, containerTr, animSteps = [];
        // Show all elements in the container
        var printArray = function(list){
            var str = ["<table>"], i = 0, l = list.length;
            for (i; i < l; ++i) {
                str.push("<tr><td>", list[i], "</td></tr>");
            }
            str.push("</table>");
            container.html(str.join(""));
        };
        var swap = function(list, i1, i2) {
            var tmp = list[i1];
            list[i1] = list[i2];
            list[i2] = tmp;
            // Add 3 functions for each swapping action:
            // 1. highlight elements, 2. swap, 3. remove highlight
            animSteps.push(function(){
                containerTr.eq(i1).add(containerTr.eq(i2)).addClass("highlight");
            }, function(){
                var tmp = containerTr.eq(i1).text();
                containerTr.eq(i1).text(containerTr.eq(i2).text());
                containerTr.eq(i2).text(tmp);
            }, function(){
                containerTr.eq(i1).add(containerTr.eq(i2)).removeClass("highlight");
            });
        };
        var animation = function(){
            // Execute all iteration functions one after another
            if (animSteps.length) {
                setTimeout(function(){
                    animSteps.splice(0,1)[0]();
                    animation();
                }, 250);
            }
        };
        
        // Collection of sorting algorithms
        var algorithms = {
            bubblesort: function(list) {
                for (var n = list.length; n > 1; --n) {
                    for (var i = 0; i < n-1; ++i) {
                        if (list[i] > list[i+1]) {
                            swap(list, i, i+1);
                        }
                    }
                }
            }
            // Add more algorithms using "swap" here...
        };
        
        if (algorithms[type] != undefined) {
         ...