diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md index 7feb41f003f..fabbdb0af8b 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e78a7ea4a168de4e6a38.md @@ -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--