Build a Sorting Visualizer - Build a Sorting Visualizer

Curriculum Help
1

Tell us what’s happening:

I have been trying this for a few days but no matter what i implement it always fails test #20. any advice would be very helpful.
Thanks in advance!

Your code so far

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


/* file: styles.css */


/* file: script.js */
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 result = [];
  for (let i = 0; i < 5; i++) {
    result.push(generateElement());
  }
  return result;
}

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

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

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

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

function highlightCurrentEls(htmlEl, index) {
  const children = htmlEl.children;
  if (children[index] && children[index + 1]) {
    children[index].style.border = "2px dashed red";
    children[index + 1].style.border = "2px dashed red";
  }
}

let arr = [];

generateBtn.addEventListener("click", () => {
  arr = generateArray();
  fillArrContainer(startingArray, arr);
  
  arrayContainer.innerHTML = "";
  arrayContainer.appendChild(startingArray);
});

sortBtn.addEventListener("click", () => {
  let spans = startingArray.querySelectorAll("span");
  if (spans.length === 0) {
    arr = generateArray();
    fillArrContainer(startingArray, arr);
    spans = startingArray.querySelectorAll("span");
  }
  
  let workingArr = Array.from(spans).map(span => Number(span.textContent));
  
  arrayContainer.innerHTML = "";
  arrayContainer.appendChild(startingArray);
  fillArrContainer(startingArray, workingArr);

  let swapped;
  let isFirstStep = true;
  const n = workingArr.length;

  do {
    swapped = false;
    for (let i = 0; i < n - 1; i++) {
      let currentContainer;

      if (isFirstStep) {
        currentContainer = startingArray;
        isFirstStep = false;
      } else {
        currentContainer = generateContainer();
        fillArrContainer(currentContainer, workingArr);
        arrayContainer.appendChild(currentContainer);
      }
      highlightCurrentEls(currentContainer, i);

      if (!isOrdered(workingArr[i], workingArr[i + 1])) {
        swapElements(workingArr, i);
        swapped = true;
      }
    }
  } while (swapped);

  const finalDiv = generateContainer();
  fillArrContainer(finalDiv, workingArr);
  arrayContainer.appendChild(finalDiv);
});

Your browser information:

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

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-sorting-visualizer/6716249b5405164036fd0b0d.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hey @jsteinhauer7

According to the lab file, #20 is expecting a bubbleSort() function inside addEventListner callback for sort-btn.

I’ll create an issue on this as it is no where mentioned that we have to specifically create a bubbleSort function.

In case if I missed this instruction, please do let me know.

3

Welcome to the forum @jsteinhauer7,

I agree with @imsomilg, and I’ve never seen this issue with this challenge before, so maybe a change was made recently to the tests that borked this. Anyway, all I did was change your code as follows to get it to pass (normally we don’t provide code, but this is an exception because it’s a test issue):slight_smile:

sortBtn.addEventListener("click", bubbleSort);

function bubbleSort() {

Happy coding

4

There you go and thanks to you, future campers won’t be facing this issue. Have a nice day!

5

That did it thank you so much! I was loosing all hope

6

We have blurred this solution (with [spoiler][/spoiler] tags) so that users who have not completed this challenge can read the discussion in this thread without giving away the solution.