Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

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

Your code so far

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


/* file: styles.css */


/* file: script.js */

Your browser information:

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

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

2

Make sure the steps your app is taking is exactly like the example app.

Read other threads on this, it’s been answered many times.

If that doesn’t help you’ll need to share your code.

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

function generateArray() {
  return Array.from({ length: 5 }, () => generateElement());
}

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])) {
    [arr[index], arr[index + 1]] = [arr[index + 1], arr[index]];
  }
}

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

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

let currentArray = [];
generateBtn.addEventListener('click', () => {
  Array.from(arrayContainerEl.children).forEach(child => {
    if (child.id !== 'starting-array') child.remove();
  });

  currentArray = generateArray();

  fillArrContainer(startingArrayEl, currentArray);

  highlightCurrentEls(startingArrayEl, 0);
});

sortBtn.addEventListener('click', () => {

  Array.from(arrayContainerEl.children).forEach(child => {
    if (child.id !== 'starting-array') child.remove();
  });

  const arr = [...currentArray]; 
  const steps = [];

  steps.push({ arr: [...arr] });

  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - 1 - i; j++) {

      steps.push({ arr: [...arr], highlight: j });

      swapElements(arr, j);
    }
  }

  steps.push({ arr: [...arr] });

  steps.forEach(step => {
    const container = generateContainer(); 
    container.classList.add('array-container');

    fillArrContainer(container, step.arr);

    if (step.highlight !== undefined) {
      highlightCurrentEls(container, step.highlight); 
    }

    arrayContainerEl.appendChild(container);
  });

  fillArrContainer(startingArrayEl, currentArray);
  highlightCurrentEls(startingArrayEl, 0);
});
4

Can you confirm this?

5

Do you still need help with this challenge? I see that you’ve posted your code twice, but I don’t see any questions or comments.