Build a Sorting Visualizer - Build a Sorting Visualizer

[NotQasim]

Tell us what’s happening:

I cannot get test 18 to pass. I tested this by generating a pre-sorted array from the demo, which had 5 div elements including the blue and green ones. I then hard-coded the exact array into my code and logged the number of children in #arrays-container to the console, which was indeed 5.

Your code so far

/* file: script.js */
const generateElement = () => Math.floor(Math.random() * 100) + 1;

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

const generateContainer = () => document.createElement("div");

const fillArrContainer = (element, arr) => {
  element.innerHTML = "";
  arr.forEach((num) => {
    const spanElement = document.createElement("span");
    spanElement.innerText = num;
    element.appendChild(spanElement);
  });
}

const isOrdered = (firstNum, secondNum) => firstNum <= secondNum

const swapElements = (arr, index) => {
  if (isOrdered(arr[index], arr[index+1])) return;

  arr[index] = arr[index] ^ arr[index+1];
  arr[index+1] = arr[index] ^ arr[index+1];
  arr[index] = arr[index] ^ arr[index+1];
}

const highlightCurrentEls = (element, index) => {
  element.querySelectorAll("span")[index].style.border = "2px dashed red";
  element.querySelectorAll("span")[index+1].style.border = "2px dashed red";
}

const generateBtn = document.getElementById("generate-btn");
const sortBtn = document.getElementById("sort-btn");

const startingArrayContainer = document.getElementById("starting-array");
const allArraysContainer = document.getElementById("array-container");

sortBtn.style.display = "none";

generateBtn.addEventListener("click", () => {
  sortBtn.style.display = "inline";

  allArraysContainer.innerHTML = "";
  allArraysContainer.appendChild(startingArrayContainer);

  fillArrContainer(startingArrayContainer, generateArray());
});

sortBtn.addEventListener("click", () => {
  sortBtn.style.display = "none";

  const numsArr = [];
  startingArrayContainer.querySelectorAll("span").forEach((span) => numsArr.push(Number(span.innerText)));
  highlightCurrentEls(startingArrayContainer, 0);
  if(!isOrdered(numsArr[0], numsArr[1])) swapElements(numsArr, 0);

  let firstStep = true;
  while(true) {
    for (let i = 0; i < 4; i++) {
      if (firstStep) {
        firstStep = false;
        continue;
      }
      const newDivElement = generateContainer();
      allArraysContainer.appendChild(newDivElement);
      fillArrContainer(newDivElement, numsArr);
      highlightCurrentEls(newDivElement, i);
      if(!isOrdered(numsArr[i], numsArr[i+1])) swapElements(numsArr, i);
    }
    if (isOrdered(numsArr[0], numsArr[1]) && isOrdered(numsArr[1],numsArr[2]) && isOrdered(numsArr[2], numsArr[3]) && isOrdered(numsArr[3], numsArr[4])) {
      const newDivElement = generateContainer();
      allArraysContainer.appendChild(newDivElement);
      fillArrContainer(newDivElement, numsArr);
      newDivElement.style.border = "4px solid green";
      break;
    }
  }
});

Your browser information:

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

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer
https://www.freecodecamp.org/learn/full-stack-developer/lab-sorting-visualizer/build-a-sorting-visualizer

[hbar1st]

the problem is you are stopping the sort too early.
The instructions say:

The algorithm stops after one cycle completes with no swaps.

But when I tested your code, you stop as soon as the array is sorted without showing the last round of checks. (so you’re always 4 steps too short)

Here’s a screen shot showing the issue:

in the last round of checks we had the array at
19 11 59 66 72 and then 19 and 11 swap
11 19 59 66 72 and then we continue to the end to get
11 19 59 66 72 BUT you don’t repeat the sort one more time.
The WHOLE cycle must be completed because the previous cycle had one swap (19 and 11 were swapped)

Does that make sense?

[NotQasim]

Yes. Thank you for the help. I fixed it.