Build a Sorting Visualizer - Build a Sorting Visualizer

[drizzt32]

Tell us what’s happening:

sorting visualizer not passing. Need assistance. Thank you

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 */
let currentArray = []

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

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

function generateContainer() {
  return document.createElement("div")
}

function fillArrContainer(container, arr) {
  container.innerHTML = "" // Clear existing content
  arr.forEach((num) => {
    const span = document.createElement("span")
    span.textContent = num
    container.appendChild(span)
  })
}

function isOrdered(a, b) {
  return a <= b
}

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

function highlightCurrentEls(container, index) {
  const children = container.children
  if (index < children.length) {
    children[index].style.border = "2px dashed red"
  }
  if (index + 1 < children.length) {
    children[index + 1].style.border = "2px dashed red"
  }
}

document.getElementById("generate-btn").addEventListener("click", () => {
  const arrayContainer = document.getElementById("array-container")
  arrayContainer.innerHTML = ""

  const startingArrayDiv = document.createElement("div")
  startingArrayDiv.id = "starting-array"
  arrayContainer.appendChild(startingArrayDiv)

  currentArray = generateArray()
  fillArrContainer(startingArrayDiv, currentArray)
})

document.getElementById("sort-btn").addEventListener("click", () => {
  if (currentArray.length === 0) return
  const arrayContainer = document.getElementById("array-container")

  const startingArrayDiv = document.getElementById("starting-array")
  fillArrContainer(startingArrayDiv, currentArray)
  highlightCurrentEls(startingArrayDiv, 0)

  const arr = currentArray.slice()
  const n = arr.length
  let comparisonCount = 0

  for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
      comparisonCount++
      if (comparisonCount === 1) {
        if (!isOrdered(arr[j], arr[j + 1])) {
          swapElements(arr, j)
        }
      } else {
        const stepContainer = generateContainer()
        fillArrContainer(stepContainer, arr)
        highlightCurrentEls(stepContainer, j)
        arrayContainer.appendChild(stepContainer)
        if (!isOrdered(arr[j], arr[j + 1])) {
          swapElements(arr, j)
        }
      }
    }
  }

  const finalContainer = generateContainer()
  fillArrContainer(finalContainer, arr)
  arrayContainer.appendChild(finalContainer)
  highlightCurrentEls(finalContainer, n - 2)
})

Your browser information:

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

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

freeCodeCamp.org

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-sorting-visualizer/6716249b5405164036fd0b0d.md at main · freeCodeCamp/freeCodeCamp · GitHub

[dhess]

Welcome back @drizzt32,

Try comparing what your code generates to what the example app generates by commenting out the call to generateArray() and temporarily replacing it with a hard coded array for testing. Here’s an example:

Example app —

Your code —

Log your loop variables. Is your inner loop looking at each pair of numbers in the array during each iteration of the outer loop? Is your outer loop iterating over the length of the array at a maximum?

And don’t overlook this instruction:

The algorithm stops after one cycle completes with no swaps.

Hope that helps.