Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

Please help me with step 18 of the “Build a Sorting Visualizer” lab. My output looks to be correct, but apparently the number of divs I’m creating does not match the number of steps needed for the bubble sort. Yet, I am unable to pinpoint where this problem is.

Please help point me in the right direction.

Your code so far

<!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>


* {
    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;
  }
}


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

const generateElement = () => {
  const min = Math.ceil(1);
  const max = Math.floor(101)
  return Math.floor(Math.random() * (max - min) + min)
};

const generateArray = () => {
  const arr = [];
  while (arr.length < 5) {
    arr.push(generateElement());
  }
  return arr;
};

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

const fillArrContainer = (el, arr) => {
  arr.forEach((num) => el.innerHTML += `<span>${num}</span>`)
};

const isOrdered = (x, y) => {
  return x <= y;
};

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

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

const getLastChild = () => {
  return arrayContainer.lastElementChild
};

const getLastArray = () => {
  const els = Array.from(getLastChild().children);
  const numsArr = els.map((num) => {
    return Number(num.innerHTML);
  });
  return numsArr;
};

const bubbleSort = () => {
  let swapped = true;
  while (swapped) {
    const sameArr = getLastArray();
    const firstArr = getLastArray();
    for (let i = 0; i < firstArr.length  - 1; i++) {
      highlightCurrentEls(getLastChild(), i);
      swapElements(firstArr, i);
      arrayContainer.appendChild    (generateContainer());
      fillArrContainer(getLastChild(), firstArr);
    };
    swapped = sameArr.every((num, i) => num === firstArr[i]) ? false : true;
  };  
}

generateBtn.addEventListener("click", () => {
  if (arrayContainer.children.length !== 1) {
    arrayContainer.innerHTML = '<div id="starting-array"></div>';
  }
  fillArrContainer(document.getElementById("starting-array"), generateArray());
});

sortBtn.addEventListener("click", () => {
  bubbleSort();
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

2

I’m not entirely sure what’s going on, but from time to time, there’s one, when array will not get sorted.

image
image213×237 3.72 KB

This happens occasionally, after few times of pressing Generate Array and then Sort Array. What’s even stranger is that problem doesn’t seem to be with the initial array itself - the same array can be sorted one time, but another it will not.

3

I had always tested from the start and hadn’t had this issue, but now I have replicated this bug as well. Yet, knowing this only raises more questions for me, as I’m unsure what would cause it to function many times but randomly not. Any suggestions?

4

To be honest, not much. It’s like sometimes fillArrContainer and highlightCurrentEls are getting undefined as first argument, almost like arrayContainer stops referencing the #array-container.

5

I found a solution that allows me to pass the tests, but the bug still persists. I added a line clearing the innerHTML of the element fillArrContainer was filling before it fills the element. I think somewhere along the line the last element of the arrayContainer was experiencing issues, the most common being a “potential infinite loop” dected on the line with my getLastChild function. I’ll be honest I just blindly started trying different things in the functions that would effect that last child, and this passed the test. Unsatisfying conclusion though it is…I guess this is solved because the tests all pass.