Visualizador de clasificación de cócteles usando JavaScript

Cocktail Sort es una variación de Bubble sort . Cocktail Sort atraviesa una array dada en ambas direcciones alternativamente. Para saber más al respecto. Consulte Clasificación de cócteles .

Un algoritmo como Cocktail Sort se puede entender fácilmente visualizando en lugar de códigos largos. En este artículo, Cocktail Sort Visualizer se implementa utilizando HTML, CSS y JavaScript .

Requisitos previos:

Acercarse:

  • Button Generate New Array genera una array de valores aleatorios usando la función Math.random() y una barra correspondiente a ese valor en términos de altura.
  • Se utilizan diferentes colores para indicar qué elementos no están ordenados (azul cielo), comparados (rojo) y ordenados (verde claro).
  • Cóctel de botones Ordene los elementos utilizando el algoritmo de ordenación por selección.
  • Finalmente, se ordenan los elementos.

Ejemplo: haga clic en el botón «Generar nueva array» para generar una nueva array aleatoria. Haga clic en el botón «Clasificación de cóctel» para realizar la visualización.

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

Producción:

Publicación traducida automáticamente

Artículo escrito por shivammahajancse y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *