Ternary Search Visualization using JavaScript

Last Updated : 24 Feb, 2022

GUI(Graphical User Interface) helps better in understanding than programs. In this article, we will visualize Ternary Search using JavaScript. We will see how the elements are being traversed in Ternary Search until the given element is found. We will also visualize the time complexity of Ternary Search.

Refer:

Approach:

First, we will generate a random array using Math.random() function and then sort it using sort() function.
Different color is used to indicate which element is being traversed at current time.
Since the algorithm performs the operation very fast, the setTimeout() function has been used to slow down the process.
New array can be generated by pressing the “Ctrl+R” key.
The searching is performed using TernarySearch() function.

Below is the program to visualize the Ternary Search algorithm.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <br />
    <p class="header">Ternary Search</p>


    <div id="array"></div>
    <br /><br />

    <div style="text-align: center">
        <label for="fname">
        Number to be Searched:
      </label>
        <input type="text" id="fname" name="fname" />
        <br /><br />
        <button id="btn" onclick="TernarySearch()">
        Search
      </button>
        <br />
        <br />
        <div id="text"></div>
    </div>

    <script src="script.js"></script>
</body>

</html>

style.css: The following is the content for “style.css” used in the above file.

style.css

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.header {
    font-size: 35px;
    text-align: center;
}

#array {
    background-color: white;
    height: 305px;
    width: 598px;
    margin: auto;
    position: relative;
    margin-top: 64px;
}

.block {
    width: 28px;
    background-color: #6b5b95;
    position: absolute;
    bottom: 0px;
    transition: 0.2s all ease;
}

.block_id {
    position: absolute;
    color: black;
    margin-top: -20px;
    width: 100%;
    text-align: center;
}

script.js: The following is the content for “script.js” file used in the above HTML code.

script.js

var container = document.getElementById("array");

// Function to generate the array of blocks
function generatearray() {

    // Creating an array
    var arr = [];

    // Filling array with random values
    for (var i = 0; i < 20; i++) {

        // Return a value from 1 to 100 (both inclusive)
        var val = Number(Math.ceil(Math.random() * 100));
        arr.push(val);
    }

    // Sorting Array in ascending order
    arr.sort(function(a, b) {
        return a - b;
    });

    for (var i = 0; i < 20; i++) {
        var value = arr[i];

        // Creating element div
        var array_ele = document.createElement("div");

        // Adding class 'block' to div
        array_ele.classList.add("block");

        // Adding style to div
        array_ele.style.height = `${value * 3}px`;
        array_ele.style.transform = `translate(${i * 30}px)`;

        // Creating label element for displaying
        // size of particular block
        var array_ele_label = document.createElement("label");
        array_ele_label.classList.add("block_id");
        array_ele_label.innerText = value;

        // Appending created elements to index.html
        array_ele.appendChild(array_ele_label);
        container.appendChild(array_ele);
    }
}

// Asynchronous TernarySearch function
async function TernarySearch(delay = 700) {
    var blocks = document.querySelectorAll(".block");
    var output = document.getElementById("text");

    // Extracting the value entered by the user
    var num = document.getElementById("fname").value;

    // Colouring all the blocks violet
    for (var i = 0; i < blocks.length; i += 1) {
        blocks[i].style.backgroundColor = "#6b5b95";
    }

    output.innerText = "";

    // TernarySearch Algorithm
    var start = 0;
    var end = 19;
    var flag = 0;
    while (start <= end) {
        var mid1 = Math.floor(start + (end - start) / 3);
        var mid2 = Math.floor(end - (end - start) / 3);

        // Extracting values of mid1 and mid2 blocks
        var value1 = Number(blocks[mid1].childNodes[0].innerHTML);
        var value2 = Number(blocks[mid2].childNodes[0].innerHTML);

        // Changing color to red
        blocks[mid1].style.backgroundColor = "#FF4949";
        blocks[mid2].style.backgroundColor = "#FF4949";

        // To wait for .1 sec
        await new Promise((resolve) =>
            setTimeout(() => {
                resolve();
            }, delay)
        );

        // Number entered by the user equals to
        // element at mid1
        if (value1 == num) {
            output.innerText = "Element Found";
            blocks[mid1].style.backgroundColor = "#13CE66";
            flag = 1;
            break;
        }

        // Number entered by the user equals to
        // element at mid2
        if (value2 == num) {
            output.innerText = "Element Found";
            blocks[mid2].style.backgroundColor = "#13CE66";
            flag = 1;
            break;
        }

        if (num < value1) {
            end = mid1 - 1;
        } else if (num > value2) {
            start = mid2 + 1;
        } else {
            start = mid1 + 1;
            end = mid2 - 1;
        }
    }

    if (flag === 0) {
        output.innerText = "Element Not Found";
    }
}

// Calling generatearray function
generatearray();