Yes, it worth doing so Thanks.
HELLO, I didn’t get that solve, and I’m back to get it resolve once and for all. can I share my code?
Please do not create duplicate topics for the same challenge/project question(s). If you need more help then respond back to the original topic you created with your follow up questions and/or your updated code and question.
The duplicate topic has been unlisted.
Thank you.
Noted, there’s a progress so far but still didn’t pass the test in previous test the array index were not highlighted but now I have implemented function that highlighted all the sorted array still did not pass. I haven’t rested since yesterday, please see my code 18. 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.
// DOM Elements
const startingArr = document.getElementById("starting-array");
const generateBtn = document.getElementById('generate-btn');
const sortBtn = document.getElementById('sort-btn');
const arrayContainer = document.getElementById('array-container');
// State management for logic
let inputValues = [];
// 1 & 2. Function to generate a random integer
function generateElement() {
return Math.floor(Math.random() * 100) + 1;
}
// 3, 4 & 5. Function to generate an array of 5 random integers
function generateArray() {
const arr = [];
for (let i = 0; i < 5; i++) {
arr.push(generateElement());
}
return arr;
}
// 6 & 7. Function to return an empty div element
function generateContainer() {
return document.createElement('div');
}
// 8 & 9. Function to populate an element with spans from an array
function fillArrContainer(element, arr) {
element.innerHTML = ''; // Clear previous content
arr.forEach(num => {
const span = document.createElement('span');
span.textContent = num;
element.appendChild(span);
});
}
// 10 & 11. Function to check if two integers are ordered
function isOrdered(a, b) {
return a <= b;
}
// 12 & 13. Function to swap elements in an array if out of order
function swapElements(arr, index) {
if (!isOrdered(arr[index], arr[index + 1])) {
const temp = arr[index];
arr[index] = arr[index + 1];
arr[index + 1] = temp;
}
}
// 14 & 15. Function to highlight two specific span descendants or add a green border
function highlightCurrentEls(container, index, isLastRow) {
if (isLastRow) {
// Last row gets a green border around the entire row container
container.style.border = "2px solid green";
} else {
// Explicitly map container row indices to their respective span target index values
const rowHighlightMapping = {
0: 0, // row 1 (index 0): 1st & 2nd spans (index 0 & 1)
1: 1, // row 2 (index 1): 2nd & 3rd spans (index 1 & 2)
2: 2, // row 3 (index 2): 3rd & 4th spans (index 2 & 3)
3: 3, // row 4 (index 3): 4th & 5th spans (index 3 & 4)
4: 0, // row 5 (index 4): 1st & 2nd spans (index 0 & 1)
5: 1, // row 6 (index 5): 2nd & 3rd spans (index 1 & 2)
6: 2, // row 7 (index 6): 3rd & 4th spans (index 2 & 3)
7: 3, // row 8 (index 7): 4th & 5th spans (index 3 & 4)
8: 0, // row 9 (index 8): 1st & 2nd spans (index 0 & 1)
9: 1 // row 10 (index 9): 2nd & 3rd spans (index 1 & 2)
};
const targetSpanIndex = rowHighlightMapping[index];
const spans = container.querySelectorAll('span');
if (targetSpanIndex !== undefined && spans[targetSpanIndex] && spans[targetSpanIndex + 1]) {
const style = "2px dashed red";
spans[targetSpanIndex].style.border = style;
spans[targetSpanIndex + 1].style.border = style;
}
}
}
// 16 & 17. Generate Button Logic
generateBtn.addEventListener('click', () => {
arrayContainer.innerHTML = '';
const startingArrayDiv = generateContainer();
startingArrayDiv.id = 'starting-array';
arrayContainer.appendChild(startingArrayDiv);
inputValues = generateArray();
fillArrContainer(startingArrayDiv, inputValues);
});
// Bubble Sort Steps Tracker Function
const bubbleSortSteps = (array) => {
const steps = [ [...array] ]; // Include the starting state
const sortedArray = [...array];
for (let i = 0; i < sortedArray.length - 1; i++) {
for (let j = 0; j < sortedArray.length - 1 - i; j++) {
swapElements(sortedArray, j);
steps.push([...sortedArray]);
}
}
return steps;
};
Your code is now not responding to the sort button.
I suggest you get some rest. Come back to this when you’re refreshed.
Whenever I get stuck, I find that taking a walk usually clears my head and often by the time I’m done with my walk I’ve figured out the solution or at least found a new way forward.
When you come back to this, please focus on your loop variables. Throughout this topic, we have been telling you that your loop variables are not correct. @sampatee took a considerable amount of time to step through what your loops are doing (or not doing in this case) yet the code around your loop variables hasn’t changed since the first time you posted.
Let me take a rest for awhile. I should have figured out what to do by the time I’m back. Thanks.