# Streaks, deleting, and a style pass Course: Ship Your First App — https://zero2vibecode.com/learn/ship-your-first-app Canonical URL: https://zero2vibecode.com/learn/ship-your-first-app/0-3-streaks-delete-and-style Last updated: 2026-10-22 Three more turns turn a working page into one worth opening every day: a seven-day view with a streak, a safe way to delete, and styling that works on a phone. The page works and remembers. Now three turns make it worth using: seeing a week at a glance, getting rid of a habit, and looking like something you would open every morning. Same rhythm as before: run it, read the diff, commit it. ## Step 4: the last seven days and a streak > Show the last seven days for each habit, oldest first, each with its own checkbox, so I can tick a day I forgot. Next to the name, show the current streak: the number of days in a row it was done, ending today, or ending yesterday if today is not ticked yet. The "or ending yesterday" part is the detail that makes it feel right. Without it, your streak drops to zero every morning until you tick the day, which reads as a punishment for being awake. ### Run it You do not have to wait a week to test this. Tick the three days before today: the streak says 3. Untick the middle one: it drops to 1. Tick today: it goes up by one. Now untick everything except a day five days ago: the streak is 0, because the run does not reach today or yesterday. ### Read the diff Find the function that counts the streak. It should walk backwards one day at a time from today, or from yesterday, and stop at the first day that is not ticked. Two things to look for: - **Going back a day.** Subtracting a day with the date's own day-setting function handles the end of a month correctly. Hand-made arithmetic on day numbers or on milliseconds is where month boundaries and clock changes go wrong. - **Labels on the checkboxes.** Seven identical checkboxes in a row are meaningless to a screen reader. Each one should say which habit and which day it is. Checkpoint: [step 4 in the reference repository](https://github.com/FunFactoryDev/habit-tracker-with-an-ai-agent/commit/710aa2384a047cb352aced1dca286c381eedc38b). It also redraws the page when you switch back to the tab, because a tab left open overnight would otherwise still think it is yesterday. Your agent may not think of that on its own. If it did not, that is a fair one-line follow-up turn before you commit. ## Step 5: deleting, and the empty state > Add a Delete button to each habit that asks for confirmation first, and show "No habits yet" when the list is empty. ### Run it Delete a habit and cancel the confirmation: nothing changes. Delete it and confirm: it is gone, and stays gone after a reload. Delete the last one: the empty message appears. ### Read the diff Check that deleting also saves. A delete that only changes what is on screen comes back on the next reload, which looks like the button is broken. In the reference version the order is: ask, remove, save, redraw. Checkpoint: [step 5 in the reference repository](https://github.com/FunFactoryDev/habit-tracker-with-an-ai-agent/commit/950e77ffe69fed420e1dc0318a270c894141d683). ## Step 6: the style pass > Add a style.css. Make it readable on a phone first: one column, comfortable tap targets for the day checkboxes, and today's column highlighted. Follow the system's light or dark setting. Do not touch app.js. Styling comes last for a reason: it is the change least likely to break behaviour, and the one you will want to redo most. Keeping it in its own commit means you can redo it without touching anything that works. ### Run it Narrow the browser window as far as it goes, or open the file on your phone. The seven days should still fit on one line, and you should be able to tick each one without zooming. Switch your system to dark mode and back. ### Read the diff Look at the list of changed files first. It should be style.css, new, and index.html, with one added line that links the stylesheet and maybe a wrapper element. If app.js changed, ask why before you accept it. Checkpoint: [step 6 in the reference repository](https://github.com/FunFactoryDev/habit-tracker-with-an-ai-agent/commit/3d188dae2e6abccd9daf851106d3ba57c0423d45). The JavaScript is untouched. **When the agent offers more.** Around here an agent will often offer something extra: reminders, a chart, an export button. Check it against your not-doing list. Reminders and charts are on it, so the answer is no, and it goes in a list of ideas for the next version instead of into this one. ## Where you are Six commits, each one a working state. The app does everything the README promised. One step left, and it is the one that turns a folder into a project: putting it online. **How many turns should these three steps take?** Often more than three. A step that needs a follow-up turn, for an edge case or a fix you spotted in the diff, is normal. What matters is that each commit is a working state, not that each step was one prompt. **Should I write the CSS myself?** If you enjoy it, yes. There is no rule that the agent types everything. Styling is also a safe place to learn, because a mistake there changes how the page looks, not what it does.