In this project, you're going to make a to-do list!
1. Create a new HTML document and add a relevant
title in the
head section of the page. Then in the
body, add an
h1 element that says "My To-Do List."
2. Using CSS, center all of the body's content on the screen. Set the h1's
3. Add an
input element underneath the header and give it an
id. Use the placeholder attribute to hint to users what they should type into the input field. Use CSS to set the input's
4. Place a
button next to the input element that says "Add Item" and give it an
id. Use CSS to set the button's
5. Add an empty
ul element underneath the input and button elements. Give it an
id and use CSS to set its
box-shadow. (Tip: You may find
margin: auto helpful when trying to center a block element like ul.
6. Using CSS, add a background image to the body of your HTML page. Make it cover the entire screen.
li element each time the "Add Item" button is clicked and append it as a child of the
ul element you made in step 5. (You'll see a bullet appear each time you click the button if this is working correctly.)
8. Make it so that these
li elements are also created when you press the enter key while your cursor is inside the input field. (Tip: A function may be useful here to avoid writing duplicate code!)
9. Create a
span element each time the enter key or "Add Item" button is pressed. Make the span's text content be whatever the user types into the
input field. Log the span element to the console to make sure this is working correctly.
10. Append each span element as a child of each li element as they are created. (The text you enter into the input field should now appear on the screen when you press enter or click the button.)
11. Make the input field clear each time you click the button or press enter.
12. Using CSS, remove the bullets from each
li element and adjust their bottom
13. Find an icon or image that the user can click to delete an item. Once you find it, append it as a child of each parent
li element and assign it a class name. (Make sure only one can be added per list item!) Use the class name to style the icon with CSS if desired.
14. Add an event to the body that listens for mouse clicks. Make it so that if the delete icon is clicked, that icon's parent
li is deleted.
15. Create a checkbox for each list item and place it next to the delete icon. Append it as a child of the parent
li and assign it a class name. Use the class name to style the checkbox with CSS if desired.
16. Make it so that if the checkbox is checked, its sibling text is crossed out.
17. Make it so that if the checkbox is unchecked, its sibling text is no longer crossed out.
18. Keep perfecting the page style and functionality until you get it just how you want it. You can add more images, change font sizes and colors, add a reset button—whatever you like. When you're ready, try the challenge step!