Shell Sort Visualizer using JavaScript

Last Updated : 10 Apr, 2023

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:

Suggest improvement

How to make a grid without calling CSS Grid property ?

OLX Interview Experience (On-Campus)

Share your thoughts in the comments

Shell Sort Visualizer using JavaScript

HTML

css

javascript

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?