Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

Why is #18 giving me so many problems? I think I did it correctly.
18. After you click #sort-btn, #array-container should contain as many div elements as the steps required by the Bubble Sort algorithm to sort the starting array, including the div representing the starting array and a div representing the sorted array.

Your code so far

// Function 1–2: generateElement
function generateElement() {
  return Math.floor(Math.random() * 100) + 1;
}

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

// Function 6–7: generateContainer
function generateContainer() {
  return document.createElement("div");
}

// Function 8–9: fillArrContainer
function fillArrContainer(container, array) {
  container.innerHTML = "";
  array.forEach(num => {
    const span = document.createElement("span");
    span.textContent = num;
    container.appendChild(span);
  });
}

// Function 10–11: isOrdered
function isOrdered(a, b) {
  return a <= b;
}

// Function 12–13: swapElements
function swapElements(arr, index) {
  if (arr[index] > arr[index + 1]) {
    const temp = arr[index];
    arr[index] = arr[index + 1];
    arr[index + 1] = temp;
  }
}

// Function 14–15: highlightCurrentEls
function highlightCurrentEls(container, index) {
  const spans = container.children;
  if (spans[index]) spans[index].style.border = "2px dashed red";
  if (spans[index + 1]) spans[index + 1].style.border = "2px dashed red";
}

// Step 16–17: Generate Button Logic
const generateBtn = document.getElementById("generate-btn");
const arrayContainer = document.getElementById("array-container");

generateBtn.addEventListener("click", () => {
  // Clear the container
  arrayContainer.innerHTML = "";

  // Recreate starting-array div
  const startingDiv = document.createElement("div");
  startingDiv.id = "starting-array";
  arrayContainer.appendChild(startingDiv);

  // Generate and display array
  const arr = generateArray();
  fillArrContainer(startingDiv, arr);
});

// Step 18–21: Sort Button Logic
const sortBtn = document.getElementById("sort-btn");

sortBtn.addEventListener("click", () => {
  const startingDiv = document.getElementById("starting-array");
  const originalArray = Array.from(startingDiv.children).map(span => parseInt(span.textContent));
  const steps = [];
  let tempArray = [...originalArray];

  steps.push([...tempArray]); // Initial array

  for (let i = 0; i < tempArray.length; i++) {
    for (let j = 0; j < tempArray.length - i - 1; j++) {
      const currentStep = [...tempArray];

      // Swap if out of order
      if (!isOrdered(currentStep[j], currentStep[j + 1])) {
        swapElements(currentStep, j);
        tempArray = [...currentStep]; // Update array for next pass
      }

      steps.push([...tempArray]);
    }
  }

  // Clear and render all steps
  arrayContainer.innerHTML = "";

  steps.forEach((step, index) => {
    const stepDiv = generateContainer();
    if (index === 0) stepDiv.id = "starting-array";
    fillArrContainer(stepDiv, step);
    arrayContainer.appendChild(stepDiv);

    // Apply highlights only to first step
    if (index === 0) {
      highlightCurrentEls(stepDiv, 0);
    }
  });
});

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

2

Is that your complete script code?

3

no that is not my entire script

4

Please review the example project again. Notice that each iteration of the array completes and it doesn’t stop until it goes through one complete iteration of all spans with no swaps. Your code also isn’t highlighting the elements to be swapped during the iteration.

5 
  let swapped = true;
  let steps = 0;

  while (swapped) {
    swapped = false;
    for (let idx = 0; idx < array.length - 1; idx++) {
      const stepContainer = generateContainer();
      if (steps !== 0) {
        fillArrContainer(stepContainer, array);
        highlightCurrentEls(stepContainer, idx);
        arrayContainer.appendChild(stepContainer);
      }

      if (!isOrdered(array[idx], array[idx + 1])) {
        swapElements(array, idx);
        swapped = true;
      }

      steps++;
    }
  }
6

We see you have posted some code but did you have a question?

Can you explain what you’ve done to solve the problem?

Please do not just post some code without context or comment and expect other people to do all the work to figure out what you’re doing.