Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

Hi everyone. I’ve been stuck on this test for a while now. It seems to be working, but I can’t pass. I’m really confused and would like some help:
19. After you click #sort-btn, each div within #array-container should contain five span, each with a number as its text, and arranged to represent the steps required by Bubble Sort algorithm to sort the starting array.
I’ve tried different strategies and I have looked at other posts, but nothing seems to work. Any help is greatly appreciated!!

Here is a link to the Lab: Build a Sorting Visualizer

Your code so far

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


/* file: styles.css */


/* file: script.js */
const arrayContainer = document.getElementById('array-container');
const firstArray = document.getElementById('starting-array');
const generateArrBtn = document.getElementById('generate-btn');
const sortArrBtn = document.getElementById('sort-btn');

//

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

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

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

function fillArrContainer(container, arr) {
  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])) {
    [arr[index], arr[index + 1]] = [arr[index + 1], arr[index]];
  }
}

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

//

let currArr = [];

generateArrBtn.addEventListener("click", () => {
  arrayContainer.innerHTML = "";
  arrayContainer.appendChild(firstArray)
  firstArray.innerHTML = "";
  currArr = generateArray();
  fillArrContainer(firstArray, currArr);
})

sortArrBtn.addEventListener("click", () => {
  highlightCurrentEls(firstArray, 0);
  
  for (let i = 0; i < currArr.length; i++) {
    let swapped = false;
    for (let j = 0; j < currArr.length - 1; j++) {
      if(i == 0 && j == 0) {continue};

        const newContainer = generateContainer();
        fillArrContainer(newContainer, [...currArr]);
        highlightCurrentEls(newContainer, j);
        arrayContainer.appendChild(newContainer);
      
      if (currArr[j] > currArr[j + 1]) {
        swapElements(currArr, j);
        swapped = true;
      }
    }
    if (swapped === false) {
      break;
    }
  }
  const lastContainer = generateContainer();
  fillArrContainer(lastContainer, currArr);
  lastContainer.style.border = "4px solid green";
  arrayContainer.appendChild(lastContainer);
})

Your browser information:

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

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer
https://www.freecodecamp.org/learn/full-stack-developer/lab-sorting-visualizer/build-a-sorting-visualizer

2

Use the example app to complete a sort and take a screenshot of the completed sort.

Hardcode the same array into your app for testing and take a screenshot of the completed sort.

They should be exactly the same.

3

Thanks so much for responding! I compared the two screenshots and figured out the issue. I fixed my code and now it works. Thanks so much!!!

1 Like