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
12 Replies
13eck
13eck2y 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.
Sste
Sste2y 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
13eck2y 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
Sste
Sste2y ago
Yeah I thought the mistake was in function multipleTask()
13eck
13eck2y 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.
Sste
Sste2y ago
Omg, this iso so complex I didn't learn map yet
13eck
13eck2y 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?
Sste
Sste2y ago
Have you created a loop, right? I thought it was an intermediate level of difficulty
13eck
13eck2y ago
for...of, for...in, and .map() are all different ways of doing loops
Sste
Sste2y ago
Woww There's another way to get this result?
13eck
13eck2y 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
Sste
Sste2y ago
Get it. Thanks anyway
Want results from more Discord servers?
Add your server