JSFiddle - React, Tailwind, and code Playground

by puuga

HTML

<body>
    <h1>Marge Sort Algorithm</h1>
    <div>list: <input id="inputList" onkeyup="goSort()" value="4,7,1,3,2,6,5"/></div>
    
    <h2>Output</h2>
    <div id="output"></div>
</body>

CSS

body {
    margin: 10px;
    font-family: Helvetica;
}
h1 {
    font-size: 140%;
    margin-bottom: 20px;
}
h2 {
    font-size: 110%;
    margin: 10px 0;
}

JavaScript

//Marge Sort Algorithm


// do marge
function merge(listLeft, listRight) {
    var listResult = [];
    while (listLeft.length > 0 || listRight.length > 0) {
        if (listLeft.length > 0 && listRight.length > 0) {
            if (listLeft[0] <= listRight[0]) {
                listResult.push(listLeft.shift());
            } else {
                listResult.push(listRight.shift());
            }
        } else if (listLeft.length > 0) {
            listResult.push(listLeft.shift());
        } else if (listRight.length > 0) {
            listResult.push(listRight.shift());
        }
    }
    //alert(listResult);
    return listResult;
}

// devide list
function mergeSort(list) {
    // check if list.length that means it sorted
    if (list.length <= 1) {
        return list;
    }
    var listLeft, listRight;
    // find middle of the list
    var half = parseInt(list.length / 2, 10);
    // devide list to 2 list use half to determind where is the middle
    var sortedlistLeft = mergeSort(list.slice(0, half));
    var sortedlistRight = mergeSort(list.slice(half, list.length));
    // do marge
    return merge(listLeft, listRight);
}

function goSort() {

    // Input
    var inputList = $('#inputList').val().split(",");
    var key = $("#key").val();

    // Algorithm
    var output = mergeSort(inputList);
    //alert(output);
    
    // Output
    $("#output").html(output.join(","));
}