Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

I have done my best to pass this step 18, please I need an assistance

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 generateBtn = document.getElementById("generate-btn");
const startingArray = document.getElementById("starting-array");
const arrayContainer= document.getElementById("array-container");
const sortBtn = document.getElementById("sort-btn");

const generateElement=()=>{
  const randomInt= Math.floor(Math.random()*(100)+1)
  return randomInt
}
const generateArray=()=>{
  const randomArr =[];
  for(let i =0; i < 5; i++ ){
  randomArr.push(generateElement())
}
  return randomArr
}
const generateContainer=()=>{
const div = document.createElement("div")
return div
};

const fillArrContainer=(element, arr)=>{
  element.innerHTML="";
for(let i=0; i<arr.length; i++){
const spanElement = document.createElement("span");
spanElement.textContent = arr[i]
element.appendChild(spanElement);
}
return element
};

const isOrdered=(num1,num2)=>{
if(num1>num2){
return false
}else{
  return true
}
};

const swapElements =(arr, numIndex)=>{
if(!isOrdered(arr[numIndex], arr[numIndex+1])){
  [arr[numIndex],arr[numIndex+1]]=[arr[numIndex+1], arr[numIndex]]
}
};

const highlightCurrentEls=(element, numIndex)=>{
  for(let i=0; i< element.children.length; i++){
    element.children[i].style.border = "none";
  }
  if(numIndex<element.children.length-1){ element.children[numIndex].style.border = "1px dashed red"
  element.children[numIndex+1].style.border = "1px dashed red"
  element.children[numIndex].style.width="25px"
}
};
 
generateBtn.addEventListener("click",()=>{ 
  arrayContainer.innerHTML="";
  startingArray.innerHTML="";
  const arr = generateArray();
  fillArrContainer(startingArray, arr); arrayContainer.appendChild(startingArray)
});

sortBtn.addEventListener("click",()=>{
const arr = [...startingArray.children].map(el => Number(el.textContent));
arrayContainer.innerHTML="";
const newArr = [...arr]
fillArrContainer(startingArray, newArr);
arrayContainer.appendChild(startingArray);
highlightCurrentEls(startingArray, 0)
swapElements(newArr, 0);
  for(let j=0; j<newArr.length-1; j++){
  for(let i=(j===0 ? 1 : 0); i<newArr.length-1-j; i++){
const sortingDiv = generateContainer();
fillArrContainer(sortingDiv, newArr);
arrayContainer.appendChild(sortingDiv);
highlightCurrentEls(sortingDiv, i);
swapElements(newArr, i);
  }
  }
  const finalDiv = generateContainer();
  fillArrContainer(finalDiv, newArr);
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/146.0.0.0 Safari/537.36

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

Build a Sorting Visualizer - Build a Sorting Visualizer
2

to make this code work you have to make it complete the sort as described in the instructions. For eg. right now your code does this:

image
image577×1120 79.3 KB

But it is missing the div that comes after the 7th one (between the current 7th and 8th one)
Because after you swap, you are not supposed to just stop and start over.
You’re supposed to continue till the end of the array.
Then start over.

(in your case the code swaps 66 and 43 but doesn’t continue to the end of the array)

Compare that to the way the sample program they gave works.

image
image662×1362 90 KB

Notice how after swapping it keeps going all the way to the end of the array each time?
(whether it needs to or not)

3

Hi @nnamdo ,

Check your loop variables. The outer loop should cover the length of the array, and the inner loop should handle each pair of numbers in the array,

The starting array should be the first div in the first iteration of your sort; you’ll just need to treat it differently since it’s already been populated.

The following instruction is often overlooked in this challenge, so be sure you address it:

The algorithm stops after one cycle completes with no swaps.

Good luck and happy coding!

4

now it is completing the sort yet 18 and 19 failed

const generateBtn = document.getElementById("generate-btn");
const startingArray = document.getElementById("starting-array");
const arrayContainer= document.getElementById("array-container");
const sortBtn = document.getElementById("sort-btn");

const generateElement=()=>{
  const randomInt= Math.floor(Math.random()*(100)+1)
  return randomInt
}
const generateArray=()=>{
  const randomArr =[];
  for(let i =0; i < 5; i++ ){
  randomArr.push(generateElement())
}
  return randomArr
}
const generateContainer=()=>{
const div = document.createElement("div")
return div
};

const fillArrContainer=(element, arr)=>{
  element.innerHTML="";
for(let i=0; i<arr.length; i++){
const spanElement = document.createElement("span");
spanElement.textContent = arr[i]
element.appendChild(spanElement);
}
return element
};

const isOrdered=(num1,num2)=>{
if(num1>num2){
return false
}else{
  return true
}
};

const swapElements =(arr, numIndex)=>{
if(!isOrdered(arr[numIndex], arr[numIndex+1])){
  [arr[numIndex],arr[numIndex+1]]=[arr[numIndex+1], arr[numIndex]]
}
};

const highlightCurrentEls=(element, numIndex)=>{
  for(let i=0; i< element.children.length; i++){
    element.children[i].style.border = "none";
  }
  if(numIndex<element.children.length-1){
    element.children[numIndex].style.border = "1px dashed red"
  element.children[numIndex+1].style.border = "1px dashed red"
  element.children[numIndex].style.width="25px"
}
};
 
generateBtn.addEventListener("click",()=>{ 
  arrayContainer.innerHTML="";
  startingArray.innerHTML="";
  const arr = generateArray();
  fillArrContainer(startingArray, arr); arrayContainer.appendChild(startingArray)
});

sortBtn.addEventListener("click",()=>{
const arr = [...startingArray.children].map(el => Number(el.textContent));
arrayContainer.innerHTML="";
const newArr = [...arr];
fillArrContainer(startingArray, newArr);
arrayContainer.appendChild(startingArray);
highlightCurrentEls(startingArray, 0)
  for(let j=0; j<newArr.length-1; j++){
  for(let i=(j===0?1:0); i<newArr.length-1; i++){
const sortingDiv = generateContainer()
fillArrContainer(sortingDiv, newArr);
arrayContainer.appendChild(sortingDiv);
highlightCurrentEls(sortingDiv, i)
swapElements(newArr, i);
  }
  }
  const finalDiv = generateContainer();
fillArrContainer(finalDiv, newArr)
arrayContainer.appendChild(finalDiv)
});
5

I have corrected the loop variable and now the inner loop is handling the pairing as given in the instruction yet 18 and 19 are failing.

const generateBtn = document.getElementById("generate-btn");
const startingArray = document.getElementById("starting-array");
const arrayContainer= document.getElementById("array-container");
const sortBtn = document.getElementById("sort-btn");

const generateElement=()=>{
  const randomInt= Math.floor(Math.random()*(100)+1)
  return randomInt
}
const generateArray=()=>{
  const randomArr =[];
  for(let i =0; i < 5; i++ ){
  randomArr.push(generateElement())
}
  return randomArr
}
const generateContainer=()=>{
const div = document.createElement("div")
return div
};

const fillArrContainer=(element, arr)=>{
  element.innerHTML="";
for(let i=0; i<arr.length; i++){
const spanElement = document.createElement("span");
spanElement.textContent = arr[i]
element.appendChild(spanElement);
}
return element
};

const isOrdered=(num1,num2)=>{
if(num1>num2){
return false
}else{
  return true
}
};

const swapElements =(arr, numIndex)=>{
if(!isOrdered(arr[numIndex], arr[numIndex+1])){
  [arr[numIndex],arr[numIndex+1]]=[arr[numIndex+1], arr[numIndex]]
}
};

const highlightCurrentEls=(element, numIndex)=>{
  for(let i=0; i< element.children.length; i++){
    element.children[i].style.border = "none";
  }
  if(numIndex<element.children.length-1){
    element.children[numIndex].style.border = "1px dashed red"
  element.children[numIndex+1].style.border = "1px dashed red"
  element.children[numIndex].style.width="25px"
}
};
 
generateBtn.addEventListener("click",()=>{ 
  arrayContainer.innerHTML="";
  startingArray.innerHTML="";
  const arr = generateArray();
  fillArrContainer(startingArray, arr); arrayContainer.appendChild(startingArray)
});

sortBtn.addEventListener("click",()=>{
const arr = [...startingArray.children].map(el => Number(el.textContent));
arrayContainer.innerHTML="";
const newArr = [...arr];
fillArrContainer(startingArray, newArr);
arrayContainer.appendChild(startingArray);
highlightCurrentEls(startingArray, 0)
  for(let j=0; j<newArr.length-1; j++){
  for(let i=(j===0?1:0); i<newArr.length-1; i++){
const sortingDiv = generateContainer()
fillArrContainer(sortingDiv, newArr);
arrayContainer.appendChild(sortingDiv);
highlightCurrentEls(sortingDiv, i)
swapElements(newArr, i);
  }
  }
  const finalDiv = generateContainer();
fillArrContainer(finalDiv, newArr)
arrayContainer.appendChild(finalDiv)
});
6

Tell us what’s happening:

I have created the first topic and i didn’t get a response to my reply under it, hence I am doing a fresh one.

my code generates the number of divs required to sort the startingArray, including the starting array and the sorted array yet 18 and 19 seems not to pass

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 generateBtn = document.getElementById("generate-btn");
const startingArray = document.getElementById("starting-array");
const arrayContainer= document.getElementById("array-container");
const sortBtn = document.getElementById("sort-btn");

const generateElement=()=>{
  const randomInt= Math.floor(Math.random()*(100)+1)
  return randomInt
}
const generateArray=()=>{
  const randomArr =[];
  for(let i =0; i < 5; i++ ){
  randomArr.push(generateElement())
}
  return randomArr
}
const generateContainer=()=>{
const div = document.createElement("div")
return div
};

const fillArrContainer=(element, arr)=>{
  element.innerHTML="";
for(let i=0; i<arr.length; i++){
const spanElement = document.createElement("span");
spanElement.textContent = arr[i]
element.appendChild(spanElement);
}
return element
};

const isOrdered=(num1,num2)=>{
if(num1>num2){
return false
}else{
  return true
}
};

const swapElements =(arr, numIndex)=>{
if(!isOrdered(arr[numIndex], arr[numIndex+1])){
  [arr[numIndex],arr[numIndex+1]]=[arr[numIndex+1], arr[numIndex]]
}
};

const highlightCurrentEls=(element, numIndex)=>{
  for(let i=0; i< element.children.length; i++){
    element.children[i].style.border = "none";
  }
  if(numIndex<element.children.length-1){
    element.children[numIndex].style.border = "1px dashed red"
  element.children[numIndex+1].style.border = "1px dashed red"
  element.children[numIndex].style.width="25px"
}
};
 
generateBtn.addEventListener("click",()=>{ 
  arrayContainer.innerHTML="";
  startingArray.innerHTML="";
  const arr = generateArray();
  fillArrContainer(startingArray, arr); arrayContainer.appendChild(startingArray)
});

sortBtn.addEventListener("click",()=>{
const arr = [...startingArray.children].map(el => Number(el.textContent));
arrayContainer.innerHTML="";
const newArr = [...arr];
fillArrContainer(startingArray, newArr);
arrayContainer.appendChild(startingArray);
highlightCurrentEls(startingArray, 0)
  for(let j=0; j<newArr.length-1; j++){
  for(let i=(j===0?1:0); i<newArr.length-1; i++){
const sortingDiv = generateContainer()
fillArrContainer(sortingDiv, newArr);
arrayContainer.appendChild(sortingDiv);
highlightCurrentEls(sortingDiv, i)
swapElements(newArr, i);
  }
  }
  const finalDiv = generateContainer();
fillArrContainer(finalDiv, newArr)
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/146.0.0.0 Safari/537.36

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

7

Here is the error:

    1. 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.

  • Failed: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.

8

Does algorithm end when there’s one pass without making any swaps?

9

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

10

not that I see any, each step compares to numbers and swap if the bigger number is before the smaller number

11

you need to compare what you’re doing to the sample app.

Make sure you continue the process of comparing all the way to the end and repeat every time there is even one swap done.

So do not stop early when the array is sorted. Stop only when all the comparisons do not yield any swaps.

12

that is what my code does, it completes the comparison even after the array is sorted completely

13

It should stop after one full pass without any swaps.

14

Here’s a screenshot from the example app:

image
image265×435 17.7 KB

Notice 1) The first two numbers in the starting array are swapped for the second div, and 2) All the swaps were done in the first complete iteration of the outer array, so the code continued through the next iteration of the outer array, then stopped because there were no swaps needs in that iteration.

To test this how this exact starting array is handled in your code, you can temporarily comment out generateArray() in the generateBtn event listener and replace it with [22,15,40,80,68].

Good luck and happy coding!