Tell us what’s happening:
Only test 18 and 19 are failing now while the sorting seems to be working just fine as of now. Can anyone take a look at the code and help me out here?
Your code so far
<!-- file: index.html -->
/* file: styles.css */
const generateArrayBtn=document.getElementById("generate-btn");
const sortArrayBtn=document.getElementById("sort-btn");
const startingArray=document.getElementById("starting-array");
const arrayContainer=document.getElementById("array-container");
const generateElement=()=>{
return Math.floor(Math.random()*100+1)
}
const generateArray=()=>{
const arr=[];
for(let i=0;i<5;i++){
arr.push(generateElement())
}
return arr;
}
//console.log(generateArray())
const generateContainer=()=>{
return document.createElement('div');
}
const fillArrContainer=(container, arr)=>{
container.innerHTML = '';
arr.forEach(num => {
const span = document.createElement('span');
span.textContent = num;
container.appendChild(span);
});
}
const 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(parentElement, index) {
const children = parentElement.children;
if (index < children.length - 1) {
children[index].style.border = "2px dashed red";
children[index + 1].style.border = "2px dashed red";
}
}
generateArrayBtn.addEventListener("click", () => {
const arr = generateArray();
// Only run this cleanup logic if starting-array already has spans OR array-container has more than one child
if (startingArray.children.length > 0 || arrayContainer.children.length > 1) {
Array.from(arrayContainer.children).forEach(child => {
if (child !== startingArray) child.remove(); // preserve startingArray
});
startingArray.innerHTML = ""; // clear old spans from startingArray
}
// Add new spans to startingArray
arr.forEach((num) => {
const span = document.createElement('span');
span.textContent = num;
startingArray.appendChild(span);
});
});
sortArrayBtn.addEventListener("click", () => {
const spans = [...startingArray.children];
if (!spans.length) return;
// Get numbers from spans
let workingArray = spans.map(span => parseInt(span.textContent));
// Clear previous steps (but keep startingArray)
Array.from(arrayContainer.children).forEach(child => {
if (child !== startingArray) child.remove();
});
const steps = [workingArray.slice()]; // start with initial array
highlightCurrentEls(startingArray, 0);//higlight current element
// Perform bubble sort and track steps only when a swap happens
for (let i = 0; i < workingArray.length - 1; i++) {
for (let j = 0; j < workingArray.length - 1 - i; j++) {
if (!isOrdered(workingArray[j], workingArray[j + 1])) {
swapElements(workingArray, j);
steps.push(workingArray.slice()); // save only after swap
}
}
}
// Render each step into its own div
steps.forEach(step => {
const stepDiv = generateContainer();
fillArrContainer(stepDiv, step);
arrayContainer.appendChild(stepDiv);
});
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36
Challenge Information:
Build a Sorting Visualizer - Build a Sorting Visualizer
Use the sample project and take a screenshot of the results.
Pass the same array to your arr variable or hardcode it into your program another way.
Make sure the result is exactly the same as the example.
The algorithm stops after one cycle completes with no swaps.
Your algorithm is really not working the same way. Look at how the example program works again. Also your red highlights are missing.
Here is my updated code: and only test 18 is failing now:
const generateArrayBtn = document.getElementById("generate-btn");
const sortArrayBtn = document.getElementById("sort-btn");
const startingArray = document.getElementById("starting-array");
const arrayContainer = document.getElementById("array-container");
const generateElement = () => {
return Math.floor(Math.random() * 100 + 1);
};
const generateArray = () => {
const arr = [];
for (let i = 0; i < 5; i++) {
arr.push(generateElement());
}
return arr;
};
const generateContainer = () => {
return document.createElement('div');
};
const fillArrContainer = (container, arr) => {
container.innerHTML = '';
arr.forEach(num => {
const span = document.createElement('span');
span.textContent = num;
container.appendChild(span);
});
};
const 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(parentElement, index) {
const children = parentElement.children;
if (index < children.length - 1) {
children[index].style.border = "2px dashed red";
children[index + 1].style.border = "2px dashed red";
}
}
generateArrayBtn.addEventListener("click", () => {
const arr = generateArray();
if (startingArray.children.length > 0 || arrayContainer.children.length > 1) {
Array.from(arrayContainer.children).forEach(child => {
if (child !== startingArray) child.remove();
});
startingArray.innerHTML = "";
}
arr.forEach((num) => {
const span = document.createElement('span');
span.textContent = num;
startingArray.appendChild(span);
});
// ✅ Highlight first two elements in #starting-array
highlightCurrentEls(startingArray, 0);
});
sortArrayBtn.addEventListener("click", () => {
const spans = [...startingArray.children];
if (!spans.length) return;
let workingArray = spans.map(span => parseInt(span.textContent));
Array.from(arrayContainer.children).forEach(child => {
if (child !== startingArray) child.remove();
});
// Bubble sort with full step tracking
for (let i = 0; i < workingArray.length - 1; i++) {
for (let j = 0; j < workingArray.length - 1 - i; j++) {
const stepDiv = generateContainer();
// Swap if needed
if (!isOrdered(workingArray[j], workingArray[j + 1])) {
swapElements(workingArray, j);
}
fillArrContainer(stepDiv, workingArray.slice());
arrayContainer.appendChild(stepDiv);
highlightCurrentEls(stepDiv, j);
}
}
// ✅ Final step: sorted array view with green border
const finalDiv = generateContainer();
fillArrContainer(finalDiv, workingArray.slice());
finalDiv.style.border = "2px solid green";
arrayContainer.appendChild(finalDiv);
});
Ok and what have you done to troubleshoot it? You need to gather some information and compare it to what the task is asking.
How can you show or prove that your program is working as it says?
Does it perform identical to the example program given the same array?
Don’t give up!
I compared a same starting array with the example project and got that right but now i am getting failed at step 19. I am appending 5 span children to the divs generated
for each comparing step but its not passing. I dont what changed
const generateArrayBtn = document.getElementById("generate-btn");
const sortArrayBtn = document.getElementById("sort-btn");
const startingArray = document.getElementById("starting-array");
const arrayContainer = document.getElementById("array-container");
const generateElement = () => {
return Math.floor(Math.random() * 100 + 1);
};
const generateArray = () => {
const arr = [];
for (let i = 0; i < 5; i++) {
arr.push(generateElement());
}
return arr;
};
const generateContainer = () => {
return document.createElement('div');
};
const fillArrContainer = (container, arr) => {
container.innerHTML = '';
arr.forEach(num => {
const span = document.createElement('span');
span.textContent = num;
container.appendChild(span);
});
// Debug check:
console.log('Step div added with', container.children.length, 'spans:', arr);
};
const 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(parentElement, index) {
const children = parentElement.children;
if (index < children.length - 1) {
children[index].style.border = "2px dashed red";
children[index + 1].style.border = "2px dashed red";
}
}
// Generate Array Button
generateArrayBtn.addEventListener("click", () => {
const arr = generateArray()
if (startingArray.children.length > 0 || arrayContainer.children.length > 1) {
Array.from(arrayContainer.children).forEach(child => {
if (child !== startingArray) child.remove();
});
startingArray.innerHTML = "";
}
arr.forEach((num) => {
const span = document.createElement('span');
span.textContent = num;
startingArray.appendChild(span);
});
highlightCurrentEls(startingArray, 0);
});
// ---- Sort Button ----
sortArrayBtn.addEventListener("click", () => {
const spans = [...startingArray.children];
if (!spans.length) return;
let workingArray = spans.map(span => parseInt(span.textContent));
Array.from(arrayContainer.children).forEach(child => {
if (child !== startingArray) child.remove();
});
// Initial step div (before sorting)
const initialDiv = generateContainer();
fillArrContainer(initialDiv, workingArray.slice());
highlightCurrentEls(initialDiv, 0); // initial highlight
arrayContainer.appendChild(initialDiv);
// Bubble Sort with steps
for (let i = 0; i < workingArray.length - 1; i++) {
for (let j = 0; j < workingArray.length - 1 - i; j++) {
if (!isOrdered(workingArray[j], workingArray[j + 1])) {
swapElements(workingArray, j);
}
const stepDiv = generateContainer();
fillArrContainer(stepDiv, workingArray.slice());
highlightCurrentEls(stepDiv, j);
arrayContainer.appendChild(stepDiv);
//console.log(stepDiv.children)
}
}
// ✅ Final step div: sorted array with green border
const finalDiv = generateContainer();
fillArrContainer(finalDiv, workingArray.slice());
finalDiv.style.border = "4px solid green";
arrayContainer.appendChild(finalDiv);
});
Your output and the example output are not the same. These need to be exactly the same, then you will know the algorithm is the same. Can you see the differences?
Your program:
The example:
i understand that my algo is visualizing more steps than required? Also is it about the extra button? that cant be changed because the html was already defined.
It’s not about visualization, it is about the algorithm, ie. The actual steps the program is taking.
It is also about visualization because you have more divs than the example, so you have more divs than the test is expecting given this array.
You seem to start off comparing the first two numbers, 18 and 20, three times in a row? Read the instructions carefully:
When the last element of the sequence is reached, it starts a new cycle from the beginning of the sequence, and repeats the process until the elements are sorted. The algorithm stops after one cycle completes with no swaps.
Each cycle needs to go from the first to the last number in the row. You need to complete one full cycle comparing all of the numbers without a swap, then it ends.
Given the same array, your output should be identical.
Everything can be changed with code.
