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
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.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
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 happeningYeah
I thought the mistake was in function multipleTask()
In my opinion, you want your
data
variable to be the following:
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:
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.Omg, this iso so complex
I didn't learn map yet
To be fair, to-do lists are more complex projects then most people think
Do you at least know
for...of
and for...in
?Have you created a loop, right?
I thought it was an intermediate level of difficulty
for...of
, for...in
, and .map()
are all different ways of doing loopsWoww
There's another way to get this result?
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
Get it. Thanks anyway