Shell Sort Visualizer using JavaScript Last Updated : 23 Jul, 2024 Comments Improve Suggest changes Like Article Like Report Shell Sort is mainly a variation of Insertion Sort. The idea of shell sort is to allow the exchange of far items. In order to know more about it. Please refer to Shell Sort.An algorithm like Shell Sort can be easily understood by visualizing instead of long codes. In this article, Shell Sort Visualizer is implemented using HTML, CSS & JavaScript.Pre-requisites:Shell Sort.Basic knowledge of HTML, CSS & JavaScript.JavaScript promises.JavaScript async/await function.Approach:Button Generate New Array generates an array of random values using the Math.random() function and a bar corresponding to that value in terms of height.Different colors are used to indicate which elements are unsorted(sky-blue), compared(darkblue) & sorted(lightgreen).Button Shell Sort sorts the elements using the selection sort algorithm.Finally, elements are sorted. Example: Click on 'Generate New Array' button to generate a new random array. Click on the 'Shell Sort' button to perform Visualization. HTML <!DOCTYPE html> <html lang="en"> <!-- Head Section --> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <!-- title --> <title>Shell Sort Visualizer using JavaScript</title> <!-- linking style.css --> <link href="style.css" rel="stylesheet" /> </head> <!-- Body Section --> <body> <section class="head">Shell Sort</section> <section class="data-container"></section> <section id="ele"></section> <div style="margin: auto; width: fit-content"> <!-- "Generate New Array" button --> <button class="btn1" onclick="generate()" id="Button1"> Generate New Array </button> <!-- "Shell Sort" button --> <button class="btn2" onclick="ShellSort(),disable()" id="Button2">Shell Sort</button> </div> <!-- linking script.js --> <script src="script.js"></script> </body> </html> Filename: style.css css .mySlides { display: none; } body { background-color: rgb(255, 235, 211); font-family: Verdana, sans-serif; } .head { margin-top: 20px; margin-right: 20vw; margin-left: 20vw; text-align: center; font-size: 30px; background-color: #6f459e; color: white; border-radius: 19px; font-weight: bolder; } .data-container { width: 600px; height: 364px; position: relative; margin: 0 auto; } .bar { width: 28px; position: absolute; left: 0; bottom: 0; background-color: rgb(0, 183, 255); transition: 0.2s all ease; } .bar__id { position: absolute; top: -24px; width: 100%; text-align: center; } .btn1 { padding: 12px; font-weight: bolder; background-color: #6f459e; border-radius: 10px; color: white; font-size: 16px; border: white; margin-top: 1vw; margin-right: 1vw; } .btn2 { padding: 12px; font-weight: bolder; background-color: #6f459e; border-radius: 10px; color: white; font-size: 16px; border: white; } #ele { text-align: center; height: 35px; } Filename: script.js javascript const container = document.querySelector(".data-container"); // Function to generate bars function generatebars(num = 20) { // For loop to generate 20 bars for (let i = 0; i < num; i += 1) { // To generate random values from 1 to 100 const value = Math.floor(Math.random() * 100) + 1; // To create element "div" const bar = document.createElement("div"); // To add class "bar" to "div" bar.classList.add("bar"); // Provide height to the bar bar.style.height = `${value * 3}px`; // Translate the bar towards positive X axis bar.style.transform = `translateX(${i * 30}px)`; // To create element "label" const barLabel = document.createElement("label"); // To add class "bar_id" to "label" barLabel.classList.add("bar__id"); // Assign value to "label" barLabel.innerHTML = value; // Append "Label" to "div" bar.appendChild(barLabel); // Append "div" to "data-container div" container.appendChild(bar); } } // Asynchronous function to perform "Shell Sort" async function ShellSort(delay = 600) { let bars = document.querySelectorAll(".bar"); for (var i = 10; i > 0; i = Math.floor(i / 2)) { // To pause the execution of code // for 300 milliseconds await new Promise((resolve) => setTimeout(() => { resolve(); }, 300) ); for (var j = i; j < 20; j++) { var temp = parseInt( bars[j].childNodes[0].innerHTML); var k; var temp1 = bars[j].style.height; var temp2 = bars[j].childNodes[0].innerText; for ( k = j; k >= i && parseInt(bars[k - i] .childNodes[0].innerHTML) > temp; k -= i ) { bars[k].style.height = bars[k - i].style.height; bars[k].childNodes[0].innerText = bars[k - i].childNodes[0].innerText; // To pause the execution of code // for 300 milliseconds await new Promise((resolve) => setTimeout(() => { resolve(); }, 300) ); } // Provide darkblue color to the jth bar bars[j].style.backgroundColor = "darkblue"; // Provide darkblue color to the kth bar bars[k].style.backgroundColor = "darkblue"; bars[k].style.height = temp1; bars[k].childNodes[0].innerText = temp2; // To pause the execution of code for // 300 milliseconds await new Promise((resolve) => setTimeout(() => { resolve(); }, 600) ); // Provide skyblue color to the jth bar bars[j].style.backgroundColor = "rgb(0, 183, 255)"; // Provide skyblue color to the kth bar bars[k].style.backgroundColor = "rgb(0, 183, 255)"; // To pause the execution of code for // 300 milliseconds await new Promise((resolve) => setTimeout(() => { resolve(); }, 300) ); } } for (var x = 0; x < 20; x++) { bars[x].style.backgroundColor = "rgb(49, 226, 13)"; } // To enable the button "Generate New Array" // after final(sorted) document.getElementById("Button1") .disabled = false; document.getElementById("Button1") .style.backgroundColor = "#6f459e"; // To enable the button "Shell Sort" // after final(sorted) document.getElementById("Button2").disabled = false; document.getElementById("Button2") .style.backgroundColor = "#6f459e"; } // Call "generatebars()" function generatebars(); // Function to generate new random array function generate() { window.location.reload(); } // Function to disable the button function disable() { // To disable the button "Generate New Array" document.getElementById("Button1").disabled = true; document.getElementById("Button1") .style.backgroundColor = "#d8b6ff"; // To disable the button "Shell Sort" document.getElementById("Button2").disabled = true; document.getElementById("Button2") .style.backgroundColor = "#d8b6ff"; } Output: Comment More infoAdvertise with us Next Article Shell Sort Visualizer using JavaScript S shivammahajancse Follow Improve Article Tags : Sorting JavaScript Web Technologies DSA ShellSort JavaScript-Questions +2 More Practice Tags : Sorting Similar Reads Gnome Sort Visualizer using JavaScript In this article, we are going to learn Gnome sort Visualizer using javascript, Gnome Sort also called Stupid sort, is based on the concept of a Garden Gnome sorting his flower pots. In order to know more about it. Please refer to Gnome Sort.An algorithm like Gnome Sort can be easily understood by vi 4 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 Binary Search Visualization using JavaScript 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 Searc 4 min read Merge Sort Visualization in JavaScript GUI(Graphical User Interface) helps users with better understanding programs. In this article, we will visualize Merge Sort using JavaScript. We will see how the arrays are divided and merged after sorting to get the final sorted array. Refer: Merge SortCanvas in HTMLAsynchronous Function in JavaSc 4 min read Sliding Window Visualizer using HTML CSS and JavaScript Window sliding technique is used extensively in array problems and used a lot in subarray-related problems like subarray sum etc. In this article, we will understand how Sliding Window Visualizer works along with knowing the basic implementation of the visualizer.Window sliding technique is an effic 8 min read Create a Stack Visualizer using HTML CSS and Javascript In this article, we will see how to create a stack visualizer using HTML, CSS & Javascript, along with understanding its implementation through the illustration.Stack is a well-known linear data structure that may follow the order LIFO(Last In First Out) or FILO(First In Last Out). There are man 9 min read How to Run JavaScript in Visual Studio? To run JavaScript in Visual Studio, you can either use Node.js in the Terminal or the Code Runner extension. Both methods allow you to execute JavaScript code easily and efficiently within the Visual Studio environment.Using Node.js in TerminalNode.js is a JavaScript runtime that allows you to execu 2 min read How to make KMP Algorithm visualizer using HTML,CSS & JavaScript ? The KMP matching algorithm uses degenerating property (pattern having the same sub-patterns appearing more than once in the pattern) of the pattern and improves the worst-case complexity to O(n). The basic idea behind KMPâs algorithm is: whenever we detect a mismatch (after some matches), we already 11 min read Uses of JavaScript JavaScript is a versatile programming language extensively used in web development. It empowers interactive features like form validation, dynamic content updates, and user interface enhancements. Furthermore, it's employed in server-side scripting, mobile app development, game development, and even 3 min read JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav 11 min read Like