Kevin Powell - Community•2y ago

How to ADD multiple tasks

I'm creating a to do list. I want to create a new task every time I click in the button ("ADICIONAR TAREFAS" - this mean add task in english). But when I click in the button at this moment, it doesn't create a new task, just edit the one that already exist. Here is the full code: https://codepen.io/ssstephanyyy/pen/yLRBOQV

ssstephanyyy

CodePen

yLRBOQV

...

12 Replies

13eck•2y ago

Looking at it now, but wanted to point you to the <dialog> element, which is what you should be using for modals (as that's what its purpose is!). https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog Don't manipulate classes to hide/show a div when there's a semantic element that does what you want (with less work!). The problem is on line 44: text.innerHTML = data;. You're overwriting the current info with the new info, you're not adding a new to-do card. Line 35: let data = {}; Line 43: data = input.value; You're creating a global object on line 35, but on line 43 you're (again) overwriting the object with a string. Global data stores should be declared with const so this doesn't happen. An important thing to keep in mind with const is that it prevents the variable from being replaced but complex data (anything that's not a primitive data type: null, undefined, boolean, number, bigint, string, symbol) can be modified. Arrays can have info .push()ed onto it and objects can have key/value pairs added.

SsteOP•2y ago

Thanks, can you show what you are explaining in code format for me to understand better, please? If I declare as a const in line 35, the code stops working

13eck•2y ago

Exactly! You're creating the data variable to hold all the data for your lists, right? So you need to keep it an object. Line 42 is removing that object and replacing it with a string. That's not what you want to be happening

SsteOP•2y ago

Yeah I thought the mistake was in function multipleTask()

13eck•2y ago

In my opinion, you want your data variable to be the following:

const data = {
  toDo: [],
  doing: [],
  done: []
}

const data = {
  toDo: [],
  doing: [],
  done: []
}

This way you have an array to keep all your list items in the right place. Then in some other function, you'd do something like:

const fillInLists = () => {
  for (list in data) {
    const items = data[list].map( (item) => `<li>${item}</li>`);
    document.querySelector(`#${list}`).innerHTML = `<ul>${items.join("")}</ul>`;
  }
}

const fillInLists = () => {
  for (list in data) {
    const items = data[list].map( (item) => `<li>${item}</li>`);
    document.querySelector(`#${list}`).innerHTML = `<ul>${items.join("")}</ul>`;
  }
}

This will create an unorganized list for each of the "to do", "doing", and "done" list items that is then used to overwrite the current list items.

SsteOP•2y ago

Omg, this iso so complex I didn't learn map yet

13eck•2y ago

To be fair, to-do lists are more complex projects then most people think Do you at least know for...of and for...in?

SsteOP•2y ago

Have you created a loop, right? I thought it was an intermediate level of difficulty

13eck•2y ago

for...of, for...in, and .map() are all different ways of doing loops

SsteOP•2y ago

Woww There's another way to get this result?

13eck•2y ago

I believe a lot of the complexity of this is coming from the fact that you're trying to keep three different lists. Most starting to-do apps have one list and when you complete a task it strikes it out instead of moving it to a new list That's a lot easier to do as it adds/removes a class to the list item instead of trying to remove it from one place and add it to another

SsteOP•2y ago

Get it. Thanks anyway

Gaming

Programming

How to ADD multiple tasks