> Source URL: /users/josiah-c/week-5.path --- week: 5 date: 2026-04-08 --- # 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](https://v0.app/chat/screen-time-app-dS1uc1GOs0F?ref=IULB9U) --- ## 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. - [ ] I opened `todo.md` and wrote today's plan --- ## 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: ```markdown ## 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. - [ ] I updated the Known Limitations section in `vibe-code-report.md` - [ ] I committed and synced **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](../../resources/variables.resource.md) - how to store text and numbers - [Print Statements](../../resources/print-statements.resource.md) - how to display output, use f-strings, and format cards - [ ] I wrote `practice.py` and it runs without errors - [ ] My output looks like a formatted report card - [ ] I committed and synced my work --- ## 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: ```python from flask import Flask ``` Change it to: ```python 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 - [ ] I updated my import line ### Step 2: Add a list to store entries Right below `app = Flask(__name__)`, add this line: ```python 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. - [ ] I added `screen_time_log = []` near the top of `app.py` ### 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 `
` tag. It probably looks something like: ```html ``` Change it to: ```html ``` - `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: ```html ``` And change the submit button from `type="button"` to `type="submit"`: ```html ``` - [ ] My form has `method="post"` and `action="/log"` - [ ] Each input has a `name` attribute - [ ] The button is `type="submit"` ### Step 4: Add the POST route Add this new route to `app.py`. Put it **above** the `if __name__ == "__main__":` line: ```python @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 - [ ] I added the `/log` POST route ### 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: ```python entries_html = "" total_hours = 0 for entry in screen_time_log: entries_html += f"""
{entry['app']} {entry['hours']} hrs
""" 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: ```html

Today's Log

{entries_html if entries_html else '

No entries yet. Log your first app above.

'}

Total: {total_hours:.1f} hrs

{status}

``` 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. - [ ] The Today tab shows logged entries - [ ] The total hours and goal status appear below the entries ### 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. - [ ] I can submit the form and see entries appear - [ ] The total updates as I add more entries - [ ] The goal status shows whether I'm over or under ### 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. - [ ] I attempted the streak challenge (optional) --- ## 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** - [ ] I committed and synced my 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." 3. **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?" 4. After adding the code, restart your app (Ctrl+C, play button) and test it. 5. 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](../../resources/prompting-cheat-sheet.guide.md). ### 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" - [ ] I picked a feature and wrote it in `todo.md` - [ ] I tried using the AI chat to start building it - [ ] I committed and synced my work --- ## 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 `` 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 - [Flask](../../resources/flask.resource.md) - how Flask routes and forms work - [Tailwind CSS](../../resources/tailwind.resource.md) - styling reference - [GitHub Codespaces Guide](../../resources/github-codespaces.guide.md) - how to open and use Codespaces - [Cursor Guide](../../resources/cursor.resource.md) - how to open and use Cursor - [GitHub Basics](../../resources/github-basics.guide.md) - how to commit and push your code - [Prompting Cheat Sheet](../../resources/prompting-cheat-sheet.guide.md) - good prompts to use with the AI agent --- ## Backlinks The following sources link to this document: - [Week 5: Make Screen Time Logging Work](/students.path.llm.md) - [Week 5: Make Screen Time Logging Work](/users/josiah-c/index.path.llm.md)