JSFiddle - React, Tailwind, and code Playground

by puuga

HTML

<html>
    <body>
        <h1>Sorting Algotithms</h1>
        <h2>insertion sort</h2>
        <div>unsorted: <input id="input" size="50" onkeyup="sortMe()" /></div>
        <div>sorted: <br /><span id="output"></span></div>
    </body>
</html>

CSS

body {
    font-size: 150%;
}

JavaScript

// insertion sort
function sortMe() {
    
    var input = $("#input").val().split(",");
    //alert((isNumber($("#input").val())));
    //alert("3m">"6");

    // init output
    var output = "input =<br/>"+input+"<br />";
    //var didSwap = true;
    //var round = 0;
    var min = 0;
    var pointer = 0;
    
    // selection sort
    for(pointer=1; pointer<input.length; pointer++) {
        //didSwap = false;
        
        output += "step"+(pointer)+"-------------------------------<br />"
        for(j=pointer-1; j>=0;j--) {
            if(parseInt(input[j+1]) < parseInt(input[j])) {
                doSwap(input,j+1,j);
                output += "swap "+(j+1)+":"+j+"<br/>"
            }
        }
        output += input.join(",")+"<br/>";
        
    }
    
    
    // output
    //$("#output").html(input.join(","));
    $("#output").html(output);
}

// do swap for 2 element in array at i,j
function doSwap(arr, i, j) {
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
}

// check n is a number
function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}