Build a personal data dashboard

Make it: Track one week of practice

Start here · 35 minutes

Gather: Computer, text editor, and browser

Step by step

1. Create index.html with a heading, a table with Date and Minutes columns, and seven rows of fictional practice times.
2. Add a Total cell under the Minutes column. Sum the seven numbers by hand so you know the expected result.
3. In a script, select the seven minute cells with document.querySelectorAll, convert each text value with Number, and add them with reduce.
4. Put the calculated total into the Total cell using textContent. Change one row and refresh to check that the total changes.
5. Open the page at a narrow phone width; make sure the table and total remain readable.

You're done when: The browser total matches your hand calculation and updates when a row changes.

Next project: Add a week filter

60 minutes

1. Add a Week select with All, Week 1, and Week 2 options. Extend the sample table to fourteen dated rows.
2. Read the selected option in JavaScript and filter the rows before calculating the total. Keep the original rows unchanged.
3. Show both the filtered total and number of displayed days; give the empty result a clear message.
4. Test all three options by calculating their expected totals on paper, then check the page at phone width.

You're done when: Changing Week changes the visible rows and total without deleting the original data.

Course plan

1. Choose one question
2. Parse and validate CSV
3. Calculate a useful total
4. Make the chart readable
5. Filter without losing data
6. Keep the data local

More coding courses

• Build your first websiteLearn HTML, CSS, and JavaScript by making a small site that is genuinely yours.
• Build a browser puzzle gameMake a small, playable matching game with clear rules and a proper win state.
• Build an offline email organiserBuild a local tool that reads sample messages and sorts them into useful groups. No live inbox access.