Tell us what’s happening:
this stuff isnt passing and i dont understand why.
Your code so far
<!-- file: index.html -->
/* file: styles.css */
const generateBtn = document.getElementById(‘generate-btn’)
const startingArray = document.getElementById(‘starting-array’)
const arrayContainer = document.getElementById(‘array-container’)
const sortBtn = document.getElementById(‘sort-btn’)
const generateElement = () => {
const random = Math.floor(Math.random() * 100) + 1
return random
}
const generateArray = () => {
let randomIntergers =
for (let i = 0; i < 5; i++) {
const numbers = generateElement()
randomIntergers.push(numbers)
}
return randomIntergers
}
console.log(generateArray())
const generateContainer = () => {
let emptyDiv = document.createElement(‘div’)
return emptyDiv
}
const fillArrContainer = (element, arr) => {
element.innerHTML = `${arr[0]}
${arr[1]}
${arr[2]}
${arr[3]}
${arr[4]}
`
}
const isOrdered = (first, second) => {
return first <= second
}
const swapElements = (arr, index) => {
if (arr[index] > arr[index + 1]) {
\[arr\[index\], arr\[index + 1\]\] = \[arr\[index + 1\], arr\[index\]\]
}
return arr;
}
const highlightCurrentEls = (element, index) => {
const child = element.children[index]
const secondChild = element.children[index + 1]
child.style.border = ‘dashed red’
child.style.width = ‘20px’
secondChild.style.border = ‘dashed red’
secondChild.style.width = ‘20px’
}
generateBtn.addEventListener(‘click’, () => {
// Clear previous sort steps
Array.from(arrayContainer.children).forEach(child => {
if (child.id !== 'starting-array') {
arrayContainer.removeChild(child);
}
});
// Generate new array
const array = generateArray();
// Fill #starting-array with five elements
startingArray.innerHTML = ‘’;
array.forEach(num => {
const span = document.createElement('span');
span.textContent = num;
startingArray.appendChild(span);
});
})
sortBtn.addEventListener(‘click’, () => {
// Clear previous steps but keep #starting-array
Array.from(arrayContainer.children).forEach(child => {
if (child.id !== 'starting-array') {
arrayContainer.removeChild(child);
}
});
// Get array from #starting-array
const spans = startingArray.querySelectorAll(‘span’);
let arr = Array.from(spans).map(span => parseInt(span.textContent));
highlightCurrentEls(startingArray,0)
const steps = ; // Array of { arr: […], highlight: index }
const initialDiv = generateContainer();
arr.forEach(num => {
const span = document.createElement(‘span’);
span.textContent = num;
initialDiv.appendChild(span);
});
arrayContainer.appendChild(initialDiv);
// Bubble Sort with swap tracking
for (let i = 0; i < arr.length; i++) {
let swapped = false;
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr\[j\] > arr\[j + 1\]) {
arr = swapElements(arr, j);
steps.push({ arr: \[...arr\], highlight: j }); // Track swap index
swapped = true;
}
}
if (!swapped) break;
}
// Always push final sorted array explicitly
steps.push({ arr: […arr], highlight: null });
// Render each step
steps.forEach(({ arr: stepArr, highlight }) => {
const stepDiv = generateContainer();
stepArr.forEach((num, idx) => {
const span = document.createElement('span');
span.textContent = num;
// Highlight swapped elements
if (highlight !== null && (idx === highlight || idx === highlight + 1)) {
span.style.border = '2px dashed red';
span.style.width = '20px';
span.style.margin = '2px';
}
stepDiv.appendChild(span);
});
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/140.0.0.0 Safari/537.36
Challenge Information:
Build a Sorting Visualizer - Build a Sorting Visualizer
