Tell us what’s happening:
Hello, I’m not passing test 18 currently. In Dev Tools, it shows that there are the correct number of Div elements. Any help is appreciated. Thank you.
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
const generateElement = () => Math.floor((Math.random() * 100) + 1);
const generateContainer = () => document.createElement('div');
const isOrdered = (a, b) => (a <= b);
const generateArray = (n = 5) => {
const result = [];
for (let i = 0; i < n; i++) {
result.push(generateElement())
} return result;
}
const fillArrContainer = (el, arr) => {
arr.forEach(child => {
const span = document.createElement('span')
span.textContent = child
el.append(span)
})
}
function swapElements(arr, i) {
if (!isOrdered(arr[i], arr[i + 1])) {
[arr[i], arr[i + 1]] = [arr[i + 1], arr[i]]
}
}
function highlightCurrentEls(el, i = 0) {
const children = el.children;
if (!children.item(i + 1))
return;
children[i].style.border = '2px dashed red';
children[i + 1].style.border = '2px dashed red';
}
function checkIfSorted(arr) {
let compArr = arr.slice()
let sortedArray = compArr.sort((a, b) => a - b)
for (let i = 0; i < arr.length; i++) {
if (sortedArray[i] !== arr[i]) {
return false;
}
} return true;
}
function bubSort(arr) {
const container = document.getElementById('array-container');
const startingArr = document.getElementById('starting-array');
const allArrs = [[...arr]]
let lastArr;
do
{for (let i = 0; i < arr.length - 1; i++) {
const newDiv = generateContainer()
swapElements(arr, i)
fillArrContainer(newDiv, arr)
allArrs.push(arr)
lastArr = arr;
container.append(newDiv)
}
}
while (!checkIfSorted(arr)) {
}
return lastArr
}
// Generate-btn Event Listener
document.getElementById('generate-btn').addEventListener('click', () => {
const container = document.getElementById('array-container');
const startingArr = document.getElementById('starting-array');
startingArr.innerHTML = ''
Array.from(container.children).forEach(child => {
if (child.id !== 'starting-array') {
child.remove()
}
})
fillArrContainer(startingArr, generateArray())
})
// Sort-btn Event Listener
document.getElementById('sort-btn').addEventListener('click', () => {
const container = document.getElementById('array-container');
const startingArr = document.getElementById('starting-array');
const startingNumArr = Array.from(startingArr.children, num => parseInt(num.textContent))
console.log(bubSort(startingNumArr))
const allArrs = container.children;
const last = container.lastElementChild;
last.id = 'sorted-arr'
last.style.border = '2px solid green'
Array.from(allArrs).forEach((val, i, arr) => {
if (arr[i + 1])
highlightCurrentEls(val, i % 4)
})
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36
Challenge Information:
Build a Sorting Visualizer - Build a Sorting Visualizer
