Hi, my code works correctly, but it fails FCC tests#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.#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
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
Build a Sorting Visualizer - Build a Sorting Visualizer
We will need to see your code. You can share it in a comment here, or edit your original post.
I encourage you to search the forum as well. This Test has been addressed many, many times on the forum.
Make sure each iteration of your sort goes to the last number in the row, every time.
If you put the same array as the example program through yours, the result should look exactly the same.
1 Like
const arrayContainer = document.getElementById("array-container");
const startingArray = document.getElementById("starting-array");
const generateBtn = document.getElementById("generate-btn");
const sortBtn = document.getElementById("sort-btn");
const generateElement = ()=>{
return Math.floor(Math.random()*100+1)
}
const generateArray = ()=>{
const array = []
for(let i =0;i<5;i++){
array.push(generateElement())
}
return array
}
const generateContainer = ()=>{
const div = document.createElement("div")
return div
}
const fillArrContainer = (element,array)=>{
array.forEach((e)=>{
const spanElement = document.createElement("span")
spanElement.textContent=e
element.appendChild(spanElement)
})
}
const isOrdered = (num1,num2)=>{
return num1<=num2
}
const swapElements = (arr,index)=>{
if(!isOrdered(arr[index],arr[index+1])){
const temp = arr[index];
arr[index] = arr[index+1];
arr[index+1] = temp
}
}
const highlightCurrentEls = (element,index)=>{
element[index].style.border = "1px dashed red";
element[index+1].style.border = "1px dashed red"
}
const bubbleSort= (arr)=>{
highlightCurrentEls(startingArray.children,0)
for(let i =0;i<arr.length;i++){
for(let j=0;j<arr.length-1;j++){
console.log(arr,arr[j],arr[j+1])
swapElements(arr,j)
let container = generateContainer()
arrayContainer.appendChild(container)
container.className="swap"
fillArrContainer(container,arr)
highlightCurrentEls(container.children,j)
}
let swapped=true
for(let k=0;k<arr.length-1;k++) {
if(!isOrdered(arr[k],arr[k+1])){
swapped = false
}
}
if(swapped){
for(let j=0;j<arr.length-1;j++){
// this is for to add one full cycle after swaps
container = generateContainer()
arrayContainer.appendChild(container)
fillArrContainer(container,arr)
highlightCurrentEls(container.children,j)
container.className="swap"
}
arrayContainer.children[1].remove()
let container = generateContainer()
container.className="swap"
arrayContainer.appendChild(container)
fillArrContainer(container,arr)
container.style.border="3px solid green"
return
}
}
}
let generatedArray;
generateBtn.addEventListener("click",()=>{
startingArray.innerHTML="";
const swapped = document.querySelectorAll(".swap")
swapped.forEach(e=>{e.innerHTML="none"
e.remove()})
//console.log(swapped)
generatedArray = generateArray()
fillArrContainer(startingArray,generatedArray)
})
sortBtn.addEventListener("click",()=>{
bubbleSort(generatedArray)
})
here is my code
dhess
December 19, 2025, 2:48pm
4
This was generated by the example app:
And this was generated from your code using the same array:
1 Like
Thanks, it works now.swapElements(arr, j) to the end.
removed
1 Like
Glad you got it! Please don’t post solution code to the forum.
