gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): changed the description, hint and test of todo app step 6 (#53177)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com>
This commit is contained in:
Vishakha Sawra
2024-01-19 22:30:19 +05:30
committed by GitHub
parent 2aee6c99fa
commit eaebde895d
1 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md
+14 -4
View File
@@ -9,9 +9,19 @@ dashedName: step-6
Now, you will work on opening and closing the form modal.
Add a `click` event listener to the `openTaskFormBtn` variable, and then use `classList` to toggle the `hidden` class on the `taskForm` element. Make sure not to include curly braces in your arrow function.
In earlier projects, you learned how to add and remove classes from an element with `el.classList.add()` and `el.classList.remove()`. Another method to use with the `classList` property is the `toggle` method.
Now you can click on the "Add new Task" button and see the form modal.
The `toggle` method will add the class if it is not present on the element, and remove the class if it is present on the element.
```js
element.classList.toggle("class-to-toggle");
```
Add an event listener to the `openTaskFormBtn` element and pass in a `click` event for the first argument and an empty callback function for the second argument.
For the callback function, use the `classList.toggle()` method to toggle the `hidden` class on the `taskForm` element.
Now you can `click` on the "Add new Task" button and see the form modal.
# --hints--
@@ -27,10 +37,10 @@ Your event listener should listen for a `click` event.
assert.match(code, /openTaskFormBtn\.addEventListener\(\s*('|"|`)click\1/)
```
Your event listener should include a callback function for the second argument using arrow syntax without curly braces. Then you should use the `classList` property and its `toggle` method on the `taskForm`, to toggle the class `hidden`.
Your event listener's callback function should contain `taskForm.classList.toggle("hidden")`.
```js
assert.match(code, /openTaskFormBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\)\s*\s*=>\s*taskForm\.classList\.toggle\(\s*('|"|`)hidden\2\s*\)\s*\);?/)
assert.match(code, /openTaskFormBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*(?:{\s*taskForm\s*\.classList\s*\.\s*toggle\s*\(\s*('|"|`)hidden\2\s*\)\s*;?\s*}|\s*taskForm\s*\.classList\s*\.\s*toggle\s*\(\s*('|"|`)hidden\3\s*\)\s*;?\s*)\s*\)\s*;?/)
```
# --seed--