Build a Sorting Visualizer - Build a Sorting Visualizer

Curriculum Help
1

Tell us what’s happening:

Please assist as I am not passing test 18 of this challange.

Your code so far

/* file: script.js */
const generateElement = () => {
    return Math.floor((Math.random() * 100) + 1);
}

const generateArray = () => {
    const array = [];
    for (let i = 0; i < 5; i++) {
        array.push(generateElement());
    }
    return array;
}

const generateContainer = () => {
    return document.createElement("div");
}

const fillArrContainer = (parentElement, array) => {
    for (let i = 0; i < array.length; i++) {
        const childElement = document.createElement("span");
        childElement.textContent = array[i];
        parentElement.appendChild(childElement);
    }
}

const isOrdered = (int1, int2) => {
    return int1 <= int2
}

const swapElements = (array, index) => {
    if (!isOrdered(array[index], array[index + 1])) {
        const temp = array[index];
        array[index] = array[index + 1];
        array[index + 1] = temp
    }
}

const highlightCurrentEls = (parentElement, index) => {
    Array.from(parentElement.children).forEach(child => {
        child.style.border = "";
    });

    if (parentElement.children[index]) {
        parentElement.children[index].style.border = "2px dashed red";
    }
    if (parentElement.children[index + 1]) {
        parentElement.children[index + 1].style.border = "2px dashed red";
    }
}

const startingArray = document.getElementById("starting-array");
const arrayContainer = document.getElementById("array-container")

document.getElementById("generate-btn").addEventListener("click", () => {
    startingArray.innerHTML = "";
    arrayContainer.innerHTML = "";
    arrayContainer.appendChild(startingArray);
    fillArrContainer(startingArray, generateArray())
})

document.getElementById("sort-btn").addEventListener("click", () => {
    const newArray = []
    Array.from(startingArray.children).forEach((number) => {
        newArray.push(Number(number.textContent));
    })

    for (let i = arrayContainer.children.length - 1; i >= 0; i--) {
        const child = arrayContainer.children[i];
        if (child.id !== "starting-array") {
            arrayContainer.removeChild(child);
        }
    }

    Array.from(startingArray.children).forEach(span => {
        span.style.border = "";
    });

    highlightCurrentEls(startingArray, 0);

    const n = newArray.length;
    for (let i = 0; i < n - 1; i++) {
        for (let j = 0; j < n - 1 - i; j++) {
            if (!isOrdered(newArray[j], newArray[j + 1])) {
                swapElements(newArray, j)
            }
            const stepDiv = document.createElement("div")
            fillArrContainer(stepDiv, [...newArray]);
            highlightCurrentEls(stepDiv, j);
            arrayContainer.appendChild(stepDiv);
        }
    }
    const finalDiv = document.createElement("div");
    fillArrContainer(finalDiv, [...newArray]);
    arrayContainer.appendChild(finalDiv);
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.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

2

I’ve edited your post to improve the readability of the 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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').