Binary Search Visualization using JavaScript Last Updated : 22 Feb, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report GUI(Graphical User Interface) helps in better understanding than programs. In this article, we will visualize Binary Search using JavaScript. We will see how the elements are being traversed in Binary Search until the given element is found. We will also visualize the time complexity of Binary Search. Reference: Binary SearchAsynchronous Function in JavaScript 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 BinarySearch() function. Example: Before SearchingAfter Searching Below is the program to visualize the Binary Search algorithm. Filename: index.html 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">Binary 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="BinarySearch()">Search</button> <br /> <br /> <div id="text"></div> </div> <script src="script.js"></script> </body> </html> Filename: style.css 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; } Filename: script.js JavaScript 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 BinarySearch function async function BinarySearch(delay = 300) { var blocks = document.querySelectorAll(".block"); var output = document.getElementById("text"); //Extracting the value of the element to be searched 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 = ""; // BinarySearch Algorithm var start = 0; var end = 19; var flag = 0; while (start <= end) { //Middle index var mid = Math.floor((start + end) / 2); blocks[mid].style.backgroundColor = "#FF4949"; //Value at mid index var value = Number(blocks[mid].childNodes[0].innerHTML); // To wait for .1 sec await new Promise((resolve) => setTimeout(() => { resolve(); }, delay) ); //Current element is equal to the element //entered by the user if (value == num) { output.innerText = "Element Found"; blocks[mid].style.backgroundColor = "#13CE66"; flag = 1; break; } //Current element is greater than the element //entered by the user if (value > num) { end = mid - 1; blocks[mid].style.backgroundColor = "#6b5b95"; } else { start = mid + 1; blocks[mid].style.backgroundColor = "#6b5b95"; } } if (flag === 0) { output.innerText = "Element Not Found"; } } // Calling generatearray function generatearray(); Output: Comment More infoAdvertise with us Next Article Ternary Search Visualization using JavaScript T tk315 Follow Improve Article Tags : JavaScript Technical Scripter 2020 Binary Search Practice Tags : Binary Search Similar Reads Linear Search Visualization using JavaScript 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 Se 3 min read Ternary Search Visualization using JavaScript 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 Se 4 min read Heap Sort Visualization using JavaScript GUI(Graphical User Interface) helps in better understanding than programs. In this article, we will visualize Heap Sort using JavaScript. We will see how the array is first converted into Maxheap and then how we get the final sorted array. We will also visualize the time complexity of Heap Sort. Ref 4 min read Insertion Sort Visualization using JavaScript Insertion sort is a simple sorting algorithm in which values from the unsorted part are picked and placed at the correct position in the sorted part. In order to know more about it. Please refer Insertion Sort. An algorithm like Insertion Sort can be easily understood by visualizing instead of long 5 min read Counting Sort Visualization using JavaScript GUI(Graphical User Interface) helps in better in understanding than programs. In this article, we will visualize Counting Sort using JavaScript. We will see how the frequencies of elements are stored and how we get the final sorted array. We will also visualize the time complexity of Counting Sort. 4 min read Bucket Sort Visualization Using Javascript GUI(Graphical User Interface) helps in better understanding than programs. In this article, we will visualize Bucket Sort using JavaScript. We will see how the elements are stored in Buckets and then how Buckets get traversed to get the final sorted array. We will also visualize the time complexity 7 min read Like