Comb Sort Visualizer using JavaScript

Last Updated : 05 Jun, 2023

Comb Sort is mainly an improvement over Bubble Sort. Comb Sort improves on Bubble Sort by using a gap of the size of more than 1. In order to know more about it. Please refer to Comb Sort.

An algorithm like Comb Sort can be easily understood by visualizing instead of long codes. In this article, Comb Sort Visualizer is implemented using HTML, CSS & JavaScript.

Pre-requisites:

Comb Sort.
Basic 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(red) & sorted(lightgreen).
Button Comb Sort the elements using the selection sort algorithm.
Finally, elements are sorted.

Example: Click on the ‘Generate New Array’ button to generate a new random array. Click the Comb Sort button to perform Visualization.

HTML code:

HTML

<!DOCTYPE html>
<html lang="en">
<!-- head -->
<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>Comb Sort Visualizer using JavaScript</title>
 
    <!-- linking style.css -->
    <link href="style.css" rel="stylesheet" />
</head>
 
<body>
    <section class="head">Comb 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>
 
        <!-- "Comb Sort" button -->
        <button class="btn2" onclick="CombSort(),disable()"
                id="Button2">
              Comb Sort
          </button>
    </div>
    <script src="script.js"></script>
</body>
</html>

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

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);
    }
}
 
// Function calculate_gap
function calculate_gap(gap) {
 
    gap = parseInt((gap * 10) / 13, 10);
    if (gap < 1) return 1;
    return gap;
}
 
// Asynchronous function to perform "Comb Sort"
async function CombSort(delay = 600) {
    let bars = document.querySelectorAll(".bar");
 
    let gap = 20;
 
    let swapped = true;
 
    while (gap != 1 || swapped == true) {
 
        // Calling calculate_gap function
        gap = calculate_gap(gap);
 
        // Initializing swapped with false
        swapped = false;
 
        for (let i = 0; i < 20 - gap; i++) {
 
            // Assigning value of ith bar into value1
            let value1 = parseInt(bars[i].childNodes[0].innerHTML);
 
            // Assigning value of i+gapth bar into value2
            let value2 = parseInt(bars[i + gap].childNodes[0].innerHTML);
            if (value1 > value2) {
 
                // Provide red color to the ith bar
                bars[i].style.backgroundColor = "red";
 
                // Provide red color to the i+gapth bar
                bars[i + gap].style.backgroundColor = "red";
 
                // Swap ith bar with (i+gap)th bar
                let temp1 = bars[i].style.height;
                let temp2 = bars[i].childNodes[0].innerText;
 
                // To pause the execution of code for 300 milliseconds
                await new Promise((resolve) =>
                    setTimeout(() => {
                        resolve();
                    }, 300)
                );
 
                // Swap ith bar with (i+gap)th bar
                bars[i].style.height = bars[i + gap].style.height;
                bars[i].childNodes[0].innerText = bars[i + gap].childNodes[0].innerText;
                bars[i + gap].style.height = temp1;
                bars[i + gap].childNodes[0].innerText = temp2;
 
                // Set swapped
                swapped = true;
 
                // To pause the execution of code for 300 milliseconds
                await new Promise((resolve) =>
                    setTimeout(() => {
                        resolve();
                    }, 300)
                );
            }
            // Provide skyblue color to the ith bar
            bars[i].style.backgroundColor = "rgb(0, 183, 255)";
 
            // Provide skyblue color to the i+gapth bar
            bars[i + gap].style.backgroundColor = "rgb(0, 183, 255)";
 
            // To pause the execution of code for 300 milliseconds
            await new Promise((resolve) =>
                setTimeout(() => {
                    resolve();
                }, 300)
            );
        }
    }
    for (let 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 "Comb 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 "Comb Sort"
    document.getElementById("Button2").disabled = true;
    document.getElementById("Button2").style.backgroundColor = "#d8b6ff";
}

Complete code:

HTML

<!DOCTYPE html>
<html lang="en">
<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>Comb Sort Visualizer using JavaScript</title>
 
    <!-- linking style.css -->
    <link href="style.css" rel="stylesheet" />
</head>
<!-- body -->
 
<body>
    <section class="head">Comb 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>
 
        <!-- "Comb Sort" button -->
        <button class="btn2" onclick="CombSort(),disable()"
                id="Button2">
              Comb Sort
          </button>
    </div>
    <script src="script.js"></script>
</body>
 
</html>