LET’S TALK TO-DO LISTS
We all lead really busy lives, just the other day I was so swamped with work that I forgot to get lunch. If you are familiar with the hunger pangs that lead to an ulcer episode you will understand when I say later that day I had to pay for my forgetfulness in pain - severe pain if I might add. A to-do list is an organizer of some sort that helps you manage your oh so busy life by listing things you would like to get done for the day, week or even month and seeing to it that they are done at the end of the set period.
For the JavaScript project, the facilitator Chike John asked us to create a simple and functional to-do list app that has the primary function of adding a task and deleting a task when completed. The project was written in Html and CSS, and Vanilla JavaScript was the tool used to make the webpage functional and make sense of the Html and CSS code that was written.
Using the bootstrap framework I created a <div> to house the title of the app as well as divide my webpage into two. I went straight ahead to create a list of nine(9) things I needed to do for the day using the Html list tag adding the onClick function to one of the list tagged item. To the onClick function, I added the JS keyword ‘this’ to effect the same changes for the remaining listed items. On the second part of my previously divided webpage, there was a list to show the status (completed or not) of the to-do’s when clicked on the other part of the webpage.
The CSS was the tool I used for styling the Html list tags in rows with borders margin and paddings. This was necessary to make the webpage responsive. It was the tool responsible for the hover effect of the mouse on each row of the Html list file and for font-styling and background effects that were added to the webpage.
The JavaScript part of this project albeit short and precise was responsible for functionality base and DOM manipulation of this app project. The first function was the ‘markDone’ function which has a member variable named todoList for the purpose of reflecting completed or done to every to-do item on the list that had been completed. The next function was the ‘eventListener’ which was added to execute the ‘onClick’ attribute added in the previous Html file. Finally, a variable name ‘done’ with an appendChild method was used to append a node to every child in the Html list tag by fetching the document to the script.js file.
Even though the nature of this app creation was quite daunting based on the fact that it was a 4hrs challenge for the class of front end developers I had fun tweaking, writing, googling and commenting out a lot of codes I had no idea I knew how to write. Procrastination is an act that can totally be curbed with your everyday simple to-do list. Good thing you may not have to go all the way to create an app or design a to-do list like me but just simply write down everything you want to get done on a piece of paper or sticky note to make sure you see it. I hope my easy to design app convinced you enough.
