Tell us what’s happening:
I did that lab and I’m passing every test exept the 18, wich is: 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. I compared my result with the example given and I don’t see the difference. Thanks for your help in andvance
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36
Challenge Information:
Build a Sorting Visualizer - Build a Sorting Visualizer
https://www.freecodecamp.org/learn/full-stack-developer/lab-sorting-visualizer/build-a-sorting-visualizer
Hi. Can you please post your code.
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
im sorry i thought the code would be pasted automaticaly when making a post direct from the curriculum:
function generateElement() {
return Math.floor(Math.random() * 100 + 1);
};
function generateArray() {
const arr = [];
arr.push(generateElement());
arr.push(generateElement());
arr.push(generateElement());
arr.push(generateElement());
arr.push(generateElement());
return arr;
};
function generateContainer() {
const div = document.createElement("div");
return div;
};
function fillArrContainer(htmlElement, arr) {
for (let num of arr) {
htmlElement.innerHTML += `<span>${num}</span>`
};
};
function isOrdered(num1, num2) {
return num1 <= num2;
};
function swapElements(arr, index) {
const numsToSwap = arr.splice(index, 2);
console.log(numsToSwap)
if (isOrdered(numsToSwap[0], numsToSwap[1])) {
arr.splice(index, 0, numsToSwap[0], numsToSwap[1])
return;
};
numsToSwap.reverse();
arr.splice(index, 0, numsToSwap[0], numsToSwap[1]);
};
function highlightCurrentEls(parent, index) {
const children = parent.childNodes;
children[index].style.border = "2px dashed red";
children[index + 1].style.border = " 2px dashed red";
};
const generateBtn = document.getElementById("generate-btn");
const startingArr = document.getElementById("starting-array");
const arrContainer = document.getElementById("array-container")
generateBtn.addEventListener("click", () => {
arrContainer.innerHTML = "";
arrContainer.appendChild(startingArr)
startingArr.innerHTML = "";
fillArrContainer(startingArr, generateArray());
});
const sortBtn = document.getElementById("sort-btn");
sortBtn.addEventListener("click", () => {
const spanElements = startingArr.querySelectorAll("span");
const values = Array.from(spanElements).map(span => parseInt(span.textContent));
console.log("Starting Array: " + values)
let firstTime = true;
while (
!isOrdered(values[0], values[1])
|| !isOrdered(values[1], values[2])
|| !isOrdered(values[2], values[3])
|| !isOrdered(values[3], values[4])) {
console.log("While loop entered")
for (let i=0; i < 4; i++) {
console.log("In for Loop with index: " + i)
if (firstTime) {
highlightCurrentEls(startingArr, i);
swapElements(values, i);
firstTime = false;
} else {
console.log("New array: " + values)
const newContainer = generateContainer();
arrContainer.appendChild(newContainer)
fillArrContainer(newContainer, values);
highlightCurrentEls(newContainer, i);
swapElements(values, i);
}
}
}
console.log("While loop finished")
const lastContainer = generateContainer();
arrContainer.appendChild(lastContainer)
fillArrContainer(lastContainer, values);
lastContainer.style.border = "5px solid green"
});
Can you share a screenshot of your final app state when its sorted?
When you compared to the example app, you sorted the same array?
Thanks for the idea. I never tested with the same array. The problem was, that the solution did bubble throug the array 1 more time as soon that it was sortet what my code didn’t do.
