Build a Sorting Visualizer - Build a Sorting Visualizer

Curriculum Help
1

Tell us what’s happening:

So Tests 18, 19 and 20 are failing and I don’t understand why
From looking at it, my solution is extremely similar to the example project (I say extremely, because it looks basically the same, but the test probably demands one solution that I don’t have)

And when I remove the final step of adding the solution (which I also gave a green border) then step 20 succeeds and I don’t understand why

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 */
function generateElement(){
  return Math.ceil(Math.random() * 100);
}

function generateArray(){
  const arr = [generateElement(), generateElement(), generateElement(), generateElement(), generateElement()];
  currLayout = [...arr];
  return arr;
}

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

function fillArrContainer(el, arr){
  for (const num of arr){
    el.innerHTML += `<span id="number-${num}">${num}</span>`;
  }
}

function isOrdered(num1, num2){
  return (num1 <= num2) ? true : false;
}

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

function highlightCurrentEls(el, num){
  const numbers = el.querySelectorAll("span");
  numbers[num].style.border = "2px dashed red";
  numbers[num + 1].style.border = "2px dashed red";
}

const generateButton = document.getElementById("generate-btn");
const arrContainer = document.getElementById("array-container");
const sortButton = document.getElementById("sort-btn");
let currLayout = [];

generateButton.addEventListener("click", () => {
  arrContainer.innerHTML = "";
  arrContainer.innerHTML += '<div id="starting-array"></div>';
  fillArrContainer(document.getElementById("starting-array"), generateArray());
});

sortButton.addEventListener("click", () => {
  let copy = [...currLayout];
  copy.sort((a, b) => a - b);
  for (let i = 0; i < currLayout.length - 1; i++){
    if (copy.join("") === currLayout.join("")) break;
    for (let j = 0; j < currLayout.length - 1; j++){
      if (i === 0 && j === 0){
        highlightCurrentEls(document.getElementById("starting-array"), j);
        continue;
      }
      let currIt = generateContainer();
      swapElements(currLayout, j);
      fillArrContainer(currIt, currLayout);
      arrContainer.appendChild(currIt);
      highlightCurrentEls(currIt, j)
    }
  }
  let final = generateContainer();
  fillArrContainer(final, currLayout);
  final.setAttribute("style", "border: 4px solid green");
  arrContainer.appendChild(final);
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0

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

Hi @Ninge3007,

Here’s a comparison of the example app’s behavior to your code’s behavior with the same array ----------

Example app:

image
image751×630 50.5 KB

Your code:

image
image467×490 31.8 KB

It looks like you have a swapping issue and an outer loop variable issue.

Also, please don’t overlook this instruction:

The algorithm stops after one cycle completes with no swaps.

Happy coding

3

Ok solving the instruction that you marked helped me solve test 18 and 20 but test 19 is failing and I don’t know what it expects me to do.

Does it expect me to use the array from the starting-array div? Because I currently use a copy that I made in the generateArray function and it succeeds all the other tests

Updated code:

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

function generateArray(){
  const arr = [generateElement(), generateElement(), generateElement(), generateElement(), generateElement()];
  currLayout = [...arr];
  return arr;
}

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

function fillArrContainer(el, arr){
  for (const num of arr){
    el.innerHTML += `<span id="number-${num}">${num}</span>`;
  }
}

function isOrdered(num1, num2){
  return (num1 <= num2) ? true : false;
}

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

function highlightCurrentEls(el, num){
  const numbers = el.querySelectorAll("span");
  numbers[num].style.border = "2px dashed red";
  numbers[num + 1].style.border = "2px dashed red";
}

const generateButton = document.getElementById("generate-btn");
const arrContainer = document.getElementById("array-container");
const sortButton = document.getElementById("sort-btn");
let currLayout = [];
let isComplete = false;

generateButton.addEventListener("click", () => {
  isComplete = false;
  arrContainer.innerHTML = "";
  arrContainer.innerHTML += '<div id="starting-array"></div>';
  fillArrContainer(document.getElementById("starting-array"), generateArray());
});

sortButton.addEventListener("click", () => {
  let copy = [...currLayout];
  copy.sort((a, b) => a - b);
  for (let i = 0; i < currLayout.length - 1; i++){
    if (isComplete) break;
    if (copy.join("") === currLayout.join("")){
      isComplete = true;
    }
    for (let j = 0; j < currLayout.length - 1; j++){
      if (i === 0 && j === 0){
        highlightCurrentEls(document.getElementById("starting-array"), j);
        continue;
      }
      let currIt = generateContainer();
      swapElements(currLayout, j);
      fillArrContainer(currIt, currLayout);
      arrContainer.appendChild(currIt);
      highlightCurrentEls(currIt, j)
    }
  }
  let final = generateContainer();
  fillArrContainer(final, currLayout);
  final.setAttribute("style", "border: 4px solid green");
  arrContainer.appendChild(final);
});
4

Look again at the comparison of your code to the example app.

Notice that the first two numbers in the first div are highlighted to be swapped, and in the example app they are swapped in the next div. But your code is swapping the second pair instead.

So, your second div should be 68,100,18,77,7 with 100 and 18 set up to be swapped next.

Your current code is still not swapping correctly.

5

got it now, I accidentally forgot to swap the elements on the first iteration.

Thank you so much!!