JSFiddle - React, Tailwind, and code Playground

by mpenkov

HTML

<body>Enter a space-separated list of integers in increasing order:
    <br/>
    <input id="txtArray" type="text" size="80" value="0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25">
    <br/>Enter an integer to search for:
    <input id="txtKey" type="text" size="4"
    value="22">
    <br/>
    <input type="button" value="Initialize" onclick="onSearch();">
    <input id="btnBack" type="button" value="<<" onclick="onBack();">
    <input id="btnForward" type="button" value=">>" onclick="onForward();">Result:
    <input id="txtResult" type="text" size="4" readonly="true">
    <br/>
        <b><font color="blue">start</font> <font color="orange">midpoint</font> <font color="red">end</font> <font color="green">result</font>
    <br/> <pre><div id="divDemo"></div></pre>

</body>

JavaScript

var currentStep;
var all_first;
var all_last;
var all_mid;
var result = -1;
var array;

function binary_search(array, key) {
    all_first = [];
    all_last = [];
    all_mid = [];
    var first = 0;
    var last = array.length - 1;
    while (last - first) {
        all_first.push(first);
        all_last.push(last);

        if (last - first === 1) break;

        var mid = Math.floor((first + last) / 2); // force integer division
        all_mid.push(mid);
        if (key <= array[mid]) last = mid;
        else first = mid;
    }
    if (array[first] === key) result = first;
    else result = array[last] == key ? last : -1;
}

function onSearch() {
    var txtArray = document.getElementById("txtArray");
    var txtKey = document.getElementById("txtKey");
    array = txtArray.value.split(" ");
    for (var i = 0; i < array.length; ++i) {
        array[i] = parseInt(array[i], 10);
        if (i > 0 && array[i] < array[i-1]) {
            alert("Array is not in increasing order");
            return;
        }
    }
    var key = parseInt(txtKey.value, 10);

    //
    // TODO: error-checking
    //

    currentStep = 0;
    binary_search(array, key);

    var txtResult = document.getElementById("txtResult");
    txtResult.value = result;

    redraw();
}

function onBack() {
    if (currentStep)--currentStep;
    redraw();
}

function onForward() {
    if (currentStep < all_first.length)++currentStep;
    redraw();
}

function redraw() {
    document.getElementById("btnBack").disabled = currentStep === 0;
    document.getElementById("btnForward").disabled = currentStep === all_first.length;

    var divDemo = document.getElementById("divDemo");
    while (divDemo.firstChild)
    divDemo.removeChild(divDemo.firstChild);

    var first = all_first[currentStep];
    var last = all_last[currentStep];
    var mid = all_mid[currentStep];

    for (var i = 0; i < array.length; ++i) {
        var txt = document.createTextNode(array[i] + " ");
        var b =...