ToDo Box Project

Your HTML and CSS skills will come in handy to make this look great, but the focus of this project is to give you an opportunity to use JavaScript. Specifically, you will use what you have learned about DOM Manipulation and Local Storage!

Must-Haves

  • At least one input the user provides information with, and one button that the user clicks
  • Upon the user click of the button, their content should appear
  • The user can enter more information, click the button, and see the new information appear, in addition to the previous piece of information
  • When the page is refreshed, the users information should persist
  • A visually appealing site

Tips

  • Look back to the Local Storage lesson to brush up on how to make data persist
  • Follow the iterations closely. This project brings a lot of your new knowledge together; the iterations help you break down this big problem into bite-sized chunks.

Here is an example of something like you will build. When you see it on the site, make sure to add a couple entries and verify that they persist.

Iteration 1 - Wireframe & Vision

  • Draw out your vision for the way your site will look - on a desktop, iPad size, and phone size.
  • Like we did with the Photo Gallery, label each section with the HTML element that will be used.
  • What kind of information will your “ToDo Box” hold? What inputs will you need?
  • Decide on your color palette. Color Supply is a great resource for this!
  • Make sure your wireframe and assets are approved by your instructor before moving on.

Iteration 2 - HTML & CSS

  • Now that you have wireframes, write out the HTML to make this come to life.
  • Apply styles, including media queries.

Iteration 3 - DOM Manipulation

  • Write an event listener and handler for your button.
  • Inside the event handler, write the code necessary to generate a list.
  • At the end of this iteration, your app should be completely functional, but does not use local storage.

Iteration 4 - Local Storage

  • Store each “ToDo” in local storage when the user creates it
  • Make sure that when the page loads, all “ToDo”s are rendered.