Linear Search Visualization using JavaScript

Last Updated : 17 Sep, 2024

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

Reference:

Approach:

First, we will generate a random array using Math.random() 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 LinearSearch() function.

Example:

Before Searching

After Searching

Below is the program to visualize the Linear Search algorithm.

<!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">Linear 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="LinearSearch()">Search
      </button>
      <br />
      <br />
      <div id="text"></div>
    </div>

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

* {
  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;
}

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

// Function to generate the array of blocks
function generatearray() {
  for (var i = 0; i < 20; i++) {
    // Return a value from 1 to 100 (both inclusive)
    var value = Math.ceil(Math.random() * 100);

    // 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 LinearSearch function
async function LinearSearch(delay = 300) {
  var blocks = document.querySelectorAll(".block");
  var output = document.getElementById("text");

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

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

  output.innerText = "";

  var flag = 0;
  // LinearSearch Algorithm
  for (var i = 0; i < blocks.length; i += 1) {
    //Changing the color of current block to red
    blocks[i].style.backgroundColor = "#FF4949";

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

    //Extracting the value of current block
    var value = Number(blocks[i].childNodes[0].innerHTML);

    // To compare block value with entered value
    if (value == num) {
      flag = 1;
      output.innerText = "Element Found";
      blocks[i].style.backgroundColor = "#13CE66";
      break;
    } else {
      // Changing the color to the previous one
      blocks[i].style.backgroundColor = "#6b5b95";
    }
  }
  //When element is not found in the array
  if (flag == 0) {
    output.innerText = "Element Not Found";
  }
}

// Calling generatearray function
generatearray();