Build a Sorting Visualizer (I propose this path 😬 )

Programming JavaScript
1

Cuéntanos qué está pasando:

Hello everyone. I’ve been reading the forum. I saw there were other ways to solve this problem, but I propose this path. Although it meets most of the requirements, like many others, I’m getting an error at step 18. I’d like your feedback to see if I’m on the right track or not using good programming practices. Thanks everyone!

Tu código hasta el momento

<!-- 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 startingArray = document.getElementById("starting-array");
const generateBtn = document.getElementById("generate-btn");
const sortBtn = document.getElementById("sort-btn");

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


function generateArray() {
  return Array.from({ length: 5 }, generateElement);
}


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

function fillArrContainer(elem, arr){
  elem.innerHTML = "";
  for(let i = 0; i < 5; i++){
    let newSpan = document.createElement("span");
    newSpan.textContent = `${arr[i]}`;
    elem.appendChild(newSpan);
  }
  return elem;
}

function isOrdered(num1, num2){
  return num1 <= num2;
}

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

function highlightCurrentEls(elem, index){
  let elemChild = [...elem.children];
  elemChild[index].style.border = "1px dashed red";
  elemChild[index + 1].style.border = "1px dashed red";
}

let arr;

generateBtn.addEventListener("click", () => {
  let elemChild = [...arrayContainer.children];
  elemChild.forEach(elem => {
    if(elem != startingArray){
      elem.remove();
    }
  })
  arr = generateArray();
  fillArrContainer(startingArray, arr);
});


function myFunction(j){
  if(j < 4){
    arr = swapElements(arr, j);
    arrayContainer.appendChild(fillArrContainer(generateContainer(), arr));
    highlightCurrentEls(arrayContainer.lastChild, j);
    return myFunction(++j);
  } else if(!(isOrdered(arr[0], arr[1]))){
    return myFunction(0);
  } else if(!(isOrdered(arr[1], arr[2]))){
    return myFunction(0);
  } else if(!(isOrdered(arr[2], arr[3]))){
    return myFunction(0);
  } else if(!(isOrdered(arr[3], arr[4]))){
    return myFunction(0);
  } else {
    return arr;
  }
}

sortBtn.addEventListener("click", () => {
  highlightCurrentEls(startingArray, 0);
  arrayContainer.appendChild(fillArrContainer(generateContainer(), myFunction(0)));
})

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Información del Desafío:

Build a Sorting Visualizer - Build a Sorting Visualizer
https://www.freecodecamp.org/espanol/learn/full-stack-developer/lab-sorting-visualizer/build-a-sorting-visualizer

2

Did you read the posts and see if you are making the same error as the other people who were not passing #18?

Please share a screenshot of your app’s completed sort.

3

I recommend you generate an array using the example project and take a screenshot after it’s sorted. Then hard code (just for testing!) that same array in your generateBtn event listener to replace the call to generateArray(). Then compare the two to see how yours is different.

4

I concur with @dhess as this is how I debugged this project when I was working on it.

Using that hard-coding technique, here’s a crude pic to illustrate how your code output (right) differs from the example project (left):

Untitled
Untitled879×757 77.2 KB

5

Excellent! Your suggestion is very good. I’ll put it into practice. Thank you very much!

6

Thank you all so much! Your responses are very helpful :blush:

7

I did it! Thank you all so much! :clap: :grin: