Project brief

Build a todo app, a calculator interface and a live clock. This is the first DOM-heavy project: selecting elements, creating nodes, handling events and reading form input.

This is a workbook project in the JavaScript track. It has no single prescribed solution: build it in your own file, test it in the browser or Node, and compare your result with the checklist below.

What you will practise

DOM
Events
Forms

Build it step by step

Build the todo list with an input, an add button, a list container and a delete action per item.
Build a calculator grid with number, operator and equals buttons, then evaluate the expression safely.
Build a clock that updates every second and shows hours, minutes and seconds.
Add keyboard support for the calculator and the todo input.
Check the layout at narrow and wide viewport widths.

Stretch goal

Add one feature that is not in the list above, then write down why you chose it and what you had to change. Keep the feature small enough to finish in one sitting.

Before you move on

The project runs without errors in a fresh browser tab or Node process.
Empty, missing and invalid inputs are handled deliberately.
The code is split into small functions with clear names.
You can explain every line you wrote.

Topics: DOM, Events, Forms.

Assignment

Requirements

Use addEventListener, not inline onclick attributes.
Create todo items with createElement and textContent, not innerHTML for user input.
Prevent the default form submission.
Stop the clock interval when the page is hidden if you use visibilitychange.

Acceptance checklist

The happy path works end to end.
Invalid input produces a useful message, not a crash.
The code is readable and consistently formatted.
You have tested at least three different inputs.

Submission

Keep the project in a folder named after the project. Include a short README.md with run instructions and one paragraph describing what was hardest.

Todo App / Calculator UI / Live Clock