Build a Sorting Visualizer - Build a Sorting Visualizer

Curriculum Help
1

Tell us what’s happening:

I tried several times but test number 18 to 20 keeps on failing

Your code so far

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sorting Visualizer</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <main>
        <div id="array-container">
            <div id="starting-array"></div>
        </div>
        <div id="btn-container">
            <button id="generate-btn" type="button">Generate Array</button>
            <button id="sort-btn" type="button">Sort Array</button>
        </div>
    </main>
    <script src="script.js"></script>
</body>

</html>

/* file: styles.css */

* {
    box-sizing: border-box;
}

main {
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#array-container {
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2px;

}

#array-container>div {
    min-width: 8rem;
    height: 2rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border-radius: 10px;
    margin-bottom: 0.2rem;
    border: 2px solid darkgray;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#starting-array {
    border: 4px solid darkblue !important;
}

#btn-container {
    display: flex;
    justify-content: space-around;
}

button {
    padding: 2px;
    margin: 5px;
}

span {
    border-radius: 2px;
    padding: 0.5px;
    margin: 0
}

@media (min-width: 430px) {
  #array-container>div {
    min-width: 12rem;    
  }
  span {
    padding: 1px;
    margin: 1px;
  }
}

/* file: script.js */

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

let startingArray;

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

const generateArray = () => {
  const array = [];

  for (let i = 0; i < 5; i++) {
    array.push(generateElement());
  }

  return array;
};

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

const fillArrContainer = (element, arr) => {
  arr.forEach((num) => {
    const span = document.createElement("span");
    span.textContent = num;
    element.appendChild(span);
  });
};

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

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

const highlightCurrentEls = (element, index) => {
  const descendants = element.querySelectorAll("*");

  descendants[index].style.border = "2px dashed red";
  descendants[index + 1].style.border = "2px dashed red";
};

generateBtn.addEventListener("click", () => {
  arrayContainer.innerHTML = "";

  startingArray = generateContainer();
  startingArray.id = "starting-array";

  fillArrContainer(startingArray, generateArray());

  arrayContainer.appendChild(startingArray);
});

sortBtn.addEventListener("click", () => {
  if (!startingArray) return;

  // Clear previous sort steps, keeping startingArray
  while (arrayContainer.children.length > 1) {
    arrayContainer.removeChild(arrayContainer.lastChild);
  }

  const arr = [...startingArray.querySelectorAll("span")].map((span) =>
    Number(span.textContent)
  );

  let stepCount = 0;

  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - 1 - i; j++) {
      let container;

      if (stepCount === 0) {
        container = startingArray;
      } else {
        container = generateContainer();
        fillArrContainer(container, arr);
        arrayContainer.appendChild(container);
      }

      // 1. Highlight current elements being compared
      highlightCurrentEls(container, j);

      // 2. Perform swap for the state of the next step
      swapElements(arr, j);

      stepCount++;
    }
  }

  // Final Step: Append the final sorted array without highlights
  const finalContainer = generateContainer();
  fillArrContainer(finalContainer, arr);
  arrayContainer.appendChild(finalContainer);
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.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 back @muisrael,

Check your loop variables. The outer loop should run to the length of the array, if necessary, and the inner loop should handle each pair of numbers in the array.

Also, please don’t overlook this instruction:

The algorithm stops after one cycle completes with no swaps.

Happy coding