Josiah: Week 5: Make Screen Time Logging Work

You built a lot last week. Your app has a home page with feature cards, login and sign-up pages, a dashboard with tab switching, streak tracking, a friends tab, and a goals tab - all styled with Tailwind. That is an impressive amount of UI for one week.

Here's the thing: none of it works yet. The forms don't save anything. The streak is fake. The friends list is placeholder data. That's completely normal at this stage - you built the front of the house, now it's time to wire up the plumbing.

This week you're going to pick one feature and make it actually functional: the screen time log form. When you're done, you'll be able to type in an app name and hours, hit submit, and see your entries show up on the page with a running total.

Your app: run app.py with the play button to see it in the browser.

v0 prototype: Screen Time App

Check In: What Are You Working On?

Open todo.md - it's currently empty. Write a quick sentence about what you're planning to do today. Something like:

Make the screen time log form actually save entries and show them on the dashboard.

You'll come back to this at the end to set a sharper goal for next week.

Part 1: Essential Catch-up

Your vibe-code-report.md has a prototype link and reflection, but the Known Limitations section still has the template placeholder. Open it and replace the template text with 2-3 honest limitations. For example:

## Known limitations

- Forms don't submit or save data yet - everything is UI only
- Login and sign-up pages look real but don't actually authenticate anyone
- All data (friends, streaks, screen time) is hardcoded placeholder content

Write whatever is true for your app right now. This section is for you to track what still needs work.

Optional: Your favs.py file still has v0 prompt text in it instead of Python code. If you want to fix it, replace the contents with a quick script that prints your favorite app and how many hours you spend on it. Skip this if you'd rather spend your time on the build section.

Part 2: Python Practice

Try this on your own before working on your app. Create a new file called practice.py.

Challenge: Build a "weekly screen time report card" that stores daily screen time hours for 7 days, calculates stats, and prints a formatted report.

Your program should:

  • Store your name as a variable
  • Store screen time hours for each day of the week as separate variables (e.g., monday = 3.5)
  • Calculate the total hours for the week
  • Calculate the average daily hours using a formula: average = total / 7
  • Find which day had the most screen time and which had the least (just pick them manually for now)
  • Set a daily goal (e.g., daily_goal = 2.0)
  • Calculate how many hours over or under the goal you were for the whole week: difference = total - (daily_goal * 7)
  • Print a formatted report card with borders, your stats, and a verdict

Example output (yours will have different data):

╔══════════════════════════════════════╗
  Weekly Screen Time Report
──────────────────────────────────────
  Name:          Josiah
  Daily Goal:    2.0 hrs
──────────────────────────────────────
  Mon: 3.5 hrs
  Tue: 2.0 hrs
  Wed: 4.0 hrs
  Thu: 1.5 hrs
  Fri: 5.0 hrs
  Sat: 6.0 hrs
  Sun: 3.0 hrs
──────────────────────────────────────
  Total:         25.0 hrs
  Average:       3.6 hrs/day
  Best Day:      Thursday (1.5 hrs)
  Worst Day:     Saturday (6.0 hrs)
──────────────────────────────────────
  Goal:          14.0 hrs (2.0 x 7)
  You were:      11.0 hrs OVER
  Verdict:       Time to unplug!
╚══════════════════════════════════════╝

Hints:

  • Start with variables: name = "Josiah", monday = 3.5, tuesday = 2.0, etc.
  • Total formula: total = monday + tuesday + wednesday + thursday + friday + saturday + sunday
  • Use f-strings for the output: print(f" Total: {total} hrs")
  • For the borders, use print("═" * 38) or copy the box-drawing characters from the example

Need a refresher?

  • Variables - how to store text and numbers

  • Print Statements - how to display output, use f-strings, and format cards

Part 3: Make the Log Form Work

Right now the screen time log form in your Today tab looks real but doesn't do anything. You're going to make it actually save entries and display them. Here's the plan:

  1. Update your Flask imports
  2. Create a list to store entries
  3. Make the form submit data
  4. Add a route that handles the submission
  5. Show the logged entries on the page

Step 1: Update your imports

Open app.py and find the import line at the top. It probably looks like:

from flask import Flask

Change it to:

from flask import Flask, request, redirect

  • request lets you read data that a form sends to your server

  • redirect lets you send the user back to another page after they submit

Step 2: Add a list to store entries

Right below app = Flask(__name__), add this line:

screen_time_log = []

This creates an empty Python list. Every time someone submits the form, you'll add their entry to this list. The list lives in your server's memory - it will reset every time you restart the app. That's expected for now.

Step 3: Update the log form

Find the screen time log form in your Today tab (inside your /dashboard route or wherever it lives). Look for the <form> tag. It probably looks something like:

<form class="...">

Change it to:

<form class="..." method="post" action="/log">
  • method="post" tells the browser to send the form data to your server (instead of just putting it in the URL)
  • action="/log" tells it which route to send the data to

Also make sure each input has a name attribute. Your form inputs need names so Python can read them:

<input name="app_name" type="text" ...>
<input name="hours" type="number" ...>

And change the submit button from type="button" to type="submit":

<button type="submit" class="...">Log It</button>

Step 4: Add the POST route

Add this new route to app.py. Put it above the if __name__ == "__main__": line:

@app.route("/log", methods=["POST"])
def log_time():
    app_name = request.form.get("app_name", "Unknown")
    hours = request.form.get("hours", "0")

    screen_time_log.append({
        "app": app_name,
        "hours": float(hours)
    })

    return redirect("/dashboard")

Here's what each line does:

  • methods=["POST"] tells Flask this route only accepts form submissions, not regular page visits

  • request.form.get("app_name", "Unknown") reads the value the user typed into the app_name input. If it's missing, it defaults to "Unknown"

  • float(hours) converts the text "2.5" into the number 2.5 so you can do math with it

  • screen_time_log.append({...}) adds a dictionary (app name + hours) to the list

  • redirect("/dashboard") sends the user back to the dashboard so they can see their entry

Step 5: Display logged entries

Now update the Today tab in your dashboard to show what's been logged. Find the section where the Today tab content is, and add this Python code to build the entries HTML.

Right before the return statement in your /dashboard route, build a string of entries:

    entries_html = ""
    total_hours = 0

    for entry in screen_time_log:
        entries_html += f"""
        <div class="flex justify-between rounded-lg bg-slate-800 px-4 py-3">
            <span class="text-slate-200">{entry['app']}</span>
            <span class="text-cyan-300 font-semibold">{entry['hours']} hrs</span>
        </div>
        """
        total_hours += entry["hours"]

    daily_goal = 2.0
    if total_hours <= daily_goal:
        status = f"✅ Under your {daily_goal}hr goal!"
        status_color = "text-emerald-400"
    else:
        status = f"⚠️ {total_hours - daily_goal:.1f} hrs over your {daily_goal}hr goal"
        status_color = "text-rose-400"

Then in the HTML string for the Today tab, add placeholders where you want the entries to appear:

<h3 class="text-lg font-semibold text-slate-200 mt-6">Today's Log</h3>
<div class="mt-3 space-y-2">
    {entries_html if entries_html else '<p class="text-slate-500">No entries yet. Log your first app above.</p>'}
</div>
<div class="mt-4 rounded-lg bg-slate-900 p-4 text-center">
    <p class="text-lg font-semibold text-cyan-200">Total: <span class="text-white">{total_hours:.1f} hrs</span></p>
    <p class="mt-1 {status_color}">{status}</p>
</div>

This loops through every entry in screen_time_log, builds an HTML card for each one, and adds up the total. Then it checks if you're over or under your daily goal.

Important: Since you're using f-strings inside a triple-quoted HTML string, make sure you use {entries_html} and {total_hours:.1f} directly in your return string - the same way your other pages already plug in variables.

Step 6: Test it

  1. Save app.py (Cmd+S)
  2. If the app is running, click the terminal and press Ctrl+C to stop it
  3. Click the play button to restart
  4. Go to the dashboard, find the log form in the Today tab
  5. Type an app name (like "TikTok") and hours (like "2.5"), click submit
  6. You should be redirected back to the dashboard and see your entry listed
  7. Log a few more entries and watch the total update

If you restart the app, the entries disappear. That's expected - the list only lives in memory. Saving to a file or database is a future upgrade.

Challenge: Real streak tracking

Your Today tab has a streak counter with checkmarks for 7 days. Right now it's hardcoded. Can you make it reflect actual logged data? For example, if screen_time_log has entries, today counts as a day with data. This is tricky - give it a shot or ask the AI chat for help.

Part 4: Save to GitHub

Save your work using the Source Control tab:

  1. Save all files: Cmd+S
  2. Click the Source Control icon on the left sidebar
  3. Type a message like: make screen time log form functional
  4. Click Commit, then Sync Changes

Set Your Goal: Add a New Feature

You have a working log form now. Pick one new feature to add before next week:

  • Make the goal-setting form save the goal - the Goals tab has preset buttons (Beginner 4hr, Intermediate 2.5hr, etc.) but they don't save anything. Make the selected goal actually stick and use it in the "over/under" calculation.
  • Add a weekly summary calculation - show totals for the week, average per day, and which app ate the most time.
  • Make the streak counter real - if you didn't tackle the challenge above, this is a great goal. Count how many days in a row have logged entries.

How to use the AI chat to help you build it

  1. Open the AI chat panel:

    • Codespaces: Click the chat icon in the left sidebar, or press Ctrl+I
    • Cursor: Press Cmd+L

  2. Describe what you want. Be specific:

"I have a Flask app in app.py for tracking screen time. I have a working POST route at /log that saves entries to a Python list. Now I want to make the Goals tab functional - when the user clicks a goal preset (like 'Beginner 4hr'), it should save that as their daily goal and use it to check if they're over or under in the Today tab. Explain each step."

  1. Read what it gives you before pasting it in. If something doesn't make sense, ask:

"Explain the part about storing the goal. How does a global variable keep the value between requests?"

  1. After adding the code, restart your app (Ctrl+C, play button) and test it.

  2. If something breaks, copy the error and ask:

"I got this error: [paste error]. What's wrong?"

For more prompts, see the Prompting Cheat Sheet.

Update your TODO.md

Open todo.md and replace what's there with your chosen feature. Be specific:

  • Good: "Make the Goals tab save a daily goal and use it in the Today tab's over/under check"

  • Not good: "work on my app"

Troubleshooting

The form submits but nothing happens (or I get a 405 error)

  • 405 Method Not Allowed means your route doesn't accept POST requests. Make sure your route has methods=["POST"]: @app.route("/log", methods=["POST"])
  • Make sure the form has method="post" (lowercase) in the <form> tag

The form submits but I get a "Not Found" error

  • Check that action="/log" in the form matches your route exactly: @app.route("/log", ...)
  • Make sure the route is above if __name__ == "__main__":

My entries disappear when I restart the app

This is expected. The screen_time_log list lives in your server's memory. When you stop and restart, the memory is cleared. Saving data permanently (to a file or database) is a future upgrade.

The total shows but the entries don't appear

  • Check that entries_html is being built inside the for loop with +=
  • Make sure {entries_html} is inside your HTML string in the right place
  • Check that screen_time_log is defined at the top of your file (not inside a function)

I get a ValueError about converting to float

  • The hours input might be empty. Make sure it has type="number" and the default is "0": request.form.get("hours", "0")

Something else isn't working

Ask the AI agent:

"I'm getting this error in my Flask app: [paste the error]. I'm trying to make a screen time log form that saves entries to a Python list and displays them. What's wrong?"

Or ask your instructor.

Resources