# Build a Sorting Visualizer - Build a Sorting Visualizer

**URL:** <https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [February 18, 2026, 12:48pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198 "2026-02-18T12:48:20Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![LrdCaptainHelmer](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lrdcaptainhelmer/32/409268_2.png) [@LrdCaptainHelmer](https://forum.freecodecamp.org/u/LrdCaptainHelmer)\
**Post date:** [February 18, 2026, 12:48pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/1 "2026-02-18T12:48:20Z")

</div>

### Tell us what’s happening:

I don’t know how to pass 18. I’m don’t know what to do.  
Thanks in advance.

### Your code so far

```html
<!-- file: index.html -->

```

```css
/* file: styles.css */

```

```js
/* file: script.js */
const generateBtn = document.getElementById("generate-btn");
const startingArr = document.getElementById("starting-array");
const arrContainer = document.getElementById("array-container");
const sortBtn = document.getElementById("sort-btn");

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

function generateArray() {
  const array = [];

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

  return array;
}

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

function fillArrContainer(element, arrayOfInts) {
  element.innerHTML = "";
  return arrayOfInts.forEach(ints => {
    element.innerHTML += `<span>${ints}</span>`
  });
}

function isOrdered(integer1, integer2) {
  return integer1 <= integer2 ? true : false;
}

function swapElements(arrayOfInts, numIndex) {
  if (!isOrdered(arrayOfInts[numIndex], arrayOfInts[numIndex + 1])) {
    [arrayOfInts[numIndex], arrayOfInts[numIndex + 1]] = [arrayOfInts[numIndex + 1], arrayOfInts[numIndex]];
    return true;
  }

  return false;
}

function highlightCurrentEls(elements, index) {
  const childElements = elements.children;
  if (index < childElements.length - 1) {
    childElements[index].style.border = "3px dashed red";
    childElements[index + 1].style.border = "3px dashed red"
  }
}
//-----------------------------------------------------------------------------------------------------------------//

// Event Listeners
generateBtn.addEventListener("click", () => {
  [...arrContainer.children].forEach(children => {
    if (children !== startingArr) children.remove()
  })

  fillArrContainer(startingArr, generateArray());
});

sortBtn.addEventListener("click", () => {
  const startingChildren = [...startingArr.children];
  const realStartArr = startingChildren.map(start => parseInt(start.textContent));

  const indexLength = realStartArr.length;
  highlightCurrentEls(startingArr, 0);

  if (!startingChildren.length) {
    return;
  }

  for (let i = 0; i < indexLength - 1; i++) {
    let swapped = false;

    for (let j = 0; j < indexLength - i - 1; j++) {
      if (swapElements(realStartArr, j)) {
        swapped = true;
      };

      const div = generateContainer();
      fillArrContainer(div, realStartArr);

      if (j < indexLength - 2) {
        highlightCurrentEls(div, j + 1);
      }
      else if (i < indexLength - 1) {
        highlightCurrentEls(div, 0)
      }

      arrContainer.appendChild(div);
    }

    if (!swapped) {
      break;
    }
  }

  // const endDiv = generateContainer();
  // fillArrContainer(endDiv, realStartArr);
  // arrContainer.appendChild(endDiv);
  // arrContainer.children[arrContainer.children.length - 1].style.border = "3px solid green";
}
);

```

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

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/javascript-v9/lab-sorting-visualizer/build-a-sorting-visualizer)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![dhess](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dhess/32/406235_2.png) [@dhess](https://forum.freecodecamp.org/u/dhess)\
**Post date:** [February 18, 2026, 1:08pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/2 "2026-02-18T13:08:05Z")

</div>

Take a look at the example app. Generate and sort an array in the example app. Take a screenshot of that, then use the same array in your code (temporarily hard coded), so you can compare the differences.

---

<div class="post-metadata">

**Author:** ![LrdCaptainHelmer](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lrdcaptainhelmer/32/409268_2.png) [@LrdCaptainHelmer](https://forum.freecodecamp.org/u/LrdCaptainHelmer)\
**Post date:** [February 18, 2026, 1:31pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/3 "2026-02-18T13:31:35Z")

</div>

What I noticed was that in the example project, even if the array is ordered, it loops through the array anyways. In my project it stops the loop.

---

<div class="post-metadata">

**Author:** ![dhess](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dhess/32/406235_2.png) [@dhess](https://forum.freecodecamp.org/u/dhess)\
**Post date:** [February 18, 2026, 1:33pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/4 "2026-02-18T13:33:09Z")

</div>

> The algorithm stops after one cycle completes with no swaps.

The example app meets the above requirement.

---

<div class="post-metadata">

**Author:** ![LrdCaptainHelmer](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lrdcaptainhelmer/32/409268_2.png) [@LrdCaptainHelmer](https://forum.freecodecamp.org/u/LrdCaptainHelmer)\
**Post date:** [February 18, 2026, 2:13pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/5 "2026-02-18T14:13:44Z")

</div>

But what is making my program stop the loop?

---

<div class="post-metadata">

**Author:** ![LrdCaptainHelmer](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lrdcaptainhelmer/32/409268_2.png) [@LrdCaptainHelmer](https://forum.freecodecamp.org/u/LrdCaptainHelmer)\
**Post date:** [February 18, 2026, 2:15pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/6 "2026-02-18T14:15:47Z")

</div>

And now I’ve encountered another problem. I just uncommented some lines and 19 now became invalid as well. Even if I comment the line again, 19 is not valid

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 18, 2026, 2:17pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/7 "2026-02-18T14:17:26Z")

</div>

did you write the bubble sort yourself?

---

<div class="post-metadata">

**Author:** ![LrdCaptainHelmer](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lrdcaptainhelmer/32/409268_2.png) [@LrdCaptainHelmer](https://forum.freecodecamp.org/u/LrdCaptainHelmer)\
**Post date:** [February 18, 2026, 2:18pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/8 "2026-02-18T14:18:47Z")

</div>

I used W3Schools code and some of the code here in the forum because I didn’t know how do to it by myself.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 18, 2026, 2:21pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/9 "2026-02-18T14:21:24Z")

</div>

take the time to figure out what the bubble sort do then, it will make it easier to understand how to update things

---

<div class="post-metadata">

**Author:** ![LrdCaptainHelmer](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lrdcaptainhelmer/32/409268_2.png) [@LrdCaptainHelmer](https://forum.freecodecamp.org/u/LrdCaptainHelmer)\
**Post date:** [February 18, 2026, 2:25pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/10 "2026-02-18T14:25:20Z")

</div>

But what I noticed in my code is that the third iteration doesn’t start from the first element but from the second one.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 18, 2026, 2:26pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/11 "2026-02-18T14:26:40Z")

</div>

yeah, that’s something you need to fix

---

<div class="post-metadata">

**Author:** ![dhess](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dhess/32/406235_2.png) [@dhess](https://forum.freecodecamp.org/u/dhess)\
**Post date:** [February 18, 2026, 5:20pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/12 "2026-02-18T17:20:15Z")

</div>

Please log your loop variables. Do those make sense? Also, the starting array should be included as the first div in your sort; you just need to handle it differently.

---

<div class="post-metadata">

**Author:** ![LrdCaptainHelmer](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lrdcaptainhelmer/32/409268_2.png) [@LrdCaptainHelmer](https://forum.freecodecamp.org/u/LrdCaptainHelmer)\
**Post date:** [February 19, 2026, 2:20pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/13 "2026-02-19T14:20:09Z")

</div>

I solved the problem. It was quite different from the original here. But thanks for the help anyways

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [March 19, 2026, 2:21pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779198/14 "2026-03-19T14:21:07Z")

</div>

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