Build a Sorting Visualizer - Build a Sorting Visualizer

Curriculum Help
1

Tell us what’s happening:

I am not sure why steps 18, 19, and 20 in the Tests section are failing. For step 18, when I click the sort button it creates as many div’s as it needs. For step 19, when I click sort button #array-container has five spans inside of it. Finally for step 20, after you click sort button it highlights or uses dashed line for each step except for the result. I followed the instruction but for some reason it doesn’t work. Can anyone help? Any help is appreciated. Thank you for your help.

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(){
  const min = 1;
  const max = 100;
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

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

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

const fillArrContainer = (htmlElement, arr) => {
  for(let i = 0; i < arr.length; i++){
    const span = document.createElement("span");
    span.textContent = arr[i];
    htmlElement.append(span);
  }
};

const isOrdered = (num1, num2) => {
  if(num1 <= num2){
    return true;
  }
  return false;
};

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

const highlightCurrentEls = (htmlElement, index) => {
  htmlElement.children[index].style.border = "2px dashed red";
  if(htmlElement.children[index + 1] !== undefined){
    htmlElement.children[index + 1].style.border = "2px dashed red"
  }
};

const generateBtn = document.getElementById("generate-btn");
const startingArr = document.getElementById("starting-array");
const arrContainer = document.getElementById("array-container");
let createdArr;

generateBtn.addEventListener("click", () => {
  createdArr = generateArray();

  const removeEl = arrContainer.querySelectorAll(":not(#starting-array)");
  removeEl.forEach((el) => el.remove());

  if(startingArr.children.length){
    startingArr.innerHTML = "";
  }
  
  fillArrContainer(startingArr, createdArr);
})

const sortingAlgorithm = (arr) => {
  for(let i = 0; i < arr.length; i++){
    for(let j = 0; j < arr.length - i - 1; j++){
      const genContainer = generateContainer();
      fillArrContainer(genContainer, arr);
      highlightCurrentEls(genContainer, j);
      arrContainer.append(genContainer);
      swapElements(arr, j);
    }
  }
}

const sortBtn = document.getElementById("sort-btn");

sortBtn.addEventListener("click", () => {
  highlightCurrentEls(startingArr, 0);
  sortingAlgorithm(createdArr);

  const genContainer = generateContainer();
  fillArrContainer(genContainer, createdArr);
  arrContainer.append(genContainer);
})

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15

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 @Nicholas1,

Please check your loop variables. Your inner loop should be handling each pair of numbers in the array for every iteration of the outer loop. Also, the starting array should be part of the bubble sort. You just need to handle it differently.

And don’t overlook this instruction:

The algorithm stops after one cycle completes with no swaps.

Comparing your code to the example app for the same array:

image
image461×631 40.2 KB

image
image252×562 10.3 KB

Happy coding

3

I fixed what I thought was in the right direction, but now step 18 and 19 are failing. Any advice on why it’s failing? Thank you for your help.

function generateElement(){
  const min = 1;
  const max = 100;
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

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

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

const fillArrContainer = (htmlElement, arr) => {
  for(let i = 0; i < arr.length; i++){
    const span = document.createElement("span");
    span.textContent = arr[i];
    htmlElement.append(span);
  }
};

const isOrdered = (num1, num2) => {
  if(num1 <= num2){
    return true;
  }
  return false;
};

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

const highlightCurrentEls = (htmlElement, index) => {
  htmlElement.children[index].style.border = "2px dashed red";
  if(htmlElement.children[index + 1] !== undefined){
    htmlElement.children[index + 1].style.border = "2px dashed red"
  }
};

const generateBtn = document.getElementById("generate-btn");
const startingArr = document.getElementById("starting-array");
const arrContainer = document.getElementById("array-container");
let createdArr;

generateBtn.addEventListener("click", () => {
  createdArr = generateArray();

  const removeEl = arrContainer.querySelectorAll(":not(#starting-array)");
  removeEl.forEach((el) => el.remove());

  if(startingArr.children.length){
    startingArr.innerHTML = "";
  }
  
  fillArrContainer(startingArr, createdArr);
})

const sortingAlgorithm = (arr) => {
  for(let i = 0; i < arr.length; i++){
    for(let j = 0; j < arr.length - 1; j++){
      if(i === 0 && j === 0){
        swapElements(arr, j);
      }
      else{
        const genContainer = generateContainer();
        fillArrContainer(genContainer, arr);
        highlightCurrentEls(genContainer, j);
        arrContainer.append(genContainer);
        swapElements(arr, j);
      }
    }
  }
}

const sortBtn = document.getElementById("sort-btn");

sortBtn.addEventListener("click", () => {
  highlightCurrentEls(startingArr, 0);
  sortingAlgorithm(createdArr);

  const genContainer = generateContainer();
  fillArrContainer(genContainer, createdArr);
  arrContainer.append(genContainer);
})
4

Please read this again.

5

I got it working. Thank you so much for your help.

6

i got the same problem here,if you have finished the lab and have the code would you please send it here i will review it with mine and figure out wheres i am lacking

7

Hi @loki310806,

It’s against forum rules to post solutions. Please don’t ask someone to do that for you.

If you’d like some help, please create a topic using the “Help” button in the challenge.

We will do our best to guide you.

Happy coding

8

My bad! i made the help request and figured it out with your help thank you