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.
please help.
Your code so far
<!-- file: index.html -->
function generateElement() {
return Math.floor(Math.random() * 100) + 1;
}
function generateArray() {
return Array.from({ length: 5 }, generateElement);
}
// Updates the container with the given array
function fillArrContainer(container, arr) {
container.innerHTML = "";
arr.forEach(num => {
const span = document.createElement("span");
span.textContent = num;
span.style.margin = "5px";
container.appendChild(span);
});
}
// Checks if two elements are in order
function isOrdered(a, b) {
return a <= b;
}
// Swaps adjacent elements if needed
function swapElements(arr, i) {
if (arr[i] > arr[i + 1]) {
[arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
}
}
// Highlights current elements being compared
function highlightCurrentEls(container, index, borderWidth = "2px") {
for (let k = 0; k < container.children.length; k++) {
container.children[k].style.border = "none";
}
if (index < container.children.length - 1) {
container.children[index].style.border = `${borderWidth} dashed red`;
container.children[index + 1].style.border = `${borderWidth} dashed red`;
}
}
// Generates a div container for sorting steps
function generateContainer() {
const div = document.createElement("div");
div.style.margin = "5px";
return div;
}
const generateBtn = document.getElementById("generate-btn");
const sortBtn = document.getElementById("sort-btn");
const arrayContainer = document.getElementById("array-container");
const startingArray = document.getElementById("starting-array");
generateBtn.addEventListener("click", () => {
// Reset array container, keeping only the starting array
[...arrayContainer.children].forEach(child => {
if (child !== startingArray) {
arrayContainer.removeChild(child);
}
});
// Generate and display a new array
const newNumbers = generateArray();
fillArrContainer(startingArray, newNumbers);
});
sortBtn.addEventListener("click", () => {
const spans = [...startingArray.children];
if (!spans.length) return;
// Copy numbers from the displayed array
let workingArray = spans.map(span => parseInt(span.textContent));
// Reset previous sorting steps
[...arrayContainer.children].forEach(child => {
if (child !== startingArray) {
arrayContainer.removeChild(child);
}
});
// Perform bubble sort with step visualization
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);
}
// Display the current step
const stepDiv = generateContainer();
fillArrContainer(stepDiv, workingArray);
highlightCurrentEls(stepDiv, j);
arrayContainer.appendChild(stepDiv);
}
}
});
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Challenge Information:
Build a Sorting Visualizer - Build a Sorting Visualizer
You need to first highlight two numbers, then swap them if needed in the next line, but see here:
You should highlight 73 and 19 on the top row and have them swapped in the bottom row
I think the issue is from the start:
you should have the highlight in the second row to be the second and third item
Here are the tests that my latest code in the comment above fails:
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.
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.
After you click #sort-btn , #starting-array should represent the starting step with the initial array and the first two integers highlighted using highlightCurrentEls .
AFAIK, my code is generating the exact same o/p as the example but still fails. I’m at my wits end. Cannot figure out what am I doing wrong.
I added those statements to check if the red dash margins are present, if there are 5 span elements in the divs generated. I removed them once those tests passes.
