This project allows the users to keep track of their To-Do items, while providing an aesthetically pleasing design.
Tech used: HTML, CSS, and vanilla Javascript
How It's Made: When creating this website I focused on making it functional first before I went in and applied the CSS.I created the basic layout on HTML with a form, three buttons, and an empty Ul. On Javascript I used a .createElement tag in order to target the empty Ul and insert an li. This allows the unordered list to be empty at first, but continuously accept new li's added. I then added a strikethrough option with every onclick event applied to the li. This would allow the user to cross-off any completed items and un-cross them if they made a mistake. The main three buttons created were an add button that added the new li on ever onclick event, the clear item button which removed any item that has been strikethrough, and finally the clear all button which removes all of the li's and returns to ul back to empty. The last function I added was the task tracker. This allows the user to know how many items they have on their list and as they complete them the total number of task goes down.
Lessons Learned: Through this project I was able to hone in my javascript skills and figure out ways to simplify the functions while accomplishing my goal. One thing in particular I struggled with at first, but soon better understood was the toggle method and the eventListener function.