Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

The div sorting the bubble sort algorithms to sort the starting array are not working representing the sorting array. Please see required information to pass the test for necessary assistance.

  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.

Your code so far

<!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>```

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


function generateElement() {
  return Math.floor(Math.random() * 100) + 1;
}

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

function generateContainer() {
  return document.createElement('div');
}

function fillArrContainer(element, arr) {
  element.innerHTML = '';
  arr.forEach(num => {
    const span = document.createElement('span');
    span.textContent = num;
    element.appendChild(span);
  });
}


function isOrdered(a, b) {
  return a <= b;
}


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


function highlightCurrentEls(element, index) {
  const spans = element.querySelectorAll('span');
  if (spans[index] && spans[index + 1]) {
    const borderStyle = "2px dashed red";
    spans[index].style.border = borderStyle;
    spans[index + 1].style.border = borderStyle;
  }
}


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

let currentArr = [];


generateBtn.addEventListener('click', () => {
  
  arrayContainer.innerHTML = '';
  arrayContainer.appendChild(startingArray);
  
  currentArr = generateArray();
  fillArrContainer(startingArray, currentArr);
});


sortBtn.addEventListener('click', () => {
  if (currentArr.length === 0) return;

  
  highlightCurrentEls(startingArray, 0);

  let tempArr = [...currentArr];
  let n = tempArr.length;

  
  for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
     
      swapElements(tempArr, j);

      
      const stepDiv = generateContainer();
      fillArrContainer(stepDiv, [...tempArr]);
      arrayContainer.appendChild(stepDiv);

  
      if (j < n - i - 2) {
        highlightCurrentEls(stepDiv, j + 1);
      } else if (i < n - 2) {
        highlightCurrentEls(stepDiv, 0);
      }
    }
  }
});

Your browser information:

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

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

2

hello!

for a given array [1, 16, 27, 5, 86], the expected output and your output seems to be different. this is the expected output -

image
image955×1004 66.6 KB

and this is your output -

image
image937×1027 59.8 KB

3

I don’t understand this, please, I need more clarity. the issue bound on requirement 18. here is the required information to get the test pass. 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.

4

My HTML, CSS and JS files, please check to see where the error is referring to the requirement 18 in the sorting array.

<!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>

* {
    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;
  }
}

function generateElement() {
  return Math.floor(Math.random() * 100) + 1;
}

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

function generateContainer() {
  return document.createElement('div');
}

function fillArrContainer(element, arr) {
  element.innerHTML = '';
  arr.forEach(num => {
    const span = document.createElement('span');
    span.textContent = num;
    element.appendChild(span);
  });
}


function isOrdered(a, b) {
  return a <= b;
}


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


function highlightCurrentEls(element, index) {
  const spans = element.querySelectorAll('span');
  if (spans[index] && spans[index + 1]) {
    const borderStyle = "2px dashed red";
    spans[index].style.border = borderStyle;
    spans[index + 1].style.border = borderStyle;
  }
}


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

let currentArr = [];


generateBtn.addEventListener('click', () => {
  
  arrayContainer.innerHTML = '';
  arrayContainer.appendChild(startingArray);
  
  currentArr = generateArray();
  fillArrContainer(startingArray, currentArr);
});


sortBtn.addEventListener('click', () => {
  if (currentArr.length === 0) return;

  
  highlightCurrentEls(startingArray, 0);

  let tempArr = [...currentArr];
  let n = tempArr.length;

  
  for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
     
      swapElements(tempArr, j);

      
      const stepDiv = generateContainer();
      fillArrContainer(stepDiv, [...tempArr]);
      arrayContainer.appendChild(stepDiv);

  
      if (j < n - i - 2) {
        highlightCurrentEls(stepDiv, j + 1);
      } else if (i < n - 2) {
        highlightCurrentEls(stepDiv, 0);
      }
    }
  }
});
5

for every iteration of i, your inner loop is checking upto j = (n - i - 1) - 1. Instead of doing that, try to run the inner loop upto when j + 1 is the last element in the array (so that it checks every element in the array in every iteration of i).

After doing that, you would still have to figure out and adjust the highlighting and number of iterations for the outer loop (i) accordingly so that the highlighting looks correct.

I made these changes in your code and it worked.