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 font-family, font-size and color.
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 padding, margin, border, and box-shadow.
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 padding, background-color, text color, border, border-radius, and box-shadow.
5. Add an empty ul element underneath the input and button elements. Give it an id and use CSS to set its width, min-height, padding, background-color, and 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.
7. Using JavaScript, create an 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 margin.
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!
Challenge: Use the Window localStorage property to save your list for next time. (You can test this by refreshing your browser to see if the list is still there.)