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();

Output:

Linear Search Visualization using JavaScript

tk315

Improve

Article Tags :

Practice Tags :

Searching

Ternary Search Visualization using JavaScript

Similar Reads