What you'll build

  • Create expenses with a category and amount.
  • Calculate a total per category.
  • Validate amounts and support deleting entries.

Your building plan

  1. Define the shape of an expense.
  2. Add an accessible expense form.
  3. Render entries in a sortable table.
  4. Group expenses and sum each category.
  5. Add a chart and test empty data.

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-86 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.