Build a Sorting Visualizer - Build a Sorting Visualizer

[JacoBEAR999]

The screenshot above is my current preview, I believe I got all the red dotted lines added correctly, and I think it works exactly like the example.
Current Javascript:

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(container, arr) {
container.innerHTML = '';
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 (index < arr.length - 1 && arr[index] > arr[index + 1]) {
[arr[index], arr[index + 1]] = [arr[index + 1], arr[index]];
}
}

function highlightCurrentEls(container, index) {
const spans = container.getElementsByTagName('span');
Array.from(spans).forEach((span, i) => {
if (i === index || i === index + 1) {
span.style.border = '2px dashed red';
} else {
span.style.border = '';
}
});
}

document.addEventListener('DOMContentLoaded', () => {
const generateBtn = document.getElementById('generate-btn');
const sortBtn = document.getElementById('sort-btn');
const startingContainer = document.getElementById('starting-array');
const arrayContainer = document.getElementById('array-container');

let startingArray = [];

generateBtn.addEventListener('click', () => {
arrayContainer.innerHTML = '';

  startingArray = generateArray();
  startingContainer.innerHTML = '';
  fillArrContainer(startingContainer, startingArray);
  highlightCurrentEls(startingContainer, 0);
  highlightCurrentEls(startingContainer, 1);
});

sortBtn.addEventListener('click', () => {
if (startingArray.length === 0) {
alert("Please generate an array first.");
return;
}

  arrayContainer.innerHTML = '';

  let sortedArray = [...startingArray];
  let steps = [sortedArray.slice()];

  highlightCurrentEls(startingContainer, 0);
  highlightCurrentEls(startingContainer, 1);

  for (let i = 0; i < sortedArray.length; i++) {
      for (let j = 0; j < sortedArray.length - 1; j++) {
          highlightCurrentEls(startingContainer, j);
          highlightCurrentEls(startingContainer, j + 1);

          swapElements(sortedArray, j);

          steps.push(sortedArray.slice());
      }
  }

  const startingArrayContainer = generateContainer();
  fillArrContainer(startingArrayContainer, startingArray);
  highlightCurrentEls(startingArrayContainer, 0);
  highlightCurrentEls(startingArrayContainer, 1);
  arrayContainer.appendChild(startingArrayContainer);

  steps.forEach((step, index) => {
      const stepContainer = generateContainer();
      fillArrContainer(stepContainer, step);
      highlightCurrentEls(stepContainer, index % (step.length - 1));
      highlightCurrentEls(stepContainer, (index % (step.length - 1)) + 1);
      arrayContainer.appendChild(stepContainer);
  });                
  
  const sortedArrayContainer = generateContainer();
  fillArrContainer(sortedArrayContainer, sortedArray);
  highlightCurrentEls(sortedArrayContainer, 0);
  highlightCurrentEls(sortedArrayContainer, 1);
  arrayContainer.appendChild(sortedArrayContainer);
});
});

My HTML and CSS are the same as before, I just changed my CSS.

[pkdvalis]

That does look better.

Here is the screenshot I gave you previously which was generated using the example project linked in the instructions.

If you pass this same array to your function, do you get the exact same result? (same number of steps?)

Some problems with your screenshot:

• Red Boxes do not start at the first two numbers
• 30 and 7 are compared but then 30 and 89 are swapped.
• It looks like the boxes are AFTER the two numbers being compared
• When 89 and 15 are compared and swapped the red boxes are on 15 and 30

[JacoBEAR999]

@pkdvalis sorry for responding so late, but I decided to take a break for the rest of the day yesterday.

I kind of made step 21 start passing, but 15 stopped passing, you will understand why when I show you from the preview:

Now my console says this:

Besides the obvious problem, I don’t think that there is anything else wrong with it. Whenever I tried fixing it, test 15 passed, but test 21 stopped passing. So I’m at a major roadblock here, and I don’t know how to fix it.

[pkdvalis]

Don’t worry about the tests. Don’t read the tests. Your program doesn’t work yet, so you already know it won’t pass the tests.

When it works exactly as it’s supposed to then you should investigate the tests.

Do you have any idea why every single number is highlighted red?

[JacoBEAR999]

Okay, you are correct about that. Perhaps it involves the fillArrContainer function.

Current Javascript (sorry I didn’t add it before, I forgot to):

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(container, arr) {
container.innerHTML = '';
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 (index < arr.length - 1 && arr[index] > arr[index + 1]) {
[arr[index], arr[index + 1]] = [arr[index + 1], arr[index]];
}
}

function highlightCurrentEls(container, index1, index2) {
const spans = container.getElementsByTagName('span');
Array.from(spans).forEach((span, i) => {
if (i === index1 || i === index2) {
span.style.border = '2px dashed red';
} else {
span.style.border = '';
}
});
}

document.addEventListener('DOMContentLoaded', () => {
const generateBtn = document.getElementById('generate-btn');
const sortBtn = document.getElementById('sort-btn');
const startingContainer = document.getElementById('starting-array');
const arrayContainer = document.getElementById('array-container');

let startingArray = [];

generateBtn.addEventListener('click', () => {
arrayContainer.innerHTML = '';
startingArray = generateArray();
startingContainer.innerHTML = '';
fillArrContainer(startingContainer, startingArray);
highlightCurrentEls(startingContainer, 0, 1);
});

sortBtn.addEventListener('click', () => {
if (startingArray.length === 0) {
alert("Please generate an array first.");
return;
}

  arrayContainer.innerHTML = '';

  let sortedArray = [...startingArray];
  let steps = [sortedArray.slice()];

  highlightCurrentEls(startingContainer, 0, 1);

  for (let i = 0; i < sortedArray.length; i++) {
      for (let j = 0; j < sortedArray.length - 1; j++) {
          highlightCurrentEls(startingContainer, j, j + 1);

          swapElements(sortedArray, j);

          steps.push(sortedArray.slice());
      }
  }

  const startingArrayContainer = generateContainer();
  fillArrContainer(startingArrayContainer, startingArray);
  highlightCurrentEls(startingArrayContainer, 0, 1);
  arrayContainer.appendChild(startingArrayContainer);

  steps.forEach((step, index) => {
      const stepContainer = generateContainer();
      fillArrContainer(stepContainer, step);
      highlightCurrentEls(stepContainer, index % (step.length - 1), (index % (step.length - 1)) + 1);
      arrayContainer.appendChild(stepContainer);
  });                
  
  const sortedArrayContainer = generateContainer();
  fillArrContainer(sortedArrayContainer, sortedArray);
  highlightCurrentEls(sortedArrayContainer, 0, 1);
  arrayContainer.appendChild(sortedArrayContainer);
});
});

I also worked on the code above a little bit, here’s the version before I tweaked it if you want it:

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(container, arr) {
container.innerHTML = '';
arr.forEach((num, index) => {
const span = document.createElement('span');
span.textContent = num;
if (index !== arr.length - 1) {
span.style.border = '2px dashed red';
}
container.appendChild(span);
});
}

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

function swapElements(arr, index) {
if (index < arr.length - 1 && arr[index] > arr[index + 1]) {
[arr[index], arr[index + 1]] = [arr[index + 1], arr[index]];
}
}

function highlightCurrentEls(container, index1, index2) {
const spans = container.getElementsByTagName('span');
Array.from(spans).forEach((span, i) => {
if (i === index1 || i === index2) {
span.style.border = '2px dashed red';
} else {
span.style.border = '2px dashed red';
}
});
}

document.addEventListener('DOMContentLoaded', () => {
const generateBtn = document.getElementById('generate-btn');
const sortBtn = document.getElementById('sort-btn');
const startingContainer = document.getElementById('starting-array');
const arrayContainer = document.getElementById('array-container');

let startingArray = [];

generateBtn.addEventListener('click', () => {
// Requirement 17: When #starting-array already contains a generated array or #array-container contains the sorted array, clicking the #generate-btn should remove other elements in the #array-container, leaving only #starting-array with newly generated numbers.
arrayContainer.innerHTML = '';
startingArray = generateArray();
startingContainer.innerHTML = '';
fillArrContainer(startingContainer, startingArray);
highlightCurrentEls(startingContainer, 0, 1);
});

sortBtn.addEventListener('click', () => {
if (startingArray.length === 0) {
alert("Please generate an array first.");
return;
}

  arrayContainer.innerHTML = '';

  let sortedArray = [...startingArray];
  let steps = [sortedArray.slice()];

  // Requirement 21: After you click #sort-btn, #starting-array should represent the starting step with the initial array and the first two integers highlighted using highlightCurrentEls.
  highlightCurrentEls(startingContainer, 0, 1);

  for (let i = 0; i < sortedArray.length; i++) {
      for (let j = 0; j < sortedArray.length - 1; j++) {
          // Requirement 20: When you click the #sort-btn, you should make use of the highlightCurrentEls function to highlight the elements being compared in each step.
          highlightCurrentEls(startingContainer, j, j + 1);

          swapElements(sortedArray, j);

          steps.push(sortedArray.slice());
      }
  }

  // Requirement 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.
  // Requirement 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.
  const startingArrayContainer = generateContainer();
  fillArrContainer(startingArrayContainer, startingArray);
  highlightCurrentEls(startingArrayContainer, 0, 1);
  arrayContainer.appendChild(startingArrayContainer);

  steps.forEach((step, index) => {
      const stepContainer = generateContainer();
      fillArrContainer(stepContainer, step);
      highlightCurrentEls(stepContainer, index % (step.length - 1), (index % (step.length - 1)) + 1);
      arrayContainer.appendChild(stepContainer);
  });                
  
  const sortedArrayContainer = generateContainer();
  fillArrContainer(sortedArrayContainer, sortedArray);
  highlightCurrentEls(sortedArrayContainer, 0, 1);
  arrayContainer.appendChild(sortedArrayContainer);
});
});

[JacoBEAR999]

Can anyone still help me?

[pkdvalis]

What have you done to troubleshoot your code? You never answer this question you just post updated code.

There are no console.log() lines in your code. What are you doing to troubleshoot?

@JacoBEAR999

Perhaps it involves the fillArrContainer function.

What does your fillArrContainer function do?

[JacoBEAR999]

Good morning @pkdvalis,
My fillArrContainer function is supposed to take a container and fill it with numbers from an array, showing each number separately.
You are right about the console.log() not being added to troubleshoot, I don’t know what I was thinking then.
Right now, my console says this when I generate the array:

My console says this when I sort it:

My current Javascript is the same, I just added console.log() lines at the end:

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

function generateArray() {
const array = [];
for (let i = 0; i < 5; i++) {
array.push(generateElement());
}
console.log("Generated array:", array);
return array;
}

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

function fillArrContainer(container, arr) {
console.log("Filling container with array:", arr);
container.innerHTML = '';
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 (index < arr.length - 1 && arr[index] > arr[index + 1]) {
console.log("Swapping elements at index ${index}: ${arr[index]} and ${arr[index + 1]}");
[arr[index], arr[index + 1]] = [arr[index + 1], arr[index]];
} else {
console.warn("No swap needed for index ${index}: ${arr[index]} and ${arr[index + 1]}");
}
}

function highlightCurrentEls(container, index1, index2) {
const spans = container.getElementsByTagName('span');
Array.from(spans).forEach((span, i) => {
if (i === index1 || i === index2) {
span.style.border = '2px dashed red';
} else {
span.style.border = '';
}
});
}

document.addEventListener('DOMContentLoaded', () => {
const generateBtn = document.getElementById('generate-btn');
const sortBtn = document.getElementById('sort-btn');
const startingContainer = document.getElementById('starting-array');
const arrayContainer = document.getElementById('array-container');

let startingArray = [];

generateBtn.addEventListener('click', () => {
console.log("Generate button clicked.");
arrayContainer.innerHTML = '';
startingArray = generateArray();
startingContainer.innerHTML = '';
fillArrContainer(startingContainer, startingArray);
highlightCurrentEls(startingContainer, 0, 1);
});

sortBtn.addEventListener('click', () => {
console.log("Sort button clicked.");
if (startingArray.length === 0) {
console.error("Error: No array generated. Please generate an array first.");
alert("Please generate an array first.");
return;
}

  arrayContainer.innerHTML = '';

  let sortedArray = [...startingArray];
  let steps = [sortedArray.slice()];

  highlightCurrentEls(startingContainer, 0, 1);
  console.log("Starting sort with array:", sortedArray);

  for (let i = 0; i < sortedArray.length; i++) {
      for (let j = 0; j < sortedArray.length - 1; j++) {
          highlightCurrentEls(startingContainer, j, j + 1);

          swapElements(sortedArray, j);
          console.log("Current state of array after swap:", sortedArray);

          steps.push(sortedArray.slice());
      }
  }

  const startingArrayContainer = generateContainer();
  fillArrContainer(startingArrayContainer, startingArray);
  highlightCurrentEls(startingArrayContainer, 0, 1);
  arrayContainer.appendChild(startingArrayContainer);

  steps.forEach((step, index) => {
      const stepContainer = generateContainer();
      fillArrContainer(stepContainer, step);
      highlightCurrentEls(stepContainer, index % (step.length - 1), (index % (step.length - 1)) + 1);
      arrayContainer.appendChild(stepContainer);
      console.log(`Step ${index + 1}:`, step);
  });                
  
  const sortedArrayContainer = generateContainer();
  fillArrContainer(sortedArrayContainer, sortedArray);
  highlightCurrentEls(sortedArrayContainer, 0, 1);
  arrayContainer.appendChild(sortedArrayContainer);
  console.log("Final sorted array:", sortedArray);
});
});

Let me know if you need anything else.

[pkdvalis]

This is great, we are getting some information. What does this output tell you?

@JacoBEAR999

My fillArrContainer function is supposed to take a container and fill it with numbers from an array, showing each number separately.

Which function is related to highlighting the numbers?

[JacoBEAR999]

The highlightCurrentEls function does that. The function is supposed to wrap <span> elements that have their current indexes match index1 or index2 in the red dotted text.

[pkdvalis]

Can you use console.log() there to find out why it’s highlighting every single number and not just the numbers being compared?

[JacoBEAR999]

Okay, now that I’ve added the console.log() lines, here’s the console when I generate an array:

Here’s the console when I sort the array:

My Javascript code is the same, I just added the console.log()s to the highlightCurrentEls function:

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

function generateArray() {
const array = [];
for (let i = 0; i < 5; i++) {
array.push(generateElement());
}
console.log("Generated array:", array);
return array;
}

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

function fillArrContainer(container, arr) {
console.log("Filling container with array:", arr);
container.innerHTML = '';
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 (index < arr.length - 1 && arr[index] > arr[index + 1]) {
console.log("Swapping elements at index ${index}: ${arr[index]} and ${arr[index + 1]}");
[arr[index], arr[index + 1]] = [arr[index + 1], arr[index]];
} else {
console.warn("No swap needed for index ${index}: ${arr[index]} and ${arr[index + 1]}");
}
}

function highlightCurrentEls(container, index1, index2) {
console.log("Highlighting elements at indices ${index1} and ${index2}.");
const spans = container.getElementsByTagName('span');
console.log("Total spans found: ${spans.length}");

Array.from(spans).forEach((span, i) => {
if (i === index1 || i === index2) {
span.style.border = '2px dashed red';
console.log("Highlighted span at index ${i}: ${span.textContent}");
} else {
span.style.border = '';
}
});
}

document.addEventListener('DOMContentLoaded', () => {
const generateBtn = document.getElementById('generate-btn');
const sortBtn = document.getElementById('sort-btn');
const startingContainer = document.getElementById('starting-array');
const arrayContainer = document.getElementById('array-container');

let startingArray = [];

generateBtn.addEventListener('click', () => {
console.log("Generate button clicked.");
arrayContainer.innerHTML = '';
startingArray = generateArray();
startingContainer.innerHTML = '';
fillArrContainer(startingContainer, startingArray);
highlightCurrentEls(startingContainer, 0, 1);
});

sortBtn.addEventListener('click', () => {
console.log("Sort button clicked.");
if (startingArray.length === 0) {
console.error("Error: No array generated. Please generate an array first.");
alert("Please generate an array first.");
return;
}

  arrayContainer.innerHTML = '';

  let sortedArray = [...startingArray];
  let steps = [sortedArray.slice()];

  highlightCurrentEls(startingContainer, 0, 1);
  console.log("Starting sort with array:", sortedArray);

  for (let i = 0; i < sortedArray.length; i++) {
      for (let j = 0; j < sortedArray.length - 1; j++) {
          highlightCurrentEls(startingContainer, j, j + 1);

          swapElements(sortedArray, j);
          console.log("Current state of array after swap:", sortedArray);

          steps.push(sortedArray.slice());
      }
  }

  const startingArrayContainer = generateContainer();
  fillArrContainer(startingArrayContainer, startingArray);
  highlightCurrentEls(startingArrayContainer, 0, 1);
  arrayContainer.appendChild(startingArrayContainer);

  steps.forEach((step, index) => {
      const stepContainer = generateContainer();
      fillArrContainer(stepContainer, step);
      highlightCurrentEls(stepContainer, index % (step.length - 1), (index % (step.length - 1)) + 1);
      arrayContainer.appendChild(stepContainer);
      console.log(`Step ${index + 1}:`, step);
  });                
  
  const sortedArrayContainer = generateContainer();
  fillArrContainer(sortedArrayContainer, sortedArray);
  highlightCurrentEls(sortedArrayContainer, 0, 1);
  arrayContainer.appendChild(sortedArrayContainer);
  console.log("Final sorted array:", sortedArray);
});
});

[pkdvalis]

I’m not sure if you noticed but the variables in your console.log() strings aren’t working?

It will be pretty difficult to get any information this way.

Don’t just send me the output without looking at it. Interpret it yourself.

[fcc4b6d10c4-b540-4e2]

Please double-check these instructions:

The Bubble Sort algorithm…stops after one cycle completes with no swaps.

9. You should have a function named highlightCurrentEls that takes an HTML element and a numeric index.

Two arguments, not three.

Also, think about how the #starting-array div should be handled as opposed to the additional divs you need to create for the sort.

[JacoBEAR999]

Thank you for your help, @fcc4b6d10c4-b540-4e2 and @pkdvalis, I really appreciate it.
I’ve worked on the code for the past 3 days thinking about what you said, and I believe I’ve gotten close, but the red dotted lines aren’t showing anymore, only on the line that was generated. I’m quite stumped. What should I do?

Current Javascript:

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

function generateArray() {
    const array = [];
    for (let i = 0; i < 5; i++) {
        array.push(generateElement());
    }
    console.log("Generated array:", array);
    return array;
}

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

function fillArrContainer(container, arr) {
    console.log("Filling container with array:", arr);
    container.innerHTML = '';
    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])) {
        console.log(`Swapping elements at index ${index}: ${arr[index]} and ${arr[index + 1]}`);
        [arr[index], arr[index + 1]] = [arr[index + 1], arr[index]];
        return true;
    }
    console.warn(`No swap needed for index ${index}: ${arr[index]} and ${arr[index + 1]}`);
    return false;
}

function highlightCurrentEls(container, index) {
    console.log(`Highlighting elements at index ${index} and ${index + 1}.`);
    const spans = container.getElementsByTagName('span');
    Array.from(spans).forEach((span, i) => {
        if (i === index || i === index + 1) {
            span.style.border = '2px dashed red';
        } else {
            span.style.border = '';
        }
    });
}

document.addEventListener('DOMContentLoaded', () => {
    const generateBtn = document.getElementById('generate-btn');
    const sortBtn = document.getElementById('sort-btn');
    const startingContainer = document.getElementById('starting-array');
    const arrayContainer = document.getElementById('array-container');

    let startingArray = [];

    generateBtn.addEventListener('click', () => {
        console.log("Generate button clicked.");
        startingArray = generateArray();
        fillArrContainer(startingContainer, startingArray);
        highlightCurrentEls(startingContainer, 0);
    });

    sortBtn.addEventListener('click', () => {
        console.log("Sort button clicked.");
        if (startingArray.length === 0) {
            console.error("Error: No array generated. Please generate an array first.");
            alert("Please generate an array first.");
            return;
        }
        
        arrayContainer.innerHTML = '';
        let sortedArray = [...startingArray];
        let steps = [sortedArray.slice()];
        let swapped;

        do {
            swapped = false;
            for (let j = 0; j < sortedArray.length - 1; j++) {
                highlightCurrentEls(startingContainer, j);
                if (swapElements(sortedArray, j)) {
                    swapped = true;
                }
                console.log(`Current state of array after processing index ${j}:`, sortedArray);
                steps.push(sortedArray.slice());
            }
        } while (swapped);

        steps.forEach((step, index) => {
            const stepContainer = generateContainer();
            fillArrContainer(stepContainer, step);
            arrayContainer.appendChild(stepContainer);
            console.log(`Step ${index + 1}:`, step);
        });

        const sortedArrayContainer = generateContainer();
        fillArrContainer(sortedArrayContainer, sortedArray);
        arrayContainer.appendChild(sortedArrayContainer);
        console.log("Final sorted array:", sortedArray);
    });
});

[pkdvalis]

Can you talk about what change you made and why?

What does it do correctly and what isn’t working?

Why do you think it might not be working correctly?

Do you have some log output to prove it?

[fcc4b6d10c4-b540-4e2]

Since you know the borders aren’t being highlighted correctly, why don’t you troubleshoot the function that does that by using console.log() to check whether your code is going where you think it should be going.

[JacoBEAR999]

• Bubble Sort: The logic for sorting is correct in that it allows adjacent elements to change places if they are not in the correct order( swapElements.function)

Highlighting: The highlightCurrentEls function is supposed to show us which elements are being compared during sorting visually.
Although the code by and mostly works as we want it to, but it has hidden bugs, I just don’t know what they are, otherwise it would probably have passed by now.

Console:

Generate button clicked.
Generated array: [ 84, 58, 88, 48, 22 ]
Filling container with array: [ 84, 58, 88, 48, 22 ]
Highlighting elements at index 0 and 1.
Sort button clicked.
Highlighting elements at index 0 and 1.
Swapping elements at index 0: 84 and 58
Current state of array after processing index 0: [ 58, 84, 88, 48, 22 ]
Highlighting elements at index 1 and 2.
No swap needed for index 1: 84 and 88
Current state of array after processing index 1: [ 58, 84, 88, 48, 22 ]
Highlighting elements at index 2 and 3.
Swapping elements at index 2: 88 and 48
Current state of array after processing index 2: [ 58, 84, 48, 88, 22 ]
Highlighting elements at index 3 and 4.
Swapping elements at index 3: 88 and 22
Current state of array after processing index 3: [ 58, 84, 48, 22, 88 ]
Highlighting elements at index 0 and 1.
No swap needed for index 0: 58 and 84
Current state of array after processing index 0: [ 58, 84, 48, 22, 88 ]
Highlighting elements at index 1 and 2.
Swapping elements at index 1: 84 and 48
Current state of array after processing index 1: [ 58, 48, 84, 22, 88 ]
Highlighting elements at index 2 and 3.
Swapping elements at index 2: 84 and 22
Current state of array after processing index 2: [ 58, 48, 22, 84, 88 ]
Highlighting elements at index 3 and 4.
No swap needed for index 3: 84 and 88
Current state of array after processing index 3: [ 58, 48, 22, 84, 88 ]
Highlighting elements at index 0 and 1.
Swapping elements at index 0: 58 and 48
Current state of array after processing index 0: [ 48, 58, 22, 84, 88 ]
Highlighting elements at index 1 and 2.
Swapping elements at index 1: 58 and 22
Current state of array after processing index 1: [ 48, 22, 58, 84, 88 ]
Highlighting elements at index 2 and 3.
No swap needed for index 2: 58 and 84
Current state of array after processing index 2: [ 48, 22, 58, 84, 88 ]
Highlighting elements at index 3 and 4.
No swap needed for index 3: 84 and 88
Current state of array after processing index 3: [ 48, 22, 58, 84, 88 ]
Highlighting elements at index 0 and 1.
Swapping elements at index 0: 48 and 22
Current state of array after processing index 0: [ 22, 48, 58, 84, 88 ]
Highlighting elements at index 1 and 2.
No swap needed for index 1: 48 and 58
Current state of array after processing index 1: [ 22, 48, 58, 84, 88 ]
Highlighting elements at index 2 and 3.
No swap needed for index 2: 58 and 84
Current state of array after processing index 2: [ 22, 48, 58, 84, 88 ]
Highlighting elements at index 3 and 4.
No swap needed for index 3: 84 and 88
Current state of array after processing index 3: [ 22, 48, 58, 84, 88 ]
Highlighting elements at index 0 and 1.
No swap needed for index 0: 22 and 48
Current state of array after processing index 0: [ 22, 48, 58, 84, 88 ]
Highlighting elements at index 1 and 2.
No swap needed for index 1: 48 and 58
Current state of array after processing index 1: [ 22, 48, 58, 84, 88 ]
Highlighting elements at index 2 and 3.
No swap needed for index 2: 58 and 84
Current state of array after processing index 2: [ 22, 48, 58, 84, 88 ]
Highlighting elements at index 3 and 4.
No swap needed for index 3: 84 and 88
Current state of array after processing index 3: [ 22, 48, 58, 84, 88 ]
Filling container with array: [ 84, 58, 88, 48, 22 ]
Step 1: [ 84, 58, 88, 48, 22 ]
Filling container with array: [ 58, 84, 88, 48, 22 ]
Step 2: [ 58, 84, 88, 48, 22 ]
Filling container with array: [ 58, 84, 88, 48, 22 ]
Step 3: [ 58, 84, 88, 48, 22 ]
Filling container with array: [ 58, 84, 48, 88, 22 ]
Step 4: [ 58, 84, 48, 88, 22 ]
Filling container with array: [ 58, 84, 48, 22, 88 ]
Step 5: [ 58, 84, 48, 22, 88 ]
Filling container with array: [ 58, 84, 48, 22, 88 ]
Step 6: [ 58, 84, 48, 22, 88 ]
Filling container with array: [ 58, 48, 84, 22, 88 ]
Step 7: [ 58, 48, 84, 22, 88 ]
Filling container with array: [ 58, 48, 22, 84, 88 ]
Step 8: [ 58, 48, 22, 84, 88 ]
Filling container with array: [ 58, 48, 22, 84, 88 ]
Step 9: [ 58, 48, 22, 84, 88 ]
Filling container with array: [ 48, 58, 22, 84, 88 ]
Step 10: [ 48, 58, 22, 84, 88 ]
Filling container with array: [ 48, 22, 58, 84, 88 ]
Step 11: [ 48, 22, 58, 84, 88 ]
Filling container with array: [ 48, 22, 58, 84, 88 ]
Step 12: [ 48, 22, 58, 84, 88 ]
Filling container with array: [ 48, 22, 58, 84, 88 ]
Step 13: [ 48, 22, 58, 84, 88 ]
Filling container with array: [ 22, 48, 58, 84, 88 ]
Step 14: [ 22, 48, 58, 84, 88 ]
Filling container with array: [ 22, 48, 58, 84, 88 ]
Step 15: [ 22, 48, 58, 84, 88 ]
Filling container with array: [ 22, 48, 58, 84, 88 ]
Step 16: [ 22, 48, 58, 84, 88 ]
Filling container with array: [ 22, 48, 58, 84, 88 ]
Step 17: [ 22, 48, 58, 84, 88 ]
Filling container with array: [ 22, 48, 58, 84, 88 ]
Step 18: [ 22, 48, 58, 84, 88 ]
Filling container with array: [ 22, 48, 58, 84, 88 ]
Step 19: [ 22, 48, 58, 84, 88 ]
Filling container with array: [ 22, 48, 58, 84, 88 ]
Step 20: [ 22, 48, 58, 84, 88 ]
Filling container with array: [ 22, 48, 58, 84, 88 ]
Step 21: [ 22, 48, 58, 84, 88 ]
Filling container with array: [ 22, 48, 58, 84, 88 ]
Final sorted array: [ 22, 48, 58, 84, 88 ]