> Source URL: /users/emily-kate-s/week-5.path --- week: 5 date: 2026-04-08 --- # Emily Kate: Week 5: Polish and Expand CaffeineCheck Your CaffeineCheck app is genuinely impressive. You have a home page with a gradient header, a multi-step calculator with progress dots, a result page with real math and color-coded recommendations, and detailed breakdowns of every input factor. That is a fully working web app with form handling, POST, complex calculations, conditional logic, and JavaScript - far beyond what most people build at this stage. This week is about making it even better. You will clean up repeated code, add useful reference content for your users, and build a new page. Since the core app already works, this is the fun part - designing the experience and adding features that make it feel polished. Your app: run `app.py` with the play button to see it at your localhost URL --- ## Check In: What Are You Working On? Your `TODO.md` says "Build CaffeineCheck in Flask this week" - but you already did that, and then some. Time to set a new goal. 1. Open `TODO.md` 2. Replace the current text with a new goal for this week, like: "Add an about page and a common drinks reference section" - [ ] I updated `TODO.md` with a new goal --- ## Part 1: Python Practice Try this on your own before working on your app. Create a new file called `practice.py`. **Challenge:** Build a "daily caffeine tracker" that tracks multiple drinks throughout the day, calculates a running total, shows how much caffeine allowance remains, and prints a formatted log. Your program should: - Store the user's name, body weight (lbs), and a daily caffeine limit using the formula: `daily_limit = weight * 2.7` - Store at least 4 drinks as separate variables, each with a name and mg amount (e.g. `drink_1_name = "Morning Coffee"`, `drink_1_mg = 95`) - Calculate the total caffeine consumed by adding all drink amounts - Calculate the remaining allowance: `remaining = daily_limit - total_consumed` - Print a formatted caffeine log with borders, each drink listed with its mg value, the total, the daily limit, and the remaining allowance - At the bottom, print a status message: if remaining is 0 or less, print "OVER LIMIT", if remaining is under 80, print "CAUTION", otherwise print "SAFE" **Example output** (yours will have different data): ``` ╔══════════════════════════════════════╗ Daily Caffeine Log - Emily Kate ══════════════════════════════════════ Weight: 130 lbs Daily Limit: 351 mg ────────────────────────────────────── 1. Morning Coffee 95 mg 2. Energy Drink 80 mg 3. Pre-Workout Shot 200 mg 4. Afternoon Tea 47 mg ────────────────────────────────────── Total Consumed: 422 mg Remaining: 0 mg ══════════════════════════════════════ Status: OVER LIMIT Consider switching to water! ╚══════════════════════════════════════╝ ``` **Hints:** - Start with your variables: `name = "Emily Kate"`, `weight = 130`, then calculate `daily_limit = weight * 2.7` - Use `round()` to avoid long decimals: `daily_limit = round(weight * 2.7)` - For the status, use `if`, `elif`, `else` to check `remaining` - Use `max(0, remaining)` if you want to show 0 instead of a negative number - Use f-strings to line things up: `print(f" 1. {drink_1_name:<22} {drink_1_mg} mg")` 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 caffeine log - [ ] I committed and synced my work --- ## Part 2: Build - Polish and Expand Your app already works well. This section focuses on making it more useful and more polished. ### Step 1: Add a Common Drinks Reference Section to the Home Page Users have to enter caffeine in milligrams, but most people don't know how many mg are in their drink. Add a reference card to your home page so they can look it up. Find the home route in `app.py`. Look for the "How It Works" card. Right **below** that card's closing ``, add a new card: ```html

Common Drinks - Caffeine Reference

Use these when filling in the calculator

Brewed Coffee (8 oz) 95 mg
Red Bull (8.4 oz) 80 mg
Monster Energy (16 oz) 160 mg
Mountain Dew (12 oz) 54 mg
Black Tea (8 oz) 47 mg
Green Tea (8 oz) 28 mg
Coca-Cola (12 oz) 34 mg
``` This uses Tailwind's `flex justify-between` to put the drink name on the left and the mg on the right - a clean, scannable layout. Your design instincts will probably tell you to tweak the colors or spacing. Go for it. - [ ] I added the common drinks reference card to the home page - [ ] The drinks show up in a clean two-column layout ### Step 2: Add an `/about` Page This was on your challenge list from last week. Add a new route that explains the science behind your calculator and sets expectations. Add this route to `app.py`, below your existing routes but above the `if __name__` block: ```python @app.route("/about") def about(): return """ CaffeineCheck - About

About CaffeineCheck

The Science

The FDA suggests that healthy adults can safely consume up to about 400mg of caffeine per day. For teens, the American Academy of Pediatrics recommends no more than 100mg per day. CaffeineCheck uses a simplified formula based on body weight (about 2.7mg per pound) and adjusts for exercise intensity, since caffeine affects heart rate and hydration during physical activity.

Important Disclaimer

This calculator provides rough educational estimates only. It is not medical advice. Individual tolerance varies based on genetics, medications, sleep, and many other factors. Always consult a doctor if you have concerns about caffeine intake.

Built By

CaffeineCheck was created by Emily Kate Sanderson as a project for CSC 121. The goal is to help student athletes make informed decisions about caffeine.

← Back to Home

""" ``` Now link to it from the home page. Find the "Built by Emily Kate S." line near the bottom of the home route and replace it with: ```html

Built by Emily Kate S. · About This App

``` - [ ] I added the `/about` route - [ ] The home page links to `/about` - [ ] The about page matches the style of my other pages ### Step 3: Reduce Repeated HTML You will notice every page has the same `` block (charset, title, Tailwind script) and the same gradient header. That is a lot of repeated code. One simple way to reduce it now is to save the shared parts as variables at the top of your file. Near the top of `app.py`, right after `app = Flask(__name__)`, add: ```python def page_head(title): return f""" CaffeineCheck - {title} """ def page_header(text): return f"""

{text}

""" PAGE_FOOTER = """ """ ``` Then in any route you can write: ```python @app.route("/about") def about(): return page_head("About") + page_header("About CaffeineCheck") + """
...your content here...
""" + PAGE_FOOTER ``` You don't have to convert every route right now. Try it on the `/about` page first. If it works and feels cleaner, apply it to the others when you are ready. - [ ] I created the helper functions - [ ] I updated at least one route to use them ### Step 4: Test Everything 1. Save `app.py` (**Cmd+S**) 2. If the app is already running, click inside the terminal and press **Ctrl+C** to stop it 3. Click the **play button** to restart 4. Check: home page shows the drinks reference card, the "About" link works, the about page looks right, and the calculator still works end to end - [ ] Home page shows common drinks reference - [ ] About page loads and looks correct - [ ] Calculator still works (form, result, color-coded output) ### Challenge: Add a `/history` Page This is a stretch goal for if you have time. The idea: save each calculation result to a Python list, and create a `/history` route that displays them all. Here is the pattern. Near the top of `app.py`, create an empty list: ```python calculation_history = [] ``` In your `/result` route, after calculating `remaining`, add: ```python calculation_history.append({ "sport": sport, "intensity": intensity, "weight": weight, "caffeine_had": caffeine_had, "remaining": remaining, }) ``` Then create a `/history` route that loops through `calculation_history` and displays each entry in a card. Try using the AI chat to help you build the loop and the HTML for this one - it is a great use case for the AI assistant. - [ ] (Optional) I added calculation history tracking - [ ] (Optional) I created a `/history` page that shows past calculations --- ## Part 3: 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: `add about page and drinks reference` 4. Click **Commit**, then **Sync Changes** - [ ] I committed and synced my changes --- ## Set Your Goal: Add a New Feature You have a working, polished app. Now pick something that makes it yours. Open `TODO.md` and write one specific feature you want to add before next week: - **Drink reference guide on the calculator page** - add a collapsible reference right next to the caffeine input so users don't have to go back to the home page - **Save and share results** - add a way for users to copy or screenshot their result - **Sport-specific recommendations** - different advice for endurance sports vs. power sports vs. skill sports - **Dark mode toggle** - add a button that switches between light and dark color schemes (great for your design interests) ### 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. Use this prompt template: > I'm building CaffeineCheck, a caffeine intake calculator for student athletes, in Flask. This week I'm working on [your chosen feature]. > Here's my current code: [paste your `app.py` or the specific route]. > I want to [describe the feature in detail]. > Can you help me understand what I need to add and guide me through it step by step? > Don't just give me the answer. Help me understand the steps. 3. 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 Write your chosen feature. Be specific: - Good: "Add a dark mode toggle button that switches between emerald and dark gray themes" - Not good: "make it look better" - [ ] 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 ### Tailwind styles not showing on a new page Make sure the `` tag is in the `` of every page. If you are using the `page_head()` helper function, it handles this automatically. ### The drinks reference card looks misaligned Check that each drink row uses `class="flex justify-between"`. The `flex` puts the name and mg on the same line, `justify-between` pushes them apart. ### The `/about` page gives a 404 Make sure the `@app.route("/about")` decorator is directly above the `def about():` line, and that the route is above the `if __name__` block at the bottom of the file. ### CSS changes are not showing up Hard refresh the browser: **Cmd+Shift+R**. Tailwind via CDN sometimes caches. ### "Address already in use" Press **Ctrl+C** in the terminal to stop the old process, then click the play button again. ### Something else isn't working Ask the AI agent: > "I'm getting this error in my Flask app: [paste the error]. My app is CaffeineCheck, a caffeine calculator for student athletes. I just added [describe what you changed]. What's wrong?" Or ask your instructor. --- ## Resources - [Flask](../../resources/flask.resource.md) - how Flask routes, forms, and templates work - [Tailwind CSS](../../resources/tailwind.resource.md) - how to style pages with Tailwind utility classes - [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: Polish and Expand CaffeineCheck](/students.path.llm.md) - [Week 5: Polish and Expand CaffeineCheck](/users/emily-kate-s/index.path.llm.md)