Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

I am passing every test except 20 (When you click the #sort-btn, you should make use of the highlightCurrentEls function to highlight the elements being compared in each step). My code is utilizing the function to highlight the appropriate elements, and my output is identical to the sample project. I’ve rewritten the function a few different ways but it always fails test 20. I don’t know what else to do at this point.

Your code so far

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


/* file: styles.css */


/* file: script.js */

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

function generateElement() {
  return (Math.ceil(Math.random() * 100));
}

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

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

function fillArrContainer(el, arr) {
  arr.forEach((num) => {
    el.innerHTML += `<span>${num}</span>`
  });
}

function isOrdered(int1, int2) {
  return int1 <= int2;
}

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

function highlightCurrentEls(el, index) {
  const childEls = el.children;
  childEls[index].style.border = '2px dashed red';
  childEls[index+1].style.border = '2px dashed red';
}

let workingArray = [];
let isArrSorted = false;

generateBtn.addEventListener("click", () => {
  startingArray.innerHTML = '';
  arrayContainer.innerHTML = '';
  arrayContainer.appendChild(startingArray);
  workingArray = generateArray();
  fillArrContainer(startingArray,workingArray);
  isArrSorted = false;
});

sortBtn.addEventListener("click", () => {
  if (!isArrSorted) {
    arrayContainer.innerHTML = '';
    let isFirstIteration = true;
    while (!isOrdered(workingArray[0], workingArray[1]) || !isOrdered(workingArray[1], workingArray[2]) || !isOrdered(workingArray[2], workingArray[3]) || !isOrdered(workingArray[3], workingArray[4])) {
      for (let i = 0; i < 4; i++) {
        if (isFirstIteration) {
          arrayContainer.appendChild(startingArray);
          highlightCurrentEls(startingArray, i);
          isFirstIteration = false;
        } else {
          let j = i-1;
          if (i === 0) {
            j = 3;
          }
          swapElements(workingArray, j);
          const nextStep = generateContainer();
          fillArrContainer(nextStep, workingArray);
          highlightCurrentEls(nextStep, i);
          arrayContainer.appendChild(nextStep);
        }
      }
    }
    for (let i = 0; i < 4; i++) {
      let j = i-1;
      if (i === 0) {
        j = 3;
      }
      swapElements(workingArray, j);
      const nextStep = generateContainer();
      fillArrContainer(nextStep, workingArray);
      arrayContainer.appendChild(nextStep);
      highlightCurrentEls(nextStep, i);
    }
    isArrSorted = true;
    swapElements(workingArray, 0);
    const lastStep = generateContainer();
    fillArrContainer(lastStep, workingArray);
    arrayContainer.appendChild(lastStep);
    lastStep.style.border = "4px solid green";
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

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

2

When you click the sort button it must run that function.

If there’s a circumstance where it doesn’t that could be a problem.

What is isArrSorted ? How do you use it, and is it required?

4

I was using it to disable the sort button functionality when the array was already sorted. I switched to hiding the button instead and it passed the test. It wasn’t a listed requirement in the exercise, but it worked, so thanks!

5

I guess the test is only clicking the sort button, not the generate button, I will add an issue to make it do both