Learn how to create a "to-do list" with CSS and JavaScript. The To Do ListUse CSS and JavaScript to create a "to-do list" to organize and prioritize your tasks. Try it Yourself » Create The To Do ListStep 1) Add HTML:Example
My To Do ListAdd
Step 2) Add CSS:Style the header and the list: Example/* Include the padding and border in an element's total width and height */ /* Remove margins and padding from the list */ /* Style the list items */ /* make the list items unselectable */ /* Set all odd list items to a different color (zebra-stripes) */ /* Darker background-color on hover */ /* When clicked on, add a background color and strike out text */ /* Add a "checked" mark when clicked on */ /* Style the close button */ .close:hover { /* Style the header */ /* Clear floats after the header */ /* Style the input */ /* Style the "Add" button */ .addBtn:hover { Step 3) Add JavaScript:Example// Create a "close" button and append it to each list item // Click on a close button to hide the current list item // Add a "checked" symbol when clicking on a list item // Create a new list item when clicking on the "Add" button var span = document.createElement("SPAN"); for (i = 0; i < close.length; i++) { |