JSFiddle - React, Tailwind, and code Playground

by puuga

HTML

<html>
    <body>
        <h1>Sorting Algotithms</h1>
        <h2>bubble 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

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

    // init output
    var output = "";
    var didSwap = true;
    var round = 0;
    
    // bubble sort
    do {
        didSwap = false;
        output += "step"+(round+1)+"-------------------------------<br />"
        for(j=0; j<input.length-1-round;j++) {
            if(isNumber(input[j]) && isNumber(input[j+1])) {
                if(parseInt(input[j]) > parseInt(input[j+1])) {
                    doSwap(input, j, (j+1));
                    didSwap = true;
                }
            } else if(isNumber(input[j+1])) {
                doSwap(input, j, (j+1));
                didSwap = true;
            } else if(!isNumber(input[j+1])){
                // do nothing
            } else if(input[j] > input[j+1]) {
                doSwap(input, j, (j+1));
                didSwap = true;
            }
            output += input.join(",")+"<br/>";
        }
        round++;
    } while (didSwap)
    
    
    // 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);
}