Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

I cannot get test 19 to pass. Whenever I get it passing, test 18 fails. I don’t understand how to get every test passing.

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

const generateArray = () => {
  const arr = [];

  for (let i = 0; i < 5; i++) {
    arr.push(generateElement());
  }

  return arr;
};

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

const fillArrContainer = (html, arr) => {
  for (const num of arr) {
    const span = document.createElement('span');
    span.textContent = num;
    html.appendChild(span);
  }
};

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

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

const highlightCurrentEls = (element, index) => {
  const children = element.children;
  children[index].style.border = '2px dashed red';
  children[index + 1].style.border = '2px dashed red';
};

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

generateBtn.addEventListener('click', () => {
  Array.from(arrayContainer.children).forEach(child => {
    if (child.id !== 'starting-array') child.remove();
  });

  startingArr.innerHTML = '';
  fillArrContainer(startingArr, generateArray());
});

sortBtn.addEventListener('click', () => {
  const arr = Array.from(startingArr.children).map(span => parseInt(span.textContent));
  highlightCurrentEls(startingArr, 0);

  const initialDiv = generateContainer();
  fillArrContainer(initialDiv, arr);
  arrayContainer.append(initialDiv);

  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - i - 1; j++) {
      const stepDiv = generateContainer();
      fillArrContainer(stepDiv, arr);
      highlightCurrentEls(stepDiv, j);
      arrayContainer.append(stepDiv);

      swapElements(arr, j);
    }
  }

  const finalDiv = generateContainer();
  fillArrContainer(finalDiv, arr);
  arrayContainer.append(finalDiv);
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

2

Could you link to the challenge in question?

3

Yes! Sorry.

4

This is a certification project, so we can’t provide much help. What have you tried so far to debug your code?

5

From the challenge description:

The algorithm stops after one cycle completes with no swaps.

If you compare the example project output with yours, can you see the difference?

(For testing purposes, you could try hardcoding the same initial sequence as the example project, for easier comparison).