Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

i need the full code that is working i gaved up i need help please can anyone put his code in hear

Your code so far

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


/* file: styles.css */


/* file: script.js */
/* file: script.js */
let currentArray = [];

function generateElement() {
  return Math.floor(Math.random() * 100) + 1;
}

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

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

function fillArrContainer(container, arr) {
  container.innerHTML = ""; // Clear existing content
  arr.forEach(num => {
    const span = document.createElement("span");
    span.textContent = num;
    container.appendChild(span);
  });
}

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

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

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

document.getElementById("generate-btn").addEventListener("click", function () {
  const arrayContainer = document.getElementById("array-container");
  arrayContainer.innerHTML = "";

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

  currentArray = generateArray();
  fillArrContainer(startingArrayDiv, currentArray);
});

document.getElementById("sort-btn").addEventListener("click", function () {
  if (currentArray.length === 0) return;
  const arrayContainer = document.getElementById("array-container");

  const startingArrayDiv = document.getElementById("starting-array");
  fillArrContainer(startingArrayDiv, currentArray);
  highlightCurrentEls(startingArrayDiv, 0);
  
  let arr = currentArray.slice();
  const n = arr.length;
  let comparisonCount = 0; // total comparisons performed

  for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
      comparisonCount++;
      if (comparisonCount === 1) {
        if (!isOrdered(arr[j], arr[j + 1])) {
          swapElements(arr, j);
        }
      } else {
        const stepContainer = generateContainer();
        fillArrContainer(stepContainer, arr);
        highlightCurrentEls(stepContainer, j);
        arrayContainer.appendChild(stepContainer);

        if (!isOrdered(arr[j], arr[j + 1])) {
          swapElements(arr, j);
        }
      }
    }
  }

  const finalContainer = generateContainer();
  fillArrContainer(finalContainer, arr);
  arrayContainer.appendChild(finalContainer);
});

Your browser information:

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

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

Build a Sorting Visualizer - Build a Sorting Visualizer
2

no, people can’t give you the solution

but if you share your code people can help you

3

Check your loop variables. The inner loop should be targeting each pair of numbers in the array. And do you really want your outer loop to be less than the array length minus 1? If the array length is 5 and the index starts at 0, when should that loop stop? Let’s see 0, 1, 2, 3, … but 4 is not less than the array length minus 1!

Also, don’t overlook this important point in the challenge description:

The algorithm stops after one cycle completes with no swaps.

The best way to test what your code produces to what is expected is to:

  • Click generate, then sort in the example app.
  • Take a screenshot of the result.
  • Replace the call to generateArray() in your own code with the array generated in the example app
  • Run your code and compare the results