BEGINNER PROJECT

A Little To-do List

Make room for the things you want to get done.

What you'll build

  • Add, complete, and remove tasks.
  • Reject blank task titles.
  • Show how many tasks remain.

Your building plan

  1. Model a task with an id, title, and completed flag.
  2. Add a form for creating a task.
  3. Render the list with a completion checkbox.
  4. Filter the list to find incomplete tasks.
  5. Add a persistent store before deployment.

Start with a small prototype

13px
main.jsYour ideas, in code.
Loading your editor…
Run your code to see the output here.
Ready to buildUTF-83 lines

Share your project with the world

The finished project is a complete HTML file. Download it and open it in a browser to explore the interface and its JavaScript.

  1. Move your interface into an index.html file and your logic into script.js.
  2. Test keyboard controls, small screens, and empty or invalid inputs.
  3. Commit your files to a new repository without any secrets.
  4. Choose a static hosting service, connect the repository, and deploy the project.
  5. Open the published URL on another device and try the complete flow.