Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

I’ve been stuck here for a while, my code seems to do the same thing as the example program, what am I missing to check this tests?
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.
20. When you click the #sort-btn, you should make use of the highlightCurrentEls function to highlight the element

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sorting Visualizer</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <main>
        <div id="array-container">
            <div id="starting-array"></div>
        </div>
        <div id="btn-container">
            <button id="generate-btn" type="button">Generate Array</button>
            <button id="sort-btn" type="button">Sort Array</button>
        </div>
    </main>
    <script src="script.js"></script>
</body>

</html>

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

function generateContainer(){
  let newDiv = document.createElement("div");
  return newDiv;
}

function fillArrContainer(htmlElement, array){
  htmlElement.innerHTML = "";
  for(let i = 0; i < 5; i++){
    htmlElement.innerHTML += `<span>${array[i]}</span>`;
  }
}

function isOrdered(one, two){
  return one <= two;
}

function swapElements(numArr, index){
  let next = index + 1;
  if(!isOrdered(numArr[index], numArr[next])){
    let x = numArr[index];
    numArr[index] = numArr[next];
    numArr[next] = x;
  }
}

function highlightCurrentEls(htmlElement, index){
  htmlElement.children[index].style.border = "2px dashed red";
  htmlElement.children[index + 1].style.border = "2px dashed red";
}

const startArray = document.getElementById("starting-array");
const arrContainer = document.getElementById("array-container");

let startArr;

document.getElementById("generate-btn").addEventListener("click", () => {startArr = generateArray();
removeAllExtraDivs();
fillArrContainer(startArray, startArr);});
document.getElementById("sort-btn").addEventListener("click", () => {
removeAllExtraDivs();
bubbleSort(startArray);
});

function generateArray(){
  return [generateElement(), generateElement(), generateElement(), generateElement(), generateElement()];
}

function bubbleSort(arr){
  let cont = arr;
  if(isSorted()) 
  {
    cont.style.border = "4px solid green";
    return;
  } else {
    for(let i = 0; i < 4; i++){
    highlightCurrentEls(cont, i);
    cont = generateContainer();
    arrContainer.appendChild(cont);
    if(!isOrdered(startArr[i], startArr[i+1])){
        swapElements(startArr, i);
    }
    fillArrContainer(cont, startArr);
  }
  bubbleSort(cont);
  }
}

function removeAllExtraDivs(){
  arrContainer.querySelectorAll("div:not(#starting-array)").forEach((el) => {el.remove()});
}

function isSorted(){
  if(isOrdered(startArr[0],startArr[1]) && isOrdered(startArr[1],startArr[2]) && isOrdered(startArr[2],startArr[3]) && isOrdered(startArr[3],startArr[4])) return true; return false;
}

/* file: styles.css */
* {
    box-sizing: border-box;
}

main {
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#array-container {
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2px;

}

#array-container>div {
    min-width: 8rem;
    height: 2rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border-radius: 10px;
    margin-bottom: 0.2rem;
    border: 2px solid darkgray;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#starting-array {
    border: 4px solid darkblue !important;
}

#btn-container {
    display: flex;
    justify-content: space-around;
}

button {
    padding: 2px;
    margin: 5px;
}

span {
    border-radius: 2px;
    padding: 0.5px;
    margin: 0
}

@media (min-width: 430px) {
  #array-container>div {
    min-width: 12rem;    
  }
  span {
    padding: 1px;
    margin: 1px;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

2

This is close, but there are some differences with the description of algorithm:

The Bubble Sort algorithm sorts a sequence of integers by comparing couples of adjacent elements starting from the beginning of the sequence. If the first element is greater than the second one, it swaps them. Then, it proceeds with the following couple. When the last element of the sequence is reached, it starts a new cycle from the beginning of the sequence, and repeats the process until the elements are sorted. The algorithm stops after one cycle completes with no swaps.

1 Like
3

ok, I see what I missed, thanks! These details always get me