Tell us what’s happening:
Dear Fellow Coders, i am actually stuck here, the test cases 18 and 19 are not passing, so i forcefully remove the second element here arrayContainer.removeChild([...arrayContainer.children][1]) just to get the test case 18 passed, unfortunately unable to figure out how to pass test case number 19, any help on how to pass it?, i have tried AI tools but still could not get the 21 test cases passed. Thank You!
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
const generateElement = () => Math.ceil(Math.random() * 100);
const generateArray = () => {
const array = [];
for (let i = 0; i < 5; i++) array.push(generateElement());
return array;
};
const generateContainer = () => document.createElement("div");
const fillArrContainer = (element, array) => {
element.innerHTML = "";
for (let i = 0; i < array.length; i++) {
const span = document.createElement("span");
span.innerText = array[i];
element.appendChild(span);
}
};
const highlightCurrentEls = (element, index) => {
const first = element.children[index];
const second = element.children[index + 1];
if (first) {
first.style.border = "2px dashed red";
first.style.width = "20px";
}
if (second) {
second.style.border = "2px dashed red";
second.style.width = "20px";
}
};
const isOrdered = (num1, num2) => num1 <= num2;
const swapElements = (array, index) => {
if (!isOrdered(array[index], array[index + 1])) {
const temp = array[index];
array[index] = array[index + 1];
array[index + 1] = temp;
}
};
// DOM Elements
const generateBtn = document.getElementById("generate-btn");
const sortBtn = document.getElementById("sort-btn");
const startingArr = document.getElementById("starting-array");
const arrayContainer = document.getElementById("array-container");
sortBtn.style.display = "none";
generateBtn.addEventListener("click", () => {
[...arrayContainer.children].forEach(child => {
if (child !== startingArr) {
arrayContainer.removeChild(child);
}
});
const newArray = generateArray();
fillArrContainer(startingArr, newArray);
sortBtn.style.display = "block";
});
sortBtn.addEventListener("click", () => {
sortBtn.style.display = "none";
const originalArray = [...startingArr.children].map(span => parseInt(span.innerText));
const array = [...originalArray];
arrayContainer.innerHTML = "";
arrayContainer.appendChild(startingArr);
highlightCurrentEls(startingArr, 0);
const n = array.length;
for (let i = 0; i < n - 1; i++) {
let swapped = false;
for (let j = 0; j < n -1; j++) {
if (!isOrdered(array[j], array[j + 1])) {
swapElements(array, j);
swapped = true;
}
const stepDiv = generateContainer();
fillArrContainer(stepDiv, array);
highlightCurrentEls(stepDiv, j);
arrayContainer.appendChild(stepDiv);
}
if (!swapped) break;
}
arrayContainer.removeChild([...arrayContainer.children][1])
const finalDiv = generateContainer();
fillArrContainer(finalDiv, array);
arrayContainer.appendChild(finalDiv);
});
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Challenge Information:
Build a Sorting Visualizer - Build a Sorting Visualizer
Look at the example app again.
The two numbers being compared should be highlighted, and then swapped in the next row
See how 93 and 29 are highlighted, and then swapped in the next row.
You are swapping early. 40 and 82 are highlighted, but then 82 and 69 are swapped in the next row when they are highlighted. They need to be highlighted first, then swapped in the following row.
thank you @pkdvalis , i have taken care of that already, but the test cases 18 and 19 are still not passing, i could not know why.
i just made some cleanup to the code:
const generateElement = () => Math.ceil(Math.random() * 100);
const generateArray = () => {
const array = [];
for (let i = 0; i < 5; i++) array.push(generateElement());
return array;
};
const generateContainer = () => document.createElement("div");
const fillArrContainer = (element, array) => {
element.innerHTML = "";
for (let i = 0; i < array.length; i++) {
const span = document.createElement("span");
span.innerText = array[i];
element.appendChild(span);
}
};
const highlightCurrentEls = (element, index) => {
const first = element.children[index];
const second = element.children[index + 1];
if (first) {
first.style.border = "2px dashed red";
first.style.width = "20px";
}
if (second) {
second.style.border = "2px dashed red";
second.style.width = "20px";
}
};
const isOrdered = (num1, num2) => num1 <= num2;
const swapElements = (array, index) => {
if (!isOrdered(array[index], array[index + 1])) {
const temp = array[index];
array[index] = array[index + 1];
array[index + 1] = temp;
}
};
// DOM Elements
const generateBtn = document.getElementById("generate-btn");
const sortBtn = document.getElementById("sort-btn");
const startingArr = document.getElementById("starting-array");
const arrayContainer = document.getElementById("array-container");
sortBtn.style.display = "none";
generateBtn.addEventListener("click", () => {
[...arrayContainer.children].forEach(child => {
if (child !== startingArr) {
arrayContainer.removeChild(child);
}
});
const newArray = generateArray();
fillArrContainer(startingArr, newArray);
sortBtn.style.display = "block";
});
sortBtn.addEventListener("click", () => {
sortBtn.style.display = "none";
const originalArray = [...startingArr.children].map(span => parseInt(span.innerText));
const array = [...originalArray];
arrayContainer.innerHTML = "";
arrayContainer.appendChild(startingArr);
highlightCurrentEls(startingArr, 0);
const n = array.length;
for (let i = 0; i < n - 1; i++) {
for (let j = 0; j < n -1; j++) {
const stepDiv = generateContainer();
fillArrContainer(stepDiv, array);
highlightCurrentEls(stepDiv, j);
arrayContainer.appendChild(stepDiv);
swapElements(array, j);
}
}
arrayContainer.removeChild([...arrayContainer.children][1])
const finalDiv = generateContainer();
fillArrContainer(finalDiv, array);
arrayContainer.appendChild(finalDiv);
});
1 Like
Nice work!
New problem is that in the cycle indicated, there are no swaps and the algorithm should have ended.
The algorithm stops after one cycle completes with no swaps.
Thank you @pkdvalis, it finally works, and i just changed the order of how the code is being executed, generating and highlighting the elements before swapping them.
but i have an issue with the certificate too,
i have completed the exam with 98% score, unfortunately could not claim my certificate, with the following message:
It looks like you have not completed the necessary steps. Please complete the required projects to claim the JavaScript Certification.
steps:
Exam result:
1 Like
Nicely done!
There’s a bit of a problem with that right now, but it’s being worked on:
https://forum.freecodecamp.org/t/collation-issue-claiming-new-certifications/772027
