Strugging at making a To-Do List using CSS, HTML, JS

Question

Hi, I am struggling to put a simple To Do List together. I am just putting the basic operations together such as edit, remove, add.

I am having problems with creating elements and nodes... when I remove them it messes up the list which makes no sense. The onclick events for the buttons mess up as well.. the list should shrink... not stay the same. Been spending many hours at this and not getting anywhere...

Some help will be appreciated.

https://code.sololearn.com/WOuYyfWbqLXB/?ref=app

Answer 1

In your removeBtn() at line 234, you have
toDoList.splice(value,1);
This is correct, but you have not
removeChild(parent.children[i])

In your buildList() called at line 247, your line 152:
if(document.querySelectorAll(".row .numbers")[i] == undefined){
You try to update row. But because you have not remove child so you will have one more not updated row at end.

Following your logic,
Just change to parent.innerHTML = "" ; to erase everything and start append child from beginning again.

(coding the reviewed code for you, post after several hours)
fix1: parent.innerHTML = ""
https://code.sololearn.com/W0E6js8ICALj/?ref=app
fix2:
var removeTarget = document.getElementById("base").children[value]; document.getElementById("base").removeChild(removeTarget);
https://code.sololearn.com/W3zJ51bt9Pd6/?ref=app

The two removing anonymous function from click event listener on edit button and remove in your addBtnClick(posn) is ineffective also the reason of funny behavior.
To be cont

Answer 2

Small number of upvotes and comments can be motivating. But at large number it becomes a burden.

She was extremely popular and she replied to every comment almost instantly.

The notifications kept her checking the app and her work was affected, according to her byebye post.

After that sololearn created that homepage post : "when you get tired, learn to rest not leave"

Answer 3

You are welcome ^^
I see you still need to build add interface and edit interface,
you can look at and learn from a great example.

Answer 4

This one: https://code.sololearn.com/W574iC69XV0b/?ref=app

Answer 5

She was overwhelmed by the upvotes and comments and left 😭

Answer 6

Gordon

Overwhelmed not in a good way I suppose?

Answer 7

Ehhhh she could of always manually turned them off 😂

Answer 8

Jay, depending on your personality that may be hard to do: She may have felt like she was letting everybody down if she didn't reply.

Of course at a point you probably just have to.

Write a code where you explain your problem, say sorry (for having a life), hope that people understand.

Answer 9

Jay
Further to my answer yesterday,
to cure your attempt to remove anonymous function, there are, again, two ways:
Way 1: use named function instead.
Way 2 : I didn't test yet, see Pao's answer in this Q&A
Edit: way 2 tested, and works perfectly
https://www.sololearn.com/Discuss/1644987/?ref=app

Answer 10

Also in your editBtn(),
toDoList.splice(value-1,value);
You deleted something instead of editing it.
splice is for removeBtn(), you just
toDoList[value] = "new content" ;
in editBtn()

also, some CSS property clashes with each other.

See my full fix for you:
https://code.sololearn.com/Wfw3qBRwriXh/?ref=app

The description is above each tab.

Answer 11

Wow! Thanks so much for the help! Very much appreciated!

Answer 12

Ah yes I remember Domino! Where did she go? 😔

Answer 13

If you’re trying to make a to do list that you will actually use, why not just make a html table with times for different tasks, and just remember when you’ve done something?

Answer 14

Was more of a presentation tbh