Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

Hi . l have struggled with #19: // running tests
19. After you click #sort-btn, each div within #array-container should contain five span, each with a number as its text, and arranged to represent the steps required by Bubble Sort algorithm to sort the starting array.
// tests completed
May anyone please assist

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: 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;
  }
}

/* file: script.js */
'
'
'
const startingArray=document.getElementById(`starting-array`);
const generateBtn=document.getElementById(`generate-btn`);
const arrayContainer=document.getElementById(`array-container`);
const sortBtn =document.getElementById(`sort-btn`);

const generateElement=()=>{

const min=1;
const max=100;

return Math.floor(Math.random() * (max - min + 1) + min);
}

const generateArray=()=>{

  const sortArray=[];
  for(let i=1; i<6; i++){
sortArray.push(generateElement());
  } 

  return sortArray;
}

const generateContainer=()=>{

  const di=document.createElement(`div`);

  return di;
}

const isOrdered=(int1,int2)=>{

return (int1 <= int2);  
}

const swapElements=(arr,index)=>{

  if(!(isOrdered(arr[index],arr[index + 1]))){
    const hold=arr[index];
    arr[index]=arr[index + 1];
    arr[index + 1]=hold;
  }
}

const highlightCurrentEls=(htmlEle,index)=>{

const firstChild=htmlEle.children[index];
const secondChild=htmlEle.children[index + 1];
firstChild.style.border=`3px dashed red`;
secondChild.style.border=`3px dashed red`;

}

const fillArrContainer=(htmlEle,arr)=>{

htmlEle.innerHTML=``;
  for(let i=0; i<5; i++){
    const sp=document.createElement(`span`);
    sp.textContent = arr[i];
    htmlEle.appendChild(sp);
  }
}

let arrayToUse=[];

generateBtn.addEventListener(`click`, function () {

 arrayContainer.innerHTML=``;
  arrayContainer.appendChild(startingArray);
  startingArray.innerHTML=``;
  arrayToUse=generateArray();
 fillArrContainer(startingArray,arrayToUse);
 
})


sortBtn.addEventListener(`click`,()=>{
  
  highlightCurrentEls(startingArray,0);
  const nums = Array.from(startingArray.children, el => Number(el.textContent));
  
const firstStepDiv = document.createElement('div');
  fillArrContainer(firstStepDiv, nums.slice());
  highlightCurrentEls(firstStepDiv, 0);
  arrayContainer.appendChild(firstStepDiv);

  const shallowCopy = nums.slice();

  for(let i=0; i<shallowCopy.length - 1; i++){
    for(let j=0; j<shallowCopy.length -i-1; j++){

      const stepDiv=document.createElement(`div`);
      fillArrContainer(stepDiv,shallowCopy.slice());
      highlightCurrentEls(stepDiv,j);
      arrayContainer.appendChild(stepDiv);

      if(!isOrdered(shallowCopy[j],shallowCopy[j+1])){
        swapElements(shallowCopy,j);
      
      }
    }
  }
  const sortedDiv=generateContainer();
  sortedDiv.style.border=`3px solid black`;
  fillArrContainer(sortedDiv,shallowCopy.slice());
  arrayContainer.appendChild(sortedDiv);
})

Your browser information:

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

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

2

Your code shows three divs before it ever swaps the first pair of numbers.
Your code is not handling each pair of numbers in the array. Are your loop variables correct? Log them to see.
What happens if you click the “Sort” button again after the array has been sorted?
Your bubble sort should stop after one complete iteration with no swaps.

Look at the example app. To compare, take a screenshot of a sorted array in the example app. Temporarily comment out the call to generateArray() on this line: arrayToUse=generateArray(); in your event listener and replace it with the array used in the example app to see how your code compared to what is expected.