Build a Sorting Visualizer - Build a Sorting Visualizer

JavaScript
1

Tell us what’s happening:

I am confirmed that my solution matches the example project totally even with details, but this solution still can’t pass test 18, could you please find out what’s wrong. Thanks!

Your code so far

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


/* file: styles.css */


/* file: script.js */
function generateElement() {
  return Math.ceil(100 * Math.random())
}

function generateArray() {
  let arr = [];
  for(let i=0; i<5; i++) {
    arr.push(generateElement())
  }
  return arr;
}

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

function fillArrContainer(htmlElement, arr) {
  htmlElement.innerHTML = '';
  arr.forEach(ele => htmlElement.innerHTML += `<span>${ele}</span>`)
}

function isOrdered(intFormer, intLatter) {
  return intFormer <= intLatter;
}

function swapElements(intsArr, index) {
  if (!isOrdered(intsArr[index], intsArr[index+1])) {
    const indexIntOriginal = intsArr[index];
    intsArr[index] = intsArr[index + 1];
    intsArr[index + 1] = indexIntOriginal;
  }
}

function highlightCurrentEls(htmlElement, index) {
  const allSpans = Array.from(htmlElement.children);
  allSpans.forEach(span => span.style.border = '');
  
  if (allSpans[index] && allSpans[index + 1]) {
    const highlightStyle = 'border: 2px dashed red;';
    allSpans[index].style.cssText = highlightStyle;
    allSpans[index + 1].style.cssText = highlightStyle;
  }
}

function isArrSorted(arr) {
  for (let i=0; i<arr.length-1; i++) {
    if (arr[i] > arr[i+1]) return false;
  }
  return true;
}


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


sortBtn.classList.add('hidden');


generateBtn.addEventListener('click', () => {
  sortBtn.classList.remove('hidden');

  const arrDivs = arrContainer.querySelectorAll('div');
  Array.from(arrDivs).forEach(div => {
    if (div.id !== "starting-array") {
      div.remove();
    }
  })
  startingArr.innerHTML = '';

  const arr = generateArray();
  fillArrContainer(startingArr, arr);
})


sortBtn.addEventListener('click', () => {
  sortBtn.classList.add('hidden');
  highlightCurrentEls(startingArr, 0);
   
  const spans = startingArr.querySelectorAll('span');
  const arr = [];
  Array.from(spans).forEach(span => {
    arr.push(Number(span.textContent));
  });
  
  swapElements(arr, 0);
  for (let i=1; i<arr.length-1; i++) {
    const stepDiv = generateContainer();
    fillArrContainer(stepDiv, arr);
    highlightCurrentEls(stepDiv, i);
    arrContainer.appendChild(stepDiv);
    swapElements(arr, i);
  }
  
  while (!isArrSorted(arr)) {
    for (let i=0; i<arr.length-1; i++) {
      const stepDiv = generateContainer();
      fillArrContainer(stepDiv, arr);
      highlightCurrentEls(stepDiv, i);
      arrContainer.appendChild(stepDiv);
      swapElements(arr, i);
    }
  }

  const sortedDiv = generateContainer();
  fillArrContainer(sortedDiv, arr);
  sortedDiv.style.border = '4px solid darkgreen';
  arrContainer.appendChild(sortedDiv);
})

Challenge Information:

Build a Sorting Visualizer - Build a Sorting Visualizer

2

is it maybe because you are not adding “original” array as a starting div at top without “sorting visualizer”, worth a try if you havent already, happy coding :slight_smile:

1 Like
3

What happens when the array is fully sorted and you click the “Sort” button again?

1 Like
5

when clicking sortBtn the first time, sortBtn itself will be hidden, so users don’t have the chance to click sortBtn the second time.

btw, if it happens, the original array will be sorted again, and the corresponding divs will be generated and rendered again.

6

when clicking sortBtn, startingArr has already been there and highlighted.
could you please provide your solution code for reference please?

7

Since you didn’t share your CSS, I had to use the default code to test. So, of course, your .hidden class was ignored when the code processed, hence the question.

BTW, we are here to guide you, not give you the solution. You’ll need to work that out yourself.

The algorithm stops after one cycle completes with no swaps.

Your code stops when the array is sorted, but it’s supposed to stop after one cycle with no swaps. Look into that, please.

image
image192×465 9.47 KB

1 Like
9

Thanks very much for guiding!

I forgot to share my CSS, which includes “ .hidden { display: none; } ”.

I’ve tried what you advised.

Firstly, when clicking generateBtn, sortBtn will be showed and enabled, and when clicking sortBtn, sortBtn itself will be hidden and disabled.

Secondly, after “ while (!isArrSorted(arr)) ” finishes, one cycle with no swaps is added.

All in all, my code can pass the test.

Just for anyone to reference, I put my JS below.

script.js

function generateElement() {

return Math.ceil(100 * Math.random())

}

function generateArray() {

let arr = ;

for(let i=0; i<5; i++) {

arr.push(generateElement())

}

return arr;

}

function generateContainer() {

return document.createElement(‘div’);

}

function fillArrContainer(htmlElement, arr) {

htmlElement.innerHTML = ‘’;

arr.forEach(ele => htmlElement.innerHTML += `${ele}`)

}

function isOrdered(intFormer, intLatter) {

return intFormer <= intLatter;

}

function swapElements(intsArr, index) {

if (!isOrdered(intsArr[index], intsArr[index+1])) {

const indexIntOriginal = intsArr\[index\];

intsArr\[index\] = intsArr\[index + 1\];

intsArr\[index + 1\] = indexIntOriginal;

}

}

function highlightCurrentEls(htmlElement, index) {

const allSpans = Array.from(htmlElement.children);

allSpans.forEach(span => span.style.border = ‘’);

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

const highlightStyle = 'border: 2px dashed red;';

allSpans\[index\].style.cssText = highlightStyle;

allSpans\[index + 1\].style.cssText = highlightStyle;

}

}

function isArrSorted(arr) {

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

if (arr\[i\] > arr\[i+1\]) return false;

}

return true;

}

const arrContainer = document.getElementById(‘array-container’);

const startingArr = document.getElementById(‘starting-array’);

const generateBtn = document.getElementById(‘generate-btn’);

const sortBtn = document.getElementById(‘sort-btn’);

sortBtn.classList.add(‘hidden’);

generateBtn.addEventListener(‘click’, () => {

sortBtn.classList.remove(‘hidden’);

sortBtn.disabled = false;

const arrDivs = arrContainer.querySelectorAll(‘div’);

Array.from(arrDivs).forEach(div => {

if (div.id !== "starting-array") {

  div.remove();

}

})

startingArr.innerHTML = ‘’;

const arr = generateArray();

fillArrContainer(startingArr, arr);

})

sortBtn.addEventListener(‘click’, () => {

sortBtn.classList.add(‘hidden’);

sortBtn.disabled = true;

highlightCurrentEls(startingArr, 0);

const spans = startingArr.querySelectorAll(‘span’);

const arr = ;

Array.from(spans).forEach(span => {

arr.push(Number(span.textContent));

});

swapElements(arr, 0);

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

const stepDiv = generateContainer();

fillArrContainer(stepDiv, arr);

highlightCurrentEls(stepDiv, i);

arrContainer.appendChild(stepDiv);

swapElements(arr, i);

}

while (!isArrSorted(arr)) {

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

  const stepDiv = generateContainer();

  fillArrContainer(stepDiv, arr);

  highlightCurrentEls(stepDiv, i);

  arrContainer.appendChild(stepDiv);

  swapElements(arr, i);

}

}

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

const stepDiv = generateContainer();

fillArrContainer(stepDiv, arr);

highlightCurrentEls(stepDiv, i);

arrContainer.appendChild(stepDiv);

swapElements(arr, i);

}

const sortedDiv = generateContainer();

fillArrContainer(sortedDiv, arr);

sortedDiv.style.border = ‘4px solid darkgreen’;

arrContainer.appendChild(sortedDiv);

})

10

check in forum there are others who also had similar problems go through those if you haven’t already, but as mentioned by fcc4b6d10c4-b540-4e2 look into that, also your implementation still allows “sort” for already sorted array, which basically pollutes container, you might want to look into that as well, happy coding :slight_smile:

1 Like
12

Thanks for your advice! I’ve add two more lines of code:

when clicking generateBtn, sortBtn will be showed and enabled, and when clicking sortBtn, sortBtn itself will be hidden and disabled.

1 Like