diff --git a/curriculum/challenges/english/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md b/curriculum/challenges/english/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md index 93220c75347..d876f2e3167 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md +++ b/curriculum/challenges/english/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md @@ -26,7 +26,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. The `swapElements` function should modify the array in place by swapping the element at the passed index and the following element if `isOrdered` returns `false`. 1. You should have a function named `highlightCurrentEls` that takes an HTML element and a numeric index. 1. The `highlightCurrentEls` function should set the `border` of the given element's child at the given index, and the child immediately after the index, to have a `dashed` style, a `red` color, and a width of your choice. -1. When you click `#generate-btn` you should use the `fillArrContainer` function to fill `#starting-array` with five `span` elements, each with a random number as its text. +1. When you click `#generate-btn` you should use the `fillArrContainer` function to fill `#starting-array` with five `span` elements, each with a random number as its text. If present, other elements should be removed from `#array-container`. 1. You should implement the Bubble Sort algorithm so that after you click `#sort-btn`, `#array-container` contains a `div` element for each of 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. The functions you have created so far can be useful here. 1. Each `div` should contain five `span` elements, representing the array in its current state of being sorted. 1. After you click `#sort-btn`, `#starting-array` should represent the starting step with the initial array and the first two integers highlighted. @@ -207,6 +207,25 @@ Array.from(children).forEach(el => { }) ``` +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. + +```js +const genBtn = document.querySelector("#generate-btn"); +const sortBtn = document.querySelector("#sort-btn"); +genBtn.dispatchEvent(new Event("click")); + +const prevNumbers = Array.from(document.querySelector("#starting-array").querySelectorAll("span")).map(el => Number(el.innerText)); + +sortBtn.dispatchEvent(new Event("click")); +genBtn.dispatchEvent(new Event("click")); + +const container = document.querySelector("#array-container"); +assert.lengthOf(container.children, 1); +const numbers = Array.from(document.querySelector("#starting-array").querySelectorAll("span")).map(el => Number(el.innerText)); +assert.lengthOf(numbers, 5); +assert.isTrue(prevNumbers.some((num, index) => num !== numbers[index])) +``` + 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. ```js