Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

I cannot pass test 20 and it seems as if my code does exactly what it says.

Your code so far

<!-- file: index.html -->


/* file: styles.css */


const generateBtn = document.getElementById("generate-btn");
const sortBtn = document.getElementById("sort-btn");
const startingArray = document.getElementById("starting-array");
const arrayContainer = document.getElementById("array-container");

function generateElement() {
  return Math.floor(Math.random() * 100) + 1;
}


function generateArray() {
  const arr = [];
  for (let i = 0; i < 5; i++) {
    arr.push(generateElement());
  }
  return arr;
}

function generateContainer() {
  return document.createElement("div");
}

function fillArrContainer(htmlEl, arr) {
  htmlEl.innerHTML = "";
  arr.forEach((num) => {
    const span = document.createElement("span");
    span.textContent = num;
    htmlEl.appendChild(span);
  });
}

function isOrdered(a, b) {
  return a <= b;
}

function swapElements(arr, index) {
  if (!isOrdered(arr[index], arr[index + 1])) {
    [arr[index], arr[index + 1]] = [arr[index + 1], arr[index]];
    return true;
  }
  return false;
}


function highlightCurrentEls(htmlEl, index) {
  Array.from(htmlEl.children).forEach((child) => {
    child.style.border = '';
  });
  const e1 = htmlEl.children[index];
  const e2 = htmlEl.children[index + 1];
  if (e1) e1.style.border = "2px dashed red";
  if (e2) e2.style.border = "2px dashed red";
}

let arr = [];
let originalArr = [];

generateBtn.addEventListener("click", ()=>{
  arr = generateArray();
  originalArr = arr;
  fillArrContainer(startingArray, arr);
    arrayContainer.innerHTML = `<div id="starting-array">${startingArray.innerHTML}</div>`

})


sortBtn.addEventListener("click", ()=>{
  if(document.getElementById("sorted") !== null){
    return;
  }
    let swapCount = 0;
    let initialIndex = 1;

  highlightCurrentEls(startingArray, 0);
  arrayContainer.innerHTML = `<div id="starting-array">${startingArray.innerHTML}</div>`;
  swapElements(arr,0);
  for(let i = 0; i < 5; i++){
    for(let i= initialIndex; i < 4; i++){
      const divEl = generateContainer();
      fillArrContainer(divEl, arr)
      highlightCurrentEls(divEl, i);
      arrayContainer.innerHTML += `<div>${divEl.innerHTML}</div>`;
           if(swapElements(arr, i)){
             swapCount++;
           }
    }
    if(swapCount === 0){
      break;
    }
    swapCount = 0;
   initialIndex = 0;
  }
  const divEl = generateContainer();
      fillArrContainer(divEl, arr)
  arrayContainer.innerHTML += `<div id="sorted">${divEl.innerHTML}</div>`;
  arr = originalArr;
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

2

There is that one condition where you press the button and the function returns early without calling highlightCurrentEls

Maybe if you ensure highlightCurrentEls is always called no matter what?

3

That was the issue, thanks a lot!

1 Like
4

I updated the the code I am still facing same issue. may you help meeeeee please?

5

use your own topic to ask for help