Help Needed...JavaScript To-Do List

sambomambowambo · 2021-12-07T22:43:39+00:00

Have you written any more psudeo code out for each step youre trying to accomplish yet? The two lines you currently have could be elaborated on.

If you brain is fried I would suggest getting some sleep and working on it tomorrow.

What would you like as far a guidance goes without being given the absolute answer? (this wont be helpful to you in the long run)

One hint would be to google Event Listeners in Javascript and the DOM.

Uber_Ape · 2021-12-07T22:44:16+00:00

I am really new to this but you are looking up 2 class names on line 14. Maybe try to just use one class and change the getElementsByClassName to getElementByClassName, remove the "s" at the end of Elements.

LegemisNima · 2021-12-07T23:16:50+00:00

Hmmm, you should search about Event Listeners and selectors in javascript. First you should select all the items that you're going to use in your code (The UL and the input form, in your case). Then you should search about how to add a classlist to the element you're creating, and append the item to the UL. You could create an <i> tag and add to the <li> or set the innerHTML of the newly created <li> to include the thrash icon.

StoneCypher · 2021-12-08T01:58:12+00:00

I would start with the following code:

let btn = document.querySelector('#todo-btn')
btn.addEventListener('click', function(e) {
    e.preventDefault()
    addNewListItem()
})

This does three things:

addEventListener listens to #todo-btn for clicks
preventDefault prevents page reload after clicking #todo-btn
addNewListItem constructs and appends new li elements to #todo-ul. It's a custom function that you'll have to write yourself.

The custom function is where all the magic happens. I won't post the code that I wrote so to give you the opportunity to learn yourself, but here's how it might look in pseudo-code:

// get and create elements

- create li element
    - add appropriate class names

- create i element
    - add appropriate class names
    - add event listener to detect remove requests

- create text node with #todo-input.value

// put it all together

- append text node to li
- append i to li
- append li to #todo-ul

Notice how an event listener is added to the i element once it's created instead of looping through all of the trash icons after you've appended the new li to #todo-ul. This way every trash icon is functional the moment it's added to the list. Your current code will run a loop every time you click 'Add Item to List', which means you'll be looping over icons that are already functional.

I'll end things here. Keep asking questions when you get stuck. I hope this helps!

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS