Learn localStorage by Building a Todo App - Step 37

JavaScript
1

Tell us what’s happening:

Is this clear as according to instructions?

Your code so far

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


/* file: styles.css */


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

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

discardBtn.addEventListener("click", () => {
  confirmCloseDialog.close();
  reset()
});

taskForm.addEventListener("submit", (e) => {
  e.preventDefault();

  taskData.forEach(
    ({ id, title, date, description }) => {
        tasksContainer.innerHTML += `
      
    };

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1.1 Safari/605.1.15

Challenge Information:

Learn localStorage by Building a Todo App - Step 37

2

You need to move only the taskData.forEach() along the content within it, from the taskForm’s submit event listener into the newly created function.

You have added extra code.

3

you also have a syntax error here, this template literal is unclosed

4

How’s this?

const updateTaskContainer = () => {
taskForm.addEventListener("submit", (e) => {
  e.preventDefault();

  taskData.forEach(
    ({ id, title, date, description }) => {
        tasksContainer.innerHTML += `
        <div class="task" id="${id}">
          <p><strong>Title:</strong> ${title}</p>
          <p><strong>Date:</strong> ${date}</p>
          <p><strong>Description:</strong> ${description}</p>
          <button type="button" class="btn">Edit</button>
          <button type="button" class="btn">Delete</button>
        </div>
      
    });
5

Yes I understand it’s still wrong line 63 to 75.

6

You need to move only taskData.forEach() with it’s content within it to the new function.
You have added whole taskForm event listener callback function within it.

7

How’s this looking? I do somehow get the concept I’m missing out a few things.

8 
const updateTaskContainer = () => {
taskForm.addEventListener("submit", (e) => {
  e.preventDefault();

  taskData.forEach(
    ({ id, title, date, description }) => {
        tasksContainer.innerHTML += ``;
    });
9

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

10

you should not move the event listener, read carefully what you asked to move

11 
const updateTaskContainer = () => {
  taskData.forEach(
    ({ id, title, date, description }) => {
        tasksContainer.innerHTML += ``;
    });
12

what are you asked to move? can you answer that?

13

You can see in the previouw before posting if the code is formatted properly, please pay attention.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

14

I’ve been asked to move the taskData submission wrapped code to the function.

15

yes, move, without removing anything from it

here you lost past of it:

17

that’s not readable, please format your code

19

the angular bracket at the beginning of each line means the code can’t be copy pasted for debugging, please be careful with which button you use.
But I can read it.

What’s the situation? What do the tests say? please describe

20

Sorry, your code does not pass. Don’t give up.

You should move taskData.forEach() and its content into the updateTaskContainer() function.

21

( Use arrow syntax to create an updateTaskContainer function. Then move the taskData.forEach() and its content from the taskForm 's submit event listener into the newly created function.)

22

Please use your own words, it’s difficult to help you if you only reply copy pasting text from the challenge.

Did you copy and paste or cut and paste the code?