project habittracker

Step 4: Streaks

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

Calculate and display streaks.

Where We Are

Habits are checkable. Now let's show how many days in a row each habit has been completed.

Calculate the Streak

terminal
Add a method to the Habit model that calculates the current streak:
- Start from today (or yesterday if today isn't complete yet)
- Count backwards through consecutive completed days
- Return the count

For example: if a habit was completed today, yesterday, and the day before,
the streak is 3.

Display Streaks

terminal
Update each habit row to show the streak:
- Show a flame emoji and the number (e.g., "🔥 5")
- Only show the streak if it's greater than 0
- Place it on the right side of the row
- Use a subtle secondary color

Test It

  1. Run the app
  2. Check off a habit today
  3. The streak should show "🔥 1"
  4. (You can test longer streaks by manually adding past dates in the code temporarily)

Add a Summary

terminal
At the top of the screen, below the date, add a summary:
- "X of Y completed today"
- Show a subtle progress indicator
- Update it as habits are checked off

Checkpoint

By now you should have:

  • Streaks calculate correctly
  • Streak displays next to each habit
  • Daily summary shows at the top
  • Zero streaks are hidden

What You Learned

  • Date math in Swift
  • Computed properties
  • Displaying secondary information
  • Summary/aggregate data

Exercises

  1. Paste the "Calculate the Streak" and "Display Streaks" prompts, check off a habit, and confirm it shows "🔥 1".
  2. Ask Claude to temporarily seed a habit with a few past completion dates so you can verify the streak counts multiple consecutive days (then remove the seed).
  3. Add the daily summary and watch the "X of Y completed today" text update live as you toggle habits on and off.