JSFiddle - React, Tailwind, and code Playground

by msm595

HTML

<div id="form"><label>Array: <input type="text" value="5,8,2,7,4,6,1,9,3" id="input"></label><input type="button" id="go" value="Sort!"></div>
    <div id="action"></div>

CSS

body {
    text-align: center;
}
#form {
  margin-bottom: 25px;  
}
h1 {
    font-size: 42px;
    color: #4392FF;
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    margin-bottom: 25px;
}
#action {
    text-align: center;
    font-size: 28px;
}

.display {
    display: inline;
    margin-right: 20px;
}
.ele {
    display: inline;
    margin-left: 5px;
}

JavaScript

var body=$('body'),
    go = $('#go'),
    todo=[];
function init() {
$('#go').click(function() {
    var input = $('#input').val();
    var ar = input.split(',');
    for(var i=0;i<ar.length;i++) {
        ar[i]=parseInt(ar[i]);
    }
    quicksort(ar, $('#action'), create(ar, $('#action')));
}).val('Sort!');
$('#action').html('');
}

function create(ar, parent) {
    var numbers=[];
    for(var i=0;i<ar.length;i++) {
         var ele = $(document.createElement('div')).html(ar[i]).addClass('ele');
        parent.append(ele);
        numbers.push(ele);
        if(i<ar.length-1) parent.append($(document.createElement('span')).html(','));
    }
    return numbers;
}

function quicksort(ar, parent, numbers) {
    var begin=[],
        end=[];

    if(ar.length<=1 || numbers.length<=1) {
        if(todo.length>0) {
            var current=todo.shift();
            go.unbind();
            quicksort(current[0],current[1],current[2]);
        } else {
            go.val("Done - Reset").click(function() {
                go.unbind()
                init();
            });
        }
        return;
    }
    
    var ps=0;
    var p=$(document.createElement('div')).appendTo(body).html('p').css({
        top:numbers[ps].offset().top+numbers[ps].outerHeight()+"px",
        left:numbers[ps].offset().left+"px",
        position: 'absolute',
        width: numbers[ps].outerWidth()+"px"
    });
    
    var is=1;
    var i=$(document.createElement('div')).appendTo(body).html('i').css({
        top:numbers[is].offset().top+numbers[is].outerHeight()+"px",
        left:numbers[is].offset().left+"px",
        position: 'absolute',
        width: numbers[is].outerWidth()+"px"
    });
    
    var js=numbers.length-1;
    var j=$(document.createElement('div')).appendTo(body).html('j').css({
        top:numbers[js].offset().top+numbers[js].outerHeight()+"px",
        left:numbers[js].offset().left+"px",
        position: 'absolute',
        width: numbers[js].outerWidth()+"px"
   ...