Add task in ToDolist - personal project

1

Hi coders,
I’m continuing with my personal project of creating Todo list.
I’m having trouble adding the task and connecting it to the counter.
I had found this suggestion to add (because what I thought was wrong :pensive: ):
https://jsfiddle.net/patelsumit5192/vuy58yka/1/

And this is my project (forgive me if it’s not cool yet but I’m working on it :muscle: )

Ah, if you have any suggestions on how to improve it, then let me know, I’m open to new ideas :slight_smile: .
Thanks,
CamCode

2

Hey so I forked your project on CodePen to see if I could get it working.

First off, great job so far, there are some things that I had to change around to get to where I could type in the text box.

Is there any particular reason why you have a div dedicated for a horizontal line? This div was keeping me from typing in the input field.

<hr>

that is what is used for a simple divider or horizontal line.

Also, I would suggest wrapping the button, giving it a type of submit, and the input in a form tag so you can label it also. If you don’t want it to go anywhere, be sure to preventDefault for the onsubmit.

Last thing, in the add task, you aren’t grabbing the text from the input field, then resetting the input field. Once you do that then you can create a list item and append it to the field for the tasks.

Let me know if this helps at all, or if you have any questions.

3

Hi @WalkerLauryGit,

Thanks for your suggestions!!:bowing_woman:
I saw that if I remove the horizontal line, I can add the text (I couldn’t do it before),
But how can I add a line without blocking the part below? do I put it in the header?
Then I ask you for a greater explanation on the addition function, on what I should do exactly.
Thanks,
CamCode

4

Where are you trying to place the horizontal line? I would suggest in the body you add it.

 <button id="counter-button" onclick="addTask()" >+</button>
      <hr>
   <div id= "list"></div>

You could do something like this and this way you can append the list items into list and it would be below the line.

You can add the <hr> tag anywhere in your code, it is a block level element so it will move things below it.

Your last question:
For actually creating the task item, you need a list of tasks. you have a div for tasks. Inside that you can create an ordered list or unordered list. On submit, 1. grab the text from the input, create an list item, and append it to the ul or ol.

Try that and let me know how it works out for you! If you need me to clarify let me know!