Tell us what’s happening:
I have no clue why I can’t pass 18 task. I’ve been working with it for 2 days. I really need help
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
const generateBtn = document.getElementById("generate-btn");
const sortBtn = document.getElementById("sort-btn");
function generateElement() {
return Math.floor(Math.random() * 100) + 1;
}
function generateArray() {
const arr = [];
for (let i = 0; i < 5; i++) {
arr.push(generateElement());
}
return arr;
}
const generateContainer = () => document.createElement("div");
function fillArrContainer(container, array) {
container.innerHTML = "";
array.forEach((num) => {
const span = document.createElement("span");
span.textContent = num;
container.appendChild(span);
});
}
function isOrdered(numA, numB) {
return numA <= numB;
}
function swapElements(array, index) {
if (index < 0 || index >= array.length - 1) return;
const a = array[index];
const b = array[index + 1];
if (!isOrdered(a, b)) {
array[index] = b;
array[index + 1] = a;
}
}
function highlightCurrentEls(htmlEl, index) {
const child1 = htmlEl.children[index];
const child2 = htmlEl.children[index + 1];
if (child1) child1.style.border = "2px dashed red";
if (child2) child2.style.border = "2px dashed red";
}
generateBtn.addEventListener("click", () => {
const arrayContainer = document.getElementById("array-container");
const startingArray = document.getElementById("starting-array");
Array.from(arrayContainer.children).forEach((child) => {
if (child !== startingArray) {
arrayContainer.removeChild(child);
}
});
fillArrContainer(startingArray, generateArray());
});
sortBtn.addEventListener("click", () => {
const startingArrayEl = document.getElementById("starting-array");
const arrayContainer = document.getElementById("array-container");
const numbers = Array.from(startingArrayEl.children).map((span) =>
parseInt(span.textContent)
);
highlightCurrentEls(startingArrayEl, 0);
function createStepDiv(arrSnapshot, highlightIndex = -1) {
const stepDiv = document.createElement("div");
fillArrContainer(stepDiv, arrSnapshot.slice());
if (highlightIndex >= 0) {
highlightCurrentEls(stepDiv, highlightIndex);
}
arrayContainer.appendChild(stepDiv);
}
const arr = numbers.slice();
const n = arr.length;
for (let i = 0; i < n - 1; i++) {
for (let j = 0; j < n - 1 - i; j++) {
if (!isOrdered(arr[j], arr[j + 1])) {
const tmp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = tmp;
createStepDiv(arr.slice(), j);
} else {
createStepDiv(arr.slice(), j);
}
}
}
createStepDiv(arr.slice());
});
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