One of the classic projects for student software developers is to build a humble todo list application. In this project, you will start with a mostly-working todo list app and make modifications to fix bugs and add features.
Start by playing with the application. Type some things in the box,
click on the Add button, and check the boxes. Once you've familiarized
yourself with it, complete the following exercises.
As part of your design, you want to try different heading sizes.
On Line 1 of the HTML code, please try a few different
heading options to see how they change the look of the page.
When you're done, please set it to h3.
When you add a new task to the list, what happens to the text inside the input box?
The user's input shouldn't stay in the input box after the task has been added to the list. That's a bug! Fix the bug by changing Line 22 in the JavaScript code to something that will clear the contents of the input box.
The code currently sets the styling for the span element in the JavaScript code. This is okay, but ideally we would define that in CSS
because it makes it easier to see all the styles applied to an element. For this step, modify the contents of all of the following so that left margin on
the span element is set in CSS:
span element).
Let's spruce up what happens when the user completes a task. On Line 36 of the JavaScript, add a call to confetti().
Try passing different settings from the library.
Try a different styling for the completed items. Use the documentation on the text-decoration CSS property to choose a new way for completed items to look.
How does the user delete tasks from the list? They can't! Lines 13-16 of the JavaScript create a delete button but, critically, we never add that element to the li element that gets inserted into the page. To remedy this, on Line 20 of the JavaScript code, add code to append the delBtn element to the <li> element.