# Build a Sorting Visualizer - Build a Sorting Visualizer

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

<div class="post-metadata">

**Author:** ![Likedat1981](https://avatars.discourse-cdn.com/v4/letter/l/67e7ee/32.png) [@Likedat1981](https://forum.freecodecamp.org/u/Likedat1981)\
**Post date:** [February 18, 2026, 9:46pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/1 "2026-02-18T21:46:18Z")

</div>

### Tell us what’s happening:

My sorting visualizer code has problem on 15, 18, and 19. I need help, please. 15. Your highlightCurrentEls function should give the descendants of the specified element, located at the given index and the next index, a border that is dashed, red, and set to a width of your choice.  
18. After you click #sort-btn, #array-container should contain as many div elements as the steps required by the Bubble Sort algorithm to sort the starting array, including the div representing the starting

### Your code so far

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

```

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

```

```js
/* file: script.js */

```

### Your browser information:

User Agent is: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.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:** ![Likedat1981](https://avatars.discourse-cdn.com/v4/letter/l/67e7ee/32.png) [@Likedat1981](https://forum.freecodecamp.org/u/Likedat1981)\
**Post date:** [February 18, 2026, 9:48pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/2 "2026-02-18T21:48:51Z")

</div>

```auto
const generateBtn = document.getElementById("generate-btn");

const sortBtn = document.getElementById("sort-btn");

const arrayContainer = document.getElementById("array-container");

const startingArrayEl = document.getElementById("starting-array");

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(element, arr) {

  element.innerHTML = "";

  arr.forEach(num => {

    const span = document.createElement("span");

    span.textContent = num;

    element.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(element, index) {

  const children = element.children;

  if (children\[index\] && children\[index + 1\]) {

    children\[index\].style.borderStyle = "dashed";

    children\[index\].style.borderColor = "red";

    children\[index\].style.borderWidth = "3px";

    children\[index + 1\].style.borderStyle = "dashed";

    children\[index + 1\].style.borderColor = "red";

    children\[index + 1\].style.borderWidth = "3px";

  }

}

generateBtn.addEventListener("click", () => {

  currentArray = generateArray();

  

  arrayContainer.innerHTML = "";

  arrayContainer.appendChild(startingArrayEl);

  

  fillArrContainer(startingArrayEl, currentArray);

  highlightCurrentEls(startingArrayEl, 0);

});

sortBtn.addEventListener("click", () => {

  if (currentArray.length === 0) return;

  const arr = \[...currentArray\];

  const n = arr.length;

  

  arrayContainer.innerHTML = "";

  arrayContainer.appendChild(startingArrayEl);

  fillArrContainer(startingArrayEl, arr);

  highlightCurrentEls(startingArrayEl, 0);

  

  for (let pass = 0; pass < n - 1; pass++) {

    for (let i = 0; i < n - 1 - pass; i++) {

      

      const compareDiv = generateContainer();

      fillArrContainer(compareDiv, arr);

      highlightCurrentEls(compareDiv, i);

      arrayContainer.appendChild(compareDiv);

      

      if (!isOrdered(arr\[i\], arr\[i + 1\])) {

        swapElements(arr, i);

        const swapDiv = generateContainer();

        fillArrContainer(swapDiv, arr);

        arrayContainer.appendChild(swapDiv);

      }

    }

  }

});

```

---

<div class="post-metadata">

**Author:** ![pkdvalis](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pkdvalis/32/350571_2.png) [@pkdvalis](https://forum.freecodecamp.org/u/pkdvalis)\
**Post date:** [February 18, 2026, 9:49pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/3 "2026-02-18T21:49:32Z")

</div>

Can you take a screenshot of your program after it has sorted an array?

---

<div class="post-metadata">

**Author:** ![pkdvalis](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pkdvalis/32/350571_2.png) [@pkdvalis](https://forum.freecodecamp.org/u/pkdvalis)\
**Post date:** [February 18, 2026, 9:50pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/4 "2026-02-18T21:50:24Z")

</div>

Please share your code again but use these instructions to format it

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (`</>`) to add the backticks.

 ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (').

---

<div class="post-metadata">

**Author:** ![Likedat1981](https://avatars.discourse-cdn.com/v4/letter/l/67e7ee/32.png) [@Likedat1981](https://forum.freecodecamp.org/u/Likedat1981)\
**Post date:** [February 19, 2026, 1:22pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/5 "2026-02-19T13:22:45Z")

</div>

```auto
Please, I have not been able to figure out what the problems on 15, 18 and 19 are. I need help. Thank you. Sorting Visualization.

```

---

<div class="post-metadata">

**Author:** ![Likedat1981](https://avatars.discourse-cdn.com/v4/letter/l/67e7ee/32.png) [@Likedat1981](https://forum.freecodecamp.org/u/Likedat1981)\
**Post date:** [February 19, 2026, 1:37pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/6 "2026-02-19T13:37:44Z")

</div>

```auto
Please, still on line 15, 18 and 19; i can't move forward. I need help please. I have added what is on my console after click on 'generate array.'

```

 ![IMG_20260219_142549_112](https://global.discourse-cdn.com/freecodecamp/original/4X/2/4/2/242be579ca9dfe04bec6996b8fd53f78bf1b8033.jpeg)

 ![IMG_20260219_142515_346](https://global.discourse-cdn.com/freecodecamp/original/4X/0/0/9/009b17d920126a5930df3cf4271fd858d4ef19bb.jpeg)

---

<div class="post-metadata">

**Author:** ![pkdvalis](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pkdvalis/32/350571_2.png) [@pkdvalis](https://forum.freecodecamp.org/u/pkdvalis)\
**Post date:** [February 19, 2026, 2:29pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/7 "2026-02-19T14:29:30Z")

</div>

Try looking at how the example sorter works. Your highlighting, comparisons and switches should work the same way.

Your highlighting/comparison skips a line?

---

<div class="post-metadata">

**Author:** ![Likedat1981](https://avatars.discourse-cdn.com/v4/letter/l/67e7ee/32.png) [@Likedat1981](https://forum.freecodecamp.org/u/Likedat1981)\
**Post date:** [February 22, 2026, 5:17pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/8 "2026-02-22T17:17:46Z")

</div>

```auto
// ================= REQUIRED FUNCTIONS =================

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(element, array) {
  element.innerHTML = "";
  array.forEach((num) => {
    const span = document.createElement("span");
    span.textContent = num;
    element.appendChild(span);
  });
}

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

function swapElements(arr, index) {
  if (arr[index] > arr[index + 1]) {
    [arr[index], arr[index + 1]] = [arr[index + 1], arr[index]];
  }
}

function highlightCurrentEls(element, index) {
  Array.from(element.children).forEach((child) => (child.style.border = "none"));
  if (element.children[index] && element.children[index + 1]) {
    element.children[index].style.border = "2px dashed red";
    element.children[index + 1].style.border = "2px dashed red";
  }
}

// ================= DOM ELEMENTS =================

const generateBtn = document.getElementById("generate-btn");
const sortBtn = document.getElementById("sort-btn");
const arrayContainer = document.getElementById("array-container");
const startingArrayDiv = document.getElementById("starting-array"); // Make sure this exists in HTML

let currentArray = [];

// ================= GENERATE ARRAY =================

generateBtn.addEventListener("click", () => {
  arrayContainer.innerHTML = "";
  currentArray = generateArray();
  fillArrContainer(startingArrayDiv, currentArray);
  arrayContainer.appendChild(startingArrayDiv.cloneNode(true));
});

// ================= SORT ARRAY =================

sortBtn.addEventListener("click", () => {
  if (currentArray.length !== 5) return;

  arrayContainer.innerHTML = "";

  let arr = [...currentArray];

  // STEP 1: Starting row with first two highlighted (index 0)
  fillArrContainer(startingArrayDiv, arr);
  highlightCurrentEls(startingArrayDiv, 0);
  arrayContainer.appendChild(startingArrayDiv);

  let workingArray = [...arr];
  
  // Track all steps
  let steps = [];
  
  // Pass 1: 4 comparisons - highlights at 0,1,2,3
  for (let i = 0; i < 4; i++) {
    steps.push({
      array: [...workingArray],
      highlightIndex: i
    });
    
    if (workingArray[i] > workingArray[i + 1]) {
      let temp = workingArray[i];
      workingArray[i] = workingArray[i + 1];
      workingArray[i + 1] = temp;
    }
  }
  
  // Pass 2: 3 comparisons - highlights at 0,1,2 (reset to 0)
  for (let i = 0; i < 3; i++) {
    steps.push({
      array: [...workingArray],
      highlightIndex: i
    });
    
    if (workingArray[i] > workingArray[i + 1]) {
      let temp = workingArray[i];
      workingArray[i] = workingArray[i + 1];
      workingArray[i + 1] = temp;
    }
  }
  
  // Pass 3: 2 comparisons - highlights at 0,1 (reset to 0)
  for (let i = 0; i < 2; i++) {
    steps.push({
      array: [...workingArray],
      highlightIndex: i
    });
    
    if (workingArray[i] > workingArray[i + 1]) {
      let temp = workingArray[i];
      workingArray[i] = workingArray[i + 1];
      workingArray[i + 1] = temp;
    }
  }
  
  // Pass 4: 1 comparison - highlight at 0
  for (let i = 0; i < 1; i++) {
    steps.push({
      array: [...workingArray],
      highlightIndex: i
    });
    
    if (workingArray[i] > workingArray[i + 1]) {
      let temp = workingArray[i];
      workingArray[i] = workingArray[i + 1];
      workingArray[i + 1] = temp;
    }
  }
  
  // Add all 10 comparison steps to container
  steps.forEach((step) => {
    const stepDiv = generateContainer();
    fillArrContainer(stepDiv, step.array);
    highlightCurrentEls(stepDiv, step.highlightIndex);
    arrayContainer.appendChild(stepDiv);
  });

  // STEP 12: Extra full pass row (one more complete pass with highlights at 0,1,2,3)
  // This shows the array is fully sorted by doing one more pass
  const extraPassDiv1 = generateContainer();
  fillArrContainer(extraPassDiv1, workingArray);
  highlightCurrentEls(extraPassDiv1, 0);
  arrayContainer.appendChild(extraPassDiv1);
  
  const extraPassDiv2 = generateContainer();
  fillArrContainer(extraPassDiv2, workingArray);
  highlightCurrentEls(extraPassDiv2, 1);
  arrayContainer.appendChild(extraPassDiv2);
  
  const extraPassDiv3 = generateContainer();
  fillArrContainer(extraPassDiv3, workingArray);
  highlightCurrentEls(extraPassDiv3, 2);
  arrayContainer.appendChild(extraPassDiv3);
  
  const extraPassDiv4 = generateContainer();
  fillArrContainer(extraPassDiv4, workingArray);
  highlightCurrentEls(extraPassDiv4, 3);
  arrayContainer.appendChild(extraPassDiv4);

  // STEP 13: Final sorted array (green row - no highlight)
  const finalDiv = generateContainer();
  fillArrContainer(finalDiv, workingArray);
  arrayContainer.appendChild(finalDiv);

  console.log("Total steps:", arrayContainer.children.length);
  console.log("Sequence:", Array.from(arrayContainer.children).map(div => 
    Array.from(div.children).map(span => span.textContent).join(' ')
  ));
  
  console.log("Highlights:", Array.from(arrayContainer.children).map((div, index) => {
    const children = div.children;
    for (let i = 0; i < children.length; i++) {
      if (children[i].style.border && children[i].style.border.includes("red")) {
        return i;
      }
    }
    return "none";
  }).join(' '));
});

```

---

<div class="post-metadata">

**Author:** ![pkdvalis](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pkdvalis/32/350571_2.png) [@pkdvalis](https://forum.freecodecamp.org/u/pkdvalis)\
**Post date:** [February 22, 2026, 5:18pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/9 "2026-02-22T17:18:46Z")

</div>

??

Please **Tell us what’s happening** in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

---

<div class="post-metadata">

**Author:** ![Likedat1981](https://avatars.discourse-cdn.com/v4/letter/l/67e7ee/32.png) [@Likedat1981](https://forum.freecodecamp.org/u/Likedat1981)\
**Post date:** [February 22, 2026, 11:47am UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/10 "2026-02-22T11:47:35Z")

</div>

### Tell us what’s happening:

//failed this  
18. After you click #sort-btn, #array-container should contain as many div elements as the steps required by the Bubble Sort algorithm to sort the starting array, including the div representing the starting array and a div representing the sorted array.  
//My output: //Output: Total steps: 12  
First child is startingArrayDiv: true  
Sequence: [ ‘18 10 69 32 22’,  
‘10 18 69 32 22’,  
‘10 18 69 32 22’,  
‘10 18 32 69 22’,  
‘10 18 32 22 69’,  
‘10 18 32 22 69’,  
'10 18

### Your code so far

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

```

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

```

```js
/* file: script.js */

```

### Your browser information:

User Agent is: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.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:** ![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 22, 2026, 12:21pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/11 "2026-02-22T12:21:48Z")

</div>

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (`</>`) to add backticks around text.

 ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (').

---

<div class="post-metadata">

**Author:** ![Likedat1981](https://avatars.discourse-cdn.com/v4/letter/l/67e7ee/32.png) [@Likedat1981](https://forum.freecodecamp.org/u/Likedat1981)\
**Post date:** [February 22, 2026, 12:29pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/12 "2026-02-22T12:29:07Z")

</div>

```auto
// ================= SORT ARRAY =================
sortBtn.addEventListener("click", () => {
  if (currentArray.length !== 5) return;

  
  arrayContainer.innerHTML = "";

  let arr = [...currentArray];
  const n = arr.length;

  
  fillArrContainer(startingArrayDiv, arr);
  highlightCurrentEls(startingArrayDiv, 0);
  arrayContainer.appendChild(startingArrayDiv.cloneNode(true));

  let stepCount = 1; 
  for (let pass = 0; pass < n - 1; pass++) {
    for (let i = 0; i < n - 1; i++) {
      if (stepCount >= 11) break; 
      const stepDiv = generateContainer();
      fillArrContainer(stepDiv, arr);
      highlightCurrentEls(stepDiv, i);
      arrayContainer.appendChild(stepDiv);
      stepCount++;

      // Swap if needed
      if (!isOrdered(arr[i], arr[i + 1])) {
        swapElements(arr, i);
      }
    }
  }

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

  
  console.log("Total steps:", arrayContainer.children.length);
  console.log(
    "Sequence:",
    Array.from(arrayContainer.children).map((div) =>
      Array.from(div.children).map((span) => span.textContent).join(" ")
    )
  );
});

```

---

<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 22, 2026, 12:30pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/13 "2026-02-22T12:30:34Z")

</div>

I am not able to use your code, it errors out with `Uncaught ReferenceError: sortBtn is not defined`

---

<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 22, 2026, 5:19pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/14 "2026-02-22T17:19:34Z")

</div>

I have merged your two topics, please do not create duplicate topics for the same challenge

---

<div class="post-metadata">

**Author:** ![Likedat1981](https://avatars.discourse-cdn.com/v4/letter/l/67e7ee/32.png) [@Likedat1981](https://forum.freecodecamp.org/u/Likedat1981)\
**Post date:** [February 22, 2026, 5:30pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/15 "2026-02-22T17:30:58Z")

</div>

1. 
## **Step Count Discrepancy**

- I don’t know how many steps i am suposed to generate in total, is FCC actually expecting 12 or **13 steps total** :

1. I have **Inconsistent Highlight Patterns: I am thinking that** FCC expects a specific highlight sequence: `0,1,2,3,0,1,2,0,1,0` for the 10 comparison steps; but my implementations kept resetting to the wrong indices or continuing the pattern incorrectly.
2. 
## **Timing of Container Creation vs. Swaps**

  - Iam struggling with whether to show the array state BEFORE or AFTER each comparison

  - The correct approach: Create container and highlight FIRST, THEN perform the swap

---

<div class="post-metadata">

**Author:** ![Likedat1981](https://avatars.discourse-cdn.com/v4/letter/l/67e7ee/32.png) [@Likedat1981](https://forum.freecodecamp.org/u/Likedat1981)\
**Post date:** [February 22, 2026, 5:32pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/16 "2026-02-22T17:32:08Z")

</div>

And sometimes line 18 will pass and failed 19; and 19 will passed and failed 18.

---

<div class="post-metadata">

**Author:** ![Likedat1981](https://avatars.discourse-cdn.com/v4/letter/l/67e7ee/32.png) [@Likedat1981](https://forum.freecodecamp.org/u/Likedat1981)\
**Post date:** [February 22, 2026, 5:40pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/17 "2026-02-22T17:40:58Z")

</div>

```auto

```

```auto
//This my code again//

// ================= REQUIRED FUNCTIONS =================

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(element, array) {
  element.innerHTML = "";
  array.forEach((num) => {
    const span = document.createElement("span");
    span.textContent = num;
    element.appendChild(span);
  });
}

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

function swapElements(arr, index) {
  if (arr[index] > arr[index + 1]) {
    [arr[index], arr[index + 1]] = [arr[index + 1], arr[index]];
  }
}

function highlightCurrentEls(element, index) {
  Array.from(element.children).forEach((child) => (child.style.border = "none"));
  if (element.children[index] && element.children[index + 1]) {
    element.children[index].style.border = "2px dashed red";
    element.children[index + 1].style.border = "2px dashed red";
  }
}

// ================= DOM ELEMENTS =================

const generateBtn = document.getElementById("generate-btn");
const sortBtn = document.getElementById("sort-btn");
const arrayContainer = document.getElementById("array-container");
const startingArrayDiv = document.getElementById("starting-array"); // Make sure this exists in HTML

let currentArray = [];

// ================= GENERATE ARRAY =================

generateBtn.addEventListener("click", () => {
  arrayContainer.innerHTML = "";
  currentArray = generateArray();
  fillArrContainer(startingArrayDiv, currentArray);
  arrayContainer.appendChild(startingArrayDiv.cloneNode(true));
});

// ================= SORT ARRAY =================

sortBtn.addEventListener("click", () => {
  if (currentArray.length !== 5) return;

  arrayContainer.innerHTML = "";

  let arr = [...currentArray];

  // STEP 1: Starting row with first two highlighted (index 0)
  fillArrContainer(startingArrayDiv, arr);
  highlightCurrentEls(startingArrayDiv, 0);
  arrayContainer.appendChild(startingArrayDiv);

  let workingArray = [...arr];
  
  // Track all steps
  let steps = [];
  
  // Pass 1: 4 comparisons - highlights at 0,1,2,3
  for (let i = 0; i < 4; i++) {
    steps.push({
      array: [...workingArray],
      highlightIndex: i
    });
    
    if (workingArray[i] > workingArray[i + 1]) {
      let temp = workingArray[i];
      workingArray[i] = workingArray[i + 1];
      workingArray[i + 1] = temp;
    }
  }
  
  // Pass 2: 3 comparisons - highlights at 0,1,2 (reset to 0)
  for (let i = 0; i < 3; i++) {
    steps.push({
      array: [...workingArray],
      highlightIndex: i
    });
    
    if (workingArray[i] > workingArray[i + 1]) {
      let temp = workingArray[i];
      workingArray[i] = workingArray[i + 1];
      workingArray[i + 1] = temp;
    }
  }
  
  // Pass 3: 2 comparisons - highlights at 0,1 (reset to 0)
  for (let i = 0; i < 2; i++) {
    steps.push({
      array: [...workingArray],
      highlightIndex: i
    });
    
    if (workingArray[i] > workingArray[i + 1]) {
      let temp = workingArray[i];
      workingArray[i] = workingArray[i + 1];
      workingArray[i + 1] = temp;
    }
  }
  
  // Pass 4: 1 comparison - highlight at 0
  for (let i = 0; i < 1; i++) {
    steps.push({
      array: [...workingArray],
      highlightIndex: i
    });
    
    if (workingArray[i] > workingArray[i + 1]) {
      let temp = workingArray[i];
      workingArray[i] = workingArray[i + 1];
      workingArray[i + 1] = temp;
    }
  }
  
  // Add all 10 comparison steps to container
  steps.forEach((step) => {
    const stepDiv = generateContainer();
    fillArrContainer(stepDiv, step.array);
    highlightCurrentEls(stepDiv, step.highlightIndex);
    arrayContainer.appendChild(stepDiv);
  });

  // STEP 12: Extra full pass row (one more complete pass with highlights at 0,1,2,3)
  // This shows the array is fully sorted by doing one more pass
  const extraPassDiv1 = generateContainer();
  fillArrContainer(extraPassDiv1, workingArray);
  highlightCurrentEls(extraPassDiv1, 0);
  arrayContainer.appendChild(extraPassDiv1);
  
  const extraPassDiv2 = generateContainer();
  fillArrContainer(extraPassDiv2, workingArray);
  highlightCurrentEls(extraPassDiv2, 1);
  arrayContainer.appendChild(extraPassDiv2);
  
  const extraPassDiv3 = generateContainer();
  fillArrContainer(extraPassDiv3, workingArray);
  highlightCurrentEls(extraPassDiv3, 2);
  arrayContainer.appendChild(extraPassDiv3);
  
  const extraPassDiv4 = generateContainer();
  fillArrContainer(extraPassDiv4, workingArray);
  highlightCurrentEls(extraPassDiv4, 3);
  arrayContainer.appendChild(extraPassDiv4);

  // STEP 13: Final sorted array (green row - no highlight)
  const finalDiv = generateContainer();
  fillArrContainer(finalDiv, workingArray);
  arrayContainer.appendChild(finalDiv);

  console.log("Total steps:", arrayContainer.children.length);
  console.log("Sequence:", Array.from(arrayContainer.children).map(div => 
    Array.from(div.children).map(span => span.textContent).join(' ')
  ));
  
  console.log("Highlights:", Array.from(arrayContainer.children).map((div, index) => {
    const children = div.children;
    for (let i = 0; i < children.length; i++) {
      if (children[i].style.border && children[i].style.border.includes("red")) {
        return i;
      }
    }
    return "none";
  }).join(' '));
});

```

---

<div class="post-metadata">

**Author:** ![Likedat1981](https://avatars.discourse-cdn.com/v4/letter/l/67e7ee/32.png) [@Likedat1981](https://forum.freecodecamp.org/u/Likedat1981)\
**Post date:** [February 22, 2026, 5:55pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/18 "2026-02-22T17:55:40Z")

</div>

Questions for clarificatio, please:  
“The Bubble Sort Visualizer and have passed all tests except 18 and 19. Using, a sample image from FCC, I’ve confirmed we need 13 total steps (1 initial + 10 comparisons + 1 extra pass + 1 final); but i don’t know if i’m right with the assumption.  
My highlight pattern is 0,1,2,3,0,1,2,0,1,0 for the 10 comparisons, followed by an extra pass with highlight 0, then final with no highlight. But tests still fail. Please, may I know the EXACT expected sequence and highlight pattern for a sample array like [5,3,8,4,2]? Also, should the extra pass show all 4 comparisons or just 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 22, 2026, 5:59pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/19 "2026-02-22T17:59:20Z")

</div>

> [@Likedat1981](#):
>
> My highlight pattern is 0,1,2,3,0,1,2,0,1,0 for the 10 comparisons,

that’s wrong, the highlight pattern should repeat the same for all the passes, see the example app that does 0,1,2,3,0,1,2,3,0,1,2,3

---

<div class="post-metadata">

**Author:** ![Likedat1981](https://avatars.discourse-cdn.com/v4/letter/l/67e7ee/32.png) [@Likedat1981](https://forum.freecodecamp.org/u/Likedat1981)\
**Post date:** [February 22, 2026, 6:10pm UTC](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273/20 "2026-02-22T18:10:34Z")

</div>

**“For the Bubble Sort Visualizer lab, how many total steps (div elements) should be in #array-container after clicking sort-btn?”**

Questions for clarification:

1. **Is it 12 steps?** (Initial + 10 comparisons + Final)

2. **Is it 13 steps?** (Initial + 10 comparisons + Extra pass + Final)

3. **Is it 16 steps?** (Initial + 4+3+2+1+4 comparisons + Final)

4. **Or something else?**

- **What is the exact highlight pattern expected?**

- **Should the extra pass show all 4 comparisons or just one?**

[Next page](https://forum.freecodecamp.org/t/build-a-sorting-visualizer-build-a-sorting-visualizer/779273.md?page=2)