Skip to content
Related Articles

Related Articles

Improve Article

Comb Sort Visualizer using JavaScript

  • Difficulty Level : Hard
  • Last Updated : 19 Jul, 2021

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:

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 ‘Generate New Array’ button to generate a new random array. Click the Comb Sort button to perform Visualization.

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 -->
  <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>
  </body>
  
  <!-- linking script.js -->
  <script src="script.js"></script>
</html>

style.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




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");
  
  var 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 (var i = 0; i < 20 - gap; i++) {
      
      // Assigning value of ith bar into value1
      var value1 = parseInt(bars[i].childNodes[0].innerHTML);
  
      // Assigning value of i+gapth bar into value2
      var 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
        var temp1 = bars[i].style.height;
        var 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 (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 "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";
}

Output

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :