to-do list.

Process & Creation

This to do app was built on a base of HTML and CSS. The logic and rendering were done with jQuery.

How it works: This application starts with an empty array that is going to be used as the state of truth. Nothing actually happens though, until submit is clicked. When submit is clicked, if the text field is empty, an error is shown. If a to-do was actually entered, the to-do is saved to a variable and then pushed to the array as an object property. Every time a to-do is pushed to the array a key:value pair of "checked: false" is pushed through to the object as well (this will come into play later). At this point the input field is emptied out to clear the way for the next to-do, and what was just submitted is rendered.

When the function that renders the to-do items is called, the entire container that holds to-dos is emptied of any previous items and then each item in the state of truth object is looped through and rendered. At the same time, while looping, each checkbox is checked to be "checked" or not. If "checked", the checkbox is left as "checked".

At this point in the to-do list, you can do a couple different things. (1) You can delete the to-do: the function looks for the delete button's parent and deletes that, and then re-renders the to-do list. (2) You can check off a to-do: The parent of the checkbox is searched for and the status of "checked" is changed. (3) You can update the to-do: The parent of the section that holds the update button is searched for and the old to-do is replaced. (4) you can uncheck all, check all, or delete all. When a checkbox is checked, the number of to-dos and finished to-dos is calculated.