Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

My Sorting Visualization has problems with numbers 15, 18 and 19.

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

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(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 children = element.children;
  if (children[index] && children[index + 1]) {
    children[index].style.borderStyle = "dashed";
    children[index].style.borderColor = "red";
    children[index].style.borderWidth = "3px";

    children[index + 1].style.borderStyle = "dashed";
    children[index + 1].style.borderColor = "red";
    children[index + 1].style.borderWidth = "3px";
  }
}


generateBtn.addEventListener("click", () => {
  currentArray = generateArray();

  
  arrayContainer.innerHTML = "";
  arrayContainer.appendChild(startingArrayEl);

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


sortBtn.addEventListener("click", () => {
  if (currentArray.length === 0) return;

  const arr = [...currentArray];
  const n = arr.length;

  
  arrayContainer.innerHTML = "";
  arrayContainer.appendChild(startingArrayEl);
  fillArrContainer(startingArrayEl, arr);
  highlightCurrentEls(startingArrayEl, 0);

  
  for (let pass = 0; pass < n - 1; pass++) {
    for (let i = 0; i < n - 1 - pass; i++) {

      
      const compareDiv = generateContainer();
      fillArrContainer(compareDiv, arr);
      highlightCurrentEls(compareDiv, i);
      arrayContainer.appendChild(compareDiv);

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

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

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

2

const generateBtn = document.getElementById(“generate-btn”);

const sortBtn = document.getElementById(“sort-btn”);

const arrayContainer = document.getElementById(“array-container”);

const startingArrayEl = document.getElementById(“starting-array”);

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(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 children = element.children;

if (children[index] && children[index + 1]) {

children\[index\].style.borderStyle = "dashed";

children\[index\].style.borderColor = "red";

children\[index\].style.borderWidth = "3px";



children\[index + 1\].style.borderStyle = "dashed";

children\[index + 1\].style.borderColor = "red";

children\[index + 1\].style.borderWidth = "3px";

}

}

generateBtn.addEventListener(“click”, () => {

currentArray = generateArray();

arrayContainer.innerHTML = “”;

arrayContainer.appendChild(startingArrayEl);

fillArrContainer(startingArrayEl, currentArray);

highlightCurrentEls(startingArrayEl, 0);

});

sortBtn.addEventListener(“click”, () => {

if (currentArray.length === 0) return;

const arr = […currentArray];

const n = arr.length;

arrayContainer.innerHTML = “”;

arrayContainer.appendChild(startingArrayEl);

fillArrContainer(startingArrayEl, arr);

highlightCurrentEls(startingArrayEl, 0);

for (let pass = 0; pass < n - 1; pass++) {

for (let i = 0; i < n - 1 - pass; i++) {



  

  const compareDiv = generateContainer();

  fillArrContainer(compareDiv, arr);

  highlightCurrentEls(compareDiv, i);

  arrayContainer.appendChild(compareDiv);



  

  if (!isOrdered(arr\[i\], arr\[i + 1\])) {

    swapElements(arr, i);



    const swapDiv = generateContainer();

    fillArrContainer(swapDiv, arr);

    arrayContainer.appendChild(swapDiv);

  }

}

}

});

3

Please do not create duplicate topics for the same challenge/project question(s). If you need more help then respond back to the original topic you created with your follow up questions and/or your updated code and question.
This duplicate topic has been unlisted.

Thank you.