Chapter 01 Activity — Daily Focus Dashboard

Why This Project?

The logo animation in Chapter 00 showed you that AI can help with visual, creative work. This chapter proves the same is true for functional, practical tools — the kind you’d actually open every morning.

A focus dashboard is the perfect second project because it introduces three of the most useful browser-native concepts you’ll use in almost every app you ever build:

localStorage

Save data to the user’s browser without a database, server, or account. Data persists across page reloads and browser restarts.

setInterval

Run a function on a repeating schedule — every second, every minute. This powers both the live clock and the countdown timer.

DOM Manipulation

Update what’s visible on the page in real time without reloading. Every tick of the clock, every state change in the timer.

State Management

Tracking what mode the app is in — running, paused, editing — and making the UI reflect that state clearly at all times.

JavaScript localStorage setInterval DOM State GitHub Pages

The AI Angle for This Chapter

In Chapter 00, AI helped you generate shapes and coordinates. Here, the challenge is different — you’re describing behavior, not just appearance. This is where prompting gets more interesting.

Describing behavior to AI requires you to think through the logic yourself first. If you can’t explain what should happen, AI can’t build it. This is a feature, not a bug — it forces clarity of thought before a single line of code is written.

“If you can’t explain the logic to a person, you can’t explain it to AI either.”

A dashboard like this has several distinct behaviors that each need to be thought through before prompting:

What happens when the timer reaches zero?
What should the page remember between visits?
How does the user know their intention was actually saved?
What does "paused" look like vs. "stopped" vs. "complete"?

Answering these questions is your job. That’s the human priority of creation. AI handles the syntax once you know what you want.

Before You Build — Design the Logic

Don’t open AI yet. Answer these questions first in writing or out loud:

What three things do you want to see every time you open a new browser tab or start your day?
How long is your ideal focus session? Do you want preset options or a custom input?
What should happen when the timer finishes — sound, visual change, a log entry, all of the above?
What’s one thing you want to remember across browser sessions? (e.g. your intention, your streak, your goals)
What would make you actually open this page every day vs. forget about it?

These answers are your feature spec. Every prompt you write should serve this spec.

Build It

Phase 1

Scaffold the page

Start a new index.html in your repo (or a new folder chapters/01/). Ask AI to set up a dark-themed single-page layout with three sections: a clock area, an intention area, and a timer area. Give it your color palette.

Build a single HTML page with a dark background (#111), white text,
and red (#e00) accents. It should have three stacked sections centered
on the page: a large live clock at the top, a text intention field in
the middle, and a countdown timer at the bottom. No frameworks, no
libraries. Vanilla HTML, CSS, JavaScript only.

Phase 2

Wire up the live clock

The clock needs to update every second and display both time and date. Ask AI to implement this, then observe how setInterval and new Date() work together. This is one of the most reusable patterns in JavaScript.

Add a live clock that updates every second using setInterval and
new Date(). Show the time in 24-hour format (HH:MM:SS) in a large
font. Below it, show the full date (e.g. MONDAY, MAY 17, 2026)
in a smaller muted font. Make it visually clear this is a live
clock, not a timer — add a small pulsing indicator label.

Phase 3

Build the intention field with localStorage

This is the most important UX challenge in the project: how do you make it obvious what saving means and that it worked? Tackle this in two sub-prompts.

Add a "Today's Intention" field. Clicking it opens a text input.
When the user presses Enter or clicks Save, the value is stored
in localStorage under the key 'my_intention'. On page load,
if a saved value exists, display it. Add a visible status message
that shows whether the intention is saved or not.

Once that works, push back on the UX:

The save state isn't clear enough. Add a toast notification that
appears briefly at the bottom of the screen confirming the save.
Also add Cancel and Save buttons that appear while editing,
and an Escape key shortcut to cancel.

Phase 4

Build the focus timer

A countdown timer has more state than it appears. Walk through the logic before prompting: it needs a running state, a paused state, preset durations, and a completion handler.

Add a countdown focus timer. It should have preset buttons for
25, 45, and 60 minutes, and a 5-minute break option. A Start
button begins the countdown. While running, the button changes
to Pause. Pausing preserves the remaining time. A Reset button
returns to the selected preset. When the timer reaches zero,
log the completed session with a timestamp and the current
intention to a list below the timer.

Phase 5

Polish and publish

Review your dashboard with fresh eyes. Ask:

Is it obvious what each element does without reading any instructions?
Does the visual state of the timer clearly communicate running vs. paused vs. idle?
Is the intention save status unambiguous?

Make targeted fix prompts for anything that feels unclear, then push to GitHub and enable Pages. You’ve shipped a real productivity tool.

Concepts You Just Used

Look back at your finished code and find each of these patterns. Understanding where they live in your code is as important as knowing they exist.

setInterval(fn, 1000) — runs fn every 1000ms (1 second)
localStorage.setItem(key, value) — saves a string to the browser
localStorage.getItem(key) — retrieves it on next load
element.textContent = ... — updates visible text without reloading
element.classList.toggle('class', bool) — adds/removes a CSS class based on state
clearInterval(id) — stops a running interval (used to pause the timer)
A state variable like let running = false — the app’s memory of what mode it’s in

These seven patterns appear in virtually every interactive web app ever built. You didn’t just build a timer — you built the foundation for understanding most of the JavaScript you’ll encounter going forward.

Reflect

What was the hardest behavior to describe to AI? Why was it hard to put into words?
Did AI get something wrong on the first try? What was the fix prompt you used?
How is describing app behavior to AI similar to writing instructions for another person?
What did the AI suggest that you kept exactly as-is? What did you change?
If you were handing this dashboard to a friend, what would you want to explain to them first?

The gap between what you intended and what AI produced is the most valuable learning in this chapter. That gap is where your skills grow.

Go Further

🔔 Timer Sound

Use the Web Audio API to play a soft chime when the timer completes. No audio files needed — generate tones in code.

📈 Streak Tracker

Save a daily session count to localStorage. Display a streak counter that resets if you miss a day.

🌟 Custom Themes

Add a palette switcher that changes CSS custom properties at runtime and saves the choice to localStorage.

📄 Export Log

Add a button that exports today’s session log as a plain text or markdown file the user can download.

🕐 Custom Presets

Let the user define their own timer durations and save them to localStorage so they persist across sessions.

💬 Daily Prompt

Add a rotating daily question above the intention field — a different reflection prompt each day of the week.