CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-19 21:09:51 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(curriculum): test clearing of previous arrays in Sorting Visualizer (#57623)

Browse Source 
Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
This commit is contained in:
Krzysztof G. 2024-12-19 23:32:52 +01:00 committed by GitHub
parent 139e936372
commit 8d260f6257
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
curriculum/challenges/english/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md
View File

@ -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