Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

i am still failing this test any help.
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.

Your code so far

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


/* file: styles.css */


/* file: script.js */
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((value) => {
    const span = document.createElement("span");
    span.textContent = String(value);
    element.appendChild(span);
  });
}

function isOrdered(first, second) {
  return first <= second;
}

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) {
  Array.from(element.children).forEach((child) => {
    child.style.border = "";
  });

  const current = element.children[index];
  const next = element.children[index + 1];
  const borderStyle = "2px dashed red";

  if (current) {
    current.style.border = borderStyle;
  }
  if (next) {
    next.style.border = borderStyle;
  }
}

function clearArrayContainerExceptStarting(
  arrayContainerEl, startingArrayEl) {
  Array.from(arrayContainerEl.children).forEach((child) => {
    if (child !== startingArrayEl) {
      arrayContainerEl.removeChild(child);
    }
  });
}

function setupHandlers() {
  const generateBtn = document.getElementById("generate-btn");
  const sortBtn = document.getElementById("sort-btn");
  const startingArrayEl = document.getElementById("starting-array");
  const arrayContainerEl = document.getElementById("array-container");
// this "if" block checks if these elements exist
  if (generateBtn && startingArrayEl && arrayContainerEl) {
    generateBtn.addEventListener("click", () => {
      const arr = generateArray(); // generates array with 5 random numbers between 1 and 100
      if (startingArrayEl.parentElement !== arrayContainerEl) {
        arrayContainerEl.innerHTML = "";
        arrayContainerEl.appendChild(startingArrayEl);
      }
      fillArrContainer(startingArrayEl, arr);
      clearArrayContainerExceptStarting(arrayContainerEl, startingArrayEl);
    });
  }

  if (sortBtn && startingArrayEl && arrayContainerEl) {
    sortBtn.addEventListener("click", () => {
      const initialArr = Array.from(startingArrayEl.children).map((span) =>
        Number(span.textContent)
      );
      const n = initialArr.length;
      if (n !== 5) {
        return;
      }

      const steps = [];
      const highlightIndices = [];
      const currentArr = initialArr.slice();

      steps.push(currentArr.slice());//[123] =>[1,2,3]
      highlightIndices.push(0);// this highlites 0 and 1 index element

      for (let i = 0; i < n - 1; i ++ ) {
        for (let j = 0; j < n - 1 - i; j ++) {
          swapElements(currentArr, j);
          steps.push(currentArr.slice());
          highlightIndices.push(j);
        }
      }

      steps.push(currentArr.slice());
      highlightIndices.push(null);

      arrayContainerEl.innerHTML = "";
      if (startingArrayEl.parentElement !== arrayContainerEl) {
        arrayContainerEl.appendChild(startingArrayEl);
      }

      steps.forEach((step, index) => {
        const container = index === 0 ? startingArrayEl : generateContainer();
        fillArrContainer(container, step);
        if (highlightIndices[index] !== null) {
          highlightCurrentEls(container, highlightIndices[index]);
        }
        if (index !== 0) {
          arrayContainerEl.appendChild(container);
        }
      });
    });
  }
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", setupHandlers);
} else {
  setupHandlers();
}

Your browser information:

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

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

2

This error usually happens because your algorithm doesn’t match the one they asked for.
You can look at the sample application and compare how many divs they create to the ones your application makes to see what is the difference as a start to understand.

Let us know if you can see the difference or if you need help with that?

1 Like