todo list #4
todo list #4
Conversation
| e.target.remove(); | ||
| } | ||
| else{ | ||
| e.target.style = 'text-decoration : line-through'; |
| } | ||
| }); | ||
|
|
||
| for(let butt of document.querySelectorAll("button")){ |
| }); | ||
|
|
||
| for(let butt of document.querySelectorAll("button")){ | ||
| butt.addEventListener("click", e =>{ |
There was a problem hiding this comment.
Since each button is an individual controller for a distinct action, we should add event listeners to them individually, not in a loop.
| } | ||
|
|
||
|
|
||
| document.getElementById("write_item") |
There was a problem hiding this comment.
Why not listen to form's change event and check if form is valid? This opens up the door for new "validation" bugs.
|
|
||
| document.getElementById("write_item") | ||
| .addEventListener("input", e =>{ | ||
| if(e.target.value !== "" && e.target.value !== "Write up your todo here"){ |
There was a problem hiding this comment.
The default value you see is called "placeholder". It's not literally a value.
| document.querySelector("ul").prepend(item); | ||
| document.getElementById("write_item").value = "Write up your todo here"; | ||
| document.getElementById("write_item").style.width = ''; | ||
| document.getElementById("add").disabled = true; |
There was a problem hiding this comment.
You can use a form's .reset() method
| } | ||
| }); | ||
|
|
||
| document |
There was a problem hiding this comment.
Why reimplement the focus mechanism? Add tabindex=0 to the elements :)
| @@ -14,11 +14,19 @@ <h1>ExCo.</h1> | |||
| </header> | |||
| <main> | |||
| <h2>My Todos List</h2> | |||
| <form> | |||
There was a problem hiding this comment.
But why not use a section? :(
| <ul> | ||
| <li>Have morning coffee</li> | ||
| <li>Eat lunch</li> | ||
| <li>Make awesome things happen</li> | ||
| </ul> | ||
| <span> |
There was a problem hiding this comment.
A span instead of a section? A SPAN?!?! 😭
No description provided.