There is something about these todo apps. Probably the reason that I put so much attention on them is that they are the easiest to be built and you may always try something new on them. This is probably the fifth ToDo app, that I am doing, if I follow the chronology from this article. So, what is new in this one? Pretty much nothing, I just wanted to remember some stuff in JS. And I did it. Anyway, it is really different from the old ones, probably the simplest one, without an option to put some tasks in it.
This is how it looks like:
What is the interesting thing about it? It has two functions – setup and change_lists. The setup adds the function change_list to the click event for each list item in the todo list. The click event pays attention in which list the task is and sends it to the other one (check the if-else). We also have a CSS, which is used only for the tasks, which are in the “Done” list. Pretty much that is really all about it. 🙂
Here comes the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Just Another To Do list...</title> <style> .done_mark { text-decoration: line-through; color:blue; font-size:50px; } </style> <script> window.addEventListener("load", setup); function setup() { var my_list = document.getElementsByTagName("li"); for (var i = 0; i < my_list.length; i++) { my_list[i].addEventListener("click", change_lists); } } function change_lists(event) { var li = event.target; var liTodo = document.getElementById("done"); var liDone = document.getElementById("todo"); if (li.parentNode.id == "todo") { liTodo.insertBefore(li,liTodo.firstChild); li.classList.add("done_mark"); } else { liDone.insertBefore(li,liDone.firstChild); li.classList.remove("done_mark"); } } </script> </head> <body> <h1>To do:</h1> <ul id="todo"> <li>Walk the dog</li> <li>Wash the dishes</li> <li>Make world peace</li> <li>Put ads in VitoshAcademy.Com</li> <li>Cook spaghetti</li> </ul> <h1>Done:</h1> <ul id="done"> </ul> </body> </html> |
Enjoy it! 😀