Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

Hello, World!
Test 18 keeps sending error, I know that the problem is within the selecting criteria, but it seems to condition the prompt just fine. I’ll list my code below and after it, an additional sub-code that did not do what it was supposed to when added, while was hoped to fix it. If anyone knows the issue, would appreciate their efforts.

Your code so far

let currentArray = [];

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(container, arr) {
  container.innerHTML = ""; // Clear existing content
  arr.forEach(num => {
    const span = document.createElement("span");
    span.textContent = num;
    container.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(container, index) {
  const children = container.children;
  if (index < children.length) {
    children[index].style.border = "2px dashed red";
  }
  if (index + 1 < children.length) {
    children[index + 1].style.border = "2px dashed red";
  }
}

document.getElementById("generate-btn").addEventListener("click", function () {
  const arrayContainer = document.getElementById("array-container");
  arrayContainer.innerHTML = "";

  const startingArrayDiv = document.createElement("div");
  startingArrayDiv.id = "starting-array";
  arrayContainer.appendChild(startingArrayDiv);

  currentArray = generateArray();
  fillArrContainer(startingArrayDiv, currentArray);
});

document.getElementById("sort-btn").addEventListener("click", function () {
  if (currentArray.length === 0) return;
  const arrayContainer = document.getElementById("array-container");

  const startingArrayDiv = document.getElementById("starting-array");
  fillArrContainer(startingArrayDiv, currentArray);
  highlightCurrentEls(startingArrayDiv, 0);
  
  let arr = currentArray.slice();
  const n = arr.length;
  let comparisonCount = 0; // total comparisons performed

  for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
      comparisonCount++;
      if (comparisonCount === 1) {
        if (!isOrdered(arr[j], arr[j + 1])) {
          swapElements(arr, j);
        }
      } 
      else  {
        const stepContainer = generateContainer();
        fillArrContainer(stepContainer, arr);
        highlightCurrentEls(stepContainer, j);
        arrayContainer.appendChild(stepContainer);

        if (!isOrdered(arr[j], arr[j + 1])) {
          swapElements(arr, j);
          
        }
      }  
    }
  }

  const finalContainer = generateContainer();
  fillArrContainer(finalContainer, arr);
  arrayContainer.appendChild(finalContainer);
});

//THAT'S THE CODE
//NOW THIS IS THE SUB-CODE I TRIED WITH BUT STILL DIDN'T //WORK, MAYBE THE PROBLEM IS WITH HOW THE RESULT OF //FREECODECAMP IS DESIGNED TO WORK! 
//SUB-CODE: 
if(!arr[j+3]) {
if(!isOrdered(arr[j+1], arr[j+2]){
swapElements(arr,j)
}
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

2

You shouldn’t have a global variable like this.

Also, you are still not replicating the visual output given in the example project, as you were told in your last thread.

Your code is incorrect.

3

okay, so i suppose the issue is in ( j < n - i - 1) as well. is that right?
what’s the solution to the error we are having?

4

I cannot fix the code for you. Have you run the example? Can you say what the difference is between the example and your output?

5

is this your second topic on this challenge? I did not mention this in this topic

you should not open multiple topics for the same challenge

6

Yes of course I ran the example, and the difference is when the two compared span elements get to be one index before the last span element, the next comparison starts the next line from the beginning, not accounting for the last value which has to be compared as well, i tried adding a sub-code for that, but it still doesn’t work. The example needs an output that compares every single two elements in the created div, however, the code i put fails to do so, for a reason I am yet to know.
I cannot add more replies as I’m a new member, but this is my reply to your last reply: It is mostly by myself, but only to finish faster I associate with AI tools, but still able to write them all. otherwise I wouldnt’ have completed the workshops ^^

7

if you are not aware of the difference, you may have not implemented the BubbleSort yourself

you are using an optimized version, how did you arrive to the conclusion that you could skip those comparisons? and how are you identifying the comparisons to skip?

1 Like
8

This is my only topic, first one was already deleted.
I took this line ( j < n - i - 1) from your answer to another person on another topic…
They will skip as the array is only defined of 5 elements (span) and the loop is to keep iterating over all div elements until reaching i * j - 1 . which is connected to n . I completely understand, though I’m not getting the answer I want here.

9

How did you design your overall approach?

You should not ask to have topics deleted so you can make duplicate topics.

11

Finishing the curriculum in a month probably means you are moving too quickly. All of the code for these practice exercises should be written by you. Getting passing tests is not the point - practicing problem solving in code is the point, and not writing all of the code yourself bypasses the purpose of the exercises.

12

It is best to make a new reply instead of a bunch of edits to a single post.

13

if you understand that that is what making you skip comparisons, what is stopping you from changing it?