Build a Sorting Visualizer - Build a Sorting Visualizer

Curriculum Help
1

Tell us what’s happening:

19. After you click #sort-btn, each div within #array-container should contain five span, each with a number as its text, and arranged to represent the steps required by Bubble Sort algorithm to sort the starting array.

It keeps failing even after trying several fix and suggestions. I have implemented several fix on the sortBtn event handler but it keeps failing.

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 arrayContainer = document.getElementById('array-container');
const startingArray = document.getElementById('starting-array');



const generateElement = () => {
  return Math.floor(Math.random() * 100) + 1;
}

const generateArray = () => {
  return Array.from({ length: 5}, generateElement);
};

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

const fillArrContainer = (el, arrInts) => {
  el.innerHTML = `
    <span>${arrInts[0]}</span>
    <span>${arrInts[1]}</span>
    <span>${arrInts[2]}</span>
    <span>${arrInts[3]}</span>
    <span>${arrInts[4]}</span>
  `;

};

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

const swapElements = (arrInts, index) => {
      if (arrInts[index] > arrInts[index + 1]) {
        const temp = arrInts[index];
        arrInts[index] = arrInts[index + 1];
        arrInts[index + 1] = temp;
    }
  return arrInts;
}

const highlightCurrentEls = (parentElement, index) => {
  if (!parentElement || parentElement.children.length === 0 ) return;

  const targetElement = parentElement.children[index];
  const nextElement = parentElement.children[index + 1];

  if (targetElement) {
    targetElement.style.border = `2px dashed red`;
  }
  if (nextElement) {
    nextElement.style.border = `2px dashed red`;
  }

}
fillArrContainer(startingArray, generateArray());

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

sortBtn.addEventListener("click", () => {
  const arrInts = Array.from(startingArray.children).map(
    span => parseInt(span.textContent)
  );


  let currentArr = [...arrInts];

  arrayContainer.innerHTML = "";

  fillArrContainer(startingArray, currentArr);
  highlightCurrentEls(startingArray, 0);
  arrayContainer.appendChild(startingArray);

  for (let i = 0; i < currentArr.length - 1; i++) {
    for (let j = 0; j < currentArr.length - i - 1; j++) {
      if (!isOrdered(currentArr[j], currentArr[j + 1])) {
        swapElements(currentArr, j);
}

  const stepDiv = generateContainer();
    fillArrContainer(stepDiv, currentArr);
    highlightCurrentEls(stepDiv, j + 1);
    arrayContainer.appendChild(stepDiv);
    }
  }

  const sortedDiv = generateContainer();
  fillArrContainer(sortedDiv, currentArr);
  arrayContainer.appendChild(sortedDiv);
});

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

Welcome to the forum @nerdytechy5,

Please take a look at the example app and compare how your code behaves.

Check you loop variables, the way you handle the starting array, and what you send to the highlightCurrentEls function.

And note the instruction to stop sorting after one complete iteration with no swaps.

Happy coding