Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

I am trying to code the sortBtn.addEventListener.
I’m trying to tackle this incrementally - first I want to get the generated array into my variable called arr - this seems to work.
Then I want to clear arrayContainer so I can flesh it out in my code.
When I have the line
arrayContainer.innerHTML = "";
and press Check Your Code I get the error message about Step 17
(relating to generateBtn.addEventListener).
When I comment out the line I get the error message about Step 18.
I’m confused - why do I get the error relating to Step 17 when I have the line arrayContainer.innerHTML = “”;

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 */
// return a random integer between 1 and 100 inclusive
const generateElement = () => Math.floor(Math.random() * (100 - 1 + 1) + 1);

// return an array containing five random integers between 1 and 100
const generateArray = () => Array.from({length: 5}, () => generateElement());

// return an empty div element
const generateContainer = () => document.createElement("div");

// take an element as its first parameter and an array of integers as its second parameter,
// then populate the element with five span elements, with each span showing one of the integers from the array
const fillArrContainer = (el, arr) => {
  arr.forEach(i => el.innerHTML += `<span>${i}</span>`);
};

// takes two integers and returns a boolean indicating if the first integer is less than or equal to the second
const isOrdered = (int1, int2) => int1 <= int2;

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

const highlightCurrentEls = (el, idx) => {
  el.children[idx].style.border = "dashed red 2px";
  el.children[idx + 1].style.border = "dashed red 2px";
};

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

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

sortBtn.addEventListener("click", () => {
  console.log("HERE");
  const arr = startingArray.innerHTML
                .replaceAll("<span>", "")
                .replaceAll("</span>", ",")
                .slice(0, -1)
                .split(",")
                .map(Number);
  console.log(arr);
  arrayContainer.innerHTML = "";
});

Your browser information:

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

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

2

Hi @ambradnum

After you generate an array, what happens when you press the “Sort” button?

Happy coding

3

It depends on what is in my sortBtn.addEventListener code:

If I comment out arrayContainer.innerHTML = ""; then I get the error message about Step 18, which makes sense since I haven’t completed the code.

But when I leave arrayContainer.innerHTML = ""; in I get the error message about the generateBtn.addEventListener code.

This doesn’t make sense to me - why do I get the error relating to Step 17 when I have the line arrayContainer.innerHTML = "";- why is that line of code affecting what happens in generateBtn.addEventListener?

4

Hi there,

Please focus on implementing the user stories as asked.

This line of code is wiping out all of the code that was just generated by the generateBtn.addEventListener leaving the sortBtn.addEventListener with nothing left to sort.

Happy coding!

5

Face slap here!! Thank you so much - I’ve just realised that array-container contains starting-array!! I’ll need to rethink my approach. Thanks again

6

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.