Learn localStorage by Building a Todo App - Step 6

JavaScript
1

Tell us what’s happening:

Here’s the instructions for this step:
"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."

Everything seems to be working fine in the preview, but my code doesn’t pass for some reason.

Your code so far

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


/* file: styles.css */


/* file: script.js */
// User Editable Region

openTaskFormBtn.addEventListener('click', () => {
  taskForm.classList.toggle('hidden');
});

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Challenge Information:

Learn localStorage by Building a Todo App - Step 6

2

FIXED IT. Instructions a bit unclear - I was supposed to use implicit return.

@jwilkins.oboe , Not sure if it will help the course development or not, but I’m currently on step 9 and am a bit confused with implicit return being used inconsistently with some of the button functions.

Here are lines 16-24:

openTaskFormBtn.addEventListener("click", () =>
  taskForm.classList.toggle("hidden")
);

closeTaskFormBtn.addEventListener("click", () => {
  confirmCloseDialog.showModal();
});

cancelBtn.addEventListener("click", () => confirmCloseDialog.close());

Thanks for all the hard work on the Js course! Hope this is helpful.

2 Likes
3

cancelBtn’s event listener is only responsible for one thing which is to close the dialog.
So that is why this is using an implicit return here

technically, you could pass in a regular function like this

cancelBtn.addEventListener("click", function() {
    return confirmCloseDialog.close();
});

or even this

cancelBtn.addEventListener("click", () => {
    return confirmCloseDialog.close();
});

as for the closeTaskFormBtn event listeners, in later steps you will add more to those function so that is why implicit returns are not used there.

implicit returns are good when you have short concise one liners.
if you have multiple lines of code, then it is best to wrap that function body inside a set of curly braces.

hope that helps

1 Like
4

This one uses an implicit return for the same reason cancelBtn does.

it is just formatted differently

1 Like
5

Thanks so much for the thorough explanation! It makes a lot of sense. I was just frustrated with one of the checks because it was technically ‘correct’, but the code wasn’t passing because I was supposed to use implicit return :joy:

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.