Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

I don’t know how to pass 18. I’m don’t know what to do.
Thanks in advance.

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
const generateBtn = document.getElementById("generate-btn");
const startingArr = document.getElementById("starting-array");
const arrContainer = document.getElementById("array-container");
const sortBtn = document.getElementById("sort-btn");

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

function generateArray() {
  const array = [];

  for (let i = 0; i < 5; i++) {
    array.push(generateElement());
  }

  return array;
}


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

function fillArrContainer(element, arrayOfInts) {
  element.innerHTML = "";
  return arrayOfInts.forEach(ints => {
    element.innerHTML += `<span>${ints}</span>`
  });
}

function isOrdered(integer1, integer2) {
  return integer1 <= integer2 ? true : false;
}

function swapElements(arrayOfInts, numIndex) {
  if (!isOrdered(arrayOfInts[numIndex], arrayOfInts[numIndex + 1])) {
    [arrayOfInts[numIndex], arrayOfInts[numIndex + 1]] = [arrayOfInts[numIndex + 1], arrayOfInts[numIndex]];
    return true;
  }

  return false;
}


function highlightCurrentEls(elements, index) {
  const childElements = elements.children;
  if (index < childElements.length - 1) {
    childElements[index].style.border = "3px dashed red";
    childElements[index + 1].style.border = "3px dashed red"
  }
}
//-----------------------------------------------------------------------------------------------------------------//


// Event Listeners
generateBtn.addEventListener("click", () => {
  [...arrContainer.children].forEach(children => {
    if (children !== startingArr) children.remove()
  })

  fillArrContainer(startingArr, generateArray());
});

sortBtn.addEventListener("click", () => {
  const startingChildren = [...startingArr.children];
  const realStartArr = startingChildren.map(start => parseInt(start.textContent));

  const indexLength = realStartArr.length;
  highlightCurrentEls(startingArr, 0);


  if (!startingChildren.length) {
    return;
  }

  for (let i = 0; i < indexLength - 1; i++) {
    let swapped = false;

    for (let j = 0; j < indexLength - i - 1; j++) {
      if (swapElements(realStartArr, j)) {
        swapped = true;
      };

      const div = generateContainer();
      fillArrContainer(div, realStartArr);

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

      arrContainer.appendChild(div);
    }

    if (!swapped) {
      break;
    }
  }

  // const endDiv = generateContainer();
  // fillArrContainer(endDiv, realStartArr);
  // arrContainer.appendChild(endDiv);
  // arrContainer.children[arrContainer.children.length - 1].style.border = "3px solid green";
}
);

Your browser information:

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

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

2

Take a look at the example app. Generate and sort an array in the example app. Take a screenshot of that, then use the same array in your code (temporarily hard coded), so you can compare the differences.

3

What I noticed was that in the example project, even if the array is ordered, it loops through the array anyways. In my project it stops the loop.

4

The algorithm stops after one cycle completes with no swaps.

The example app meets the above requirement.

5

But what is making my program stop the loop?

6

And now I’ve encountered another problem. I just uncommented some lines and 19 now became invalid as well. Even if I comment the line again, 19 is not valid

7

did you write the bubble sort yourself?

8

I used W3Schools code and some of the code here in the forum because I didn’t know how do to it by myself.

9

take the time to figure out what the bubble sort do then, it will make it easier to understand how to update things

10

But what I noticed in my code is that the third iteration doesn’t start from the first element but from the second one.

11

yeah, that’s something you need to fix

12

Please log your loop variables. Do those make sense? Also, the starting array should be included as the first div in your sort; you just need to handle it differently.

13

I solved the problem. It was quite different from the original here. But thanks for the help anyways