Skip to content
Related Articles

Related Articles

Improve Article

Cocktail Sort Visualizer using JavaScript

  • Last Updated : 25 Jul, 2021

Cocktail Sort is a variation of Bubble sort. Cocktail Sort traverses through a given array in both directions alternatively. In order to know more about it. Please refer to Cocktail Sort.

An algorithm like Cocktail Sort can be easily understood by visualizing instead of long codes. In this article, Cocktail 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 Cocktail 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 “Cocktail 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>Cocktail Sort Visualizer</title>
  
    <!-- linking style.css -->
    <link href="style.css" rel="stylesheet" />
  </head>
  <!-- body -->
  <body>
    <section class="head">Cocktail 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>
  
      <!-- "Cocktail Sort" button -->
      <button class="btn2" 
              onclick="CocktailSort(),disable()" 
              id="Button2">
        Cocktail 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);
  }
}
  
// Asynchronous function to perform "Cocktail Sort"
async function CocktailSort(delay = 600) {
  let bars = document.querySelectorAll(".bar");
  
  // Initialize swapped with true
  let swapped = true;
  
  // Initialize s with zero
  let s = 0;
  
  // Initialize e with 20
  let e = 20;
  
  while (swapped == true) {
    swapped = false;
  
    for (var i = s; i < e - 1; i++) {
      
      // Assigning value of ith bar into value1
      var value1 = parseInt(bars[i].childNodes[0].innerHTML);
  
      // Assigning value of i+1th bar into value2
      var value2 = parseInt(bars[i + 1].childNodes[0].innerHTML);
  
      // To pause the execution of code for 300 milliseconds
      await new Promise((resolve) =>
        setTimeout(() => {
          resolve();
        }, 300)
      );
  
      // Provide red color to the ith bar
      bars[i].style.backgroundColor = "red";
  
      // Provide red color to the i+1th bar
      bars[i + 1].style.backgroundColor = "red";
      if (value1 > value2) {
        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+1)th bar
        bars[i].style.height = bars[i + 1].style.height;
        bars[i].childNodes[0].innerText = bars[i + 1].childNodes[0].innerText;
        bars[i + 1].style.height = temp1;
        bars[i + 1].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+1th bar
      bars[i + 1].style.backgroundColor = "rgb(0, 183, 255)";
    }
  
    if (swapped == false) {
      break;
    }
  
    // Set swapped false
    swapped = false;
  
    e = e - 1;
  
    for (var i = e - 1; i >= s; i--) {
      
      // Assigning value of ith bar into value1
      var value1 = parseInt(bars[i].childNodes[0].innerHTML);
  
      // Assigning value of i+1th bar into value2
      var value2 = parseInt(bars[i + 1].childNodes[0].innerHTML);
  
      // To pause the execution of code for 300 milliseconds
      await new Promise((resolve) =>
        setTimeout(() => {
          resolve();
        }, 300)
      );
  
      // Provide red color to the ith bar
      bars[i].style.backgroundColor = "red";
  
      // Provide red color to the i+1th bar
      bars[i + 1].style.backgroundColor = "red";
      if (value1 > value2) {
        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+1)th bar
        bars[i].style.height = bars[i + 1].style.height;
        bars[i].childNodes[0].innerText = bars[i + 1].childNodes[0].innerText;
        bars[i + 1].style.height = temp1;
        bars[i + 1].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+1th bar
      bars[i + 1].style.backgroundColor = "rgb(0, 183, 255)";
    }
    s = s + 1;
  }
  
  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 "Cocktail 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 "Cocktail 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 :