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"

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 - how to store text and numbers

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

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 </div>, add a new card:

<div class="mt-6 rounded-2xl bg-white p-6 shadow">
    <h2 class="text-xl font-semibold text-emerald-800">Common Drinks - Caffeine Reference</h2>
    <p class="mt-2 text-sm text-slate-500">Use these when filling in the calculator</p>
    <div class="mt-4 space-y-2 text-slate-700">
        <div class="flex justify-between border-b border-emerald-100 pb-2">
            <span>Brewed Coffee (8 oz)</span>
            <span class="font-semibold text-emerald-700">95 mg</span>
        </div>
        <div class="flex justify-between border-b border-emerald-100 pb-2">
            <span>Red Bull (8.4 oz)</span>
            <span class="font-semibold text-emerald-700">80 mg</span>
        </div>
        <div class="flex justify-between border-b border-emerald-100 pb-2">
            <span>Monster Energy (16 oz)</span>
            <span class="font-semibold text-emerald-700">160 mg</span>
        </div>
        <div class="flex justify-between border-b border-emerald-100 pb-2">
            <span>Mountain Dew (12 oz)</span>
            <span class="font-semibold text-emerald-700">54 mg</span>
        </div>
        <div class="flex justify-between border-b border-emerald-100 pb-2">
            <span>Black Tea (8 oz)</span>
            <span class="font-semibold text-emerald-700">47 mg</span>
        </div>
        <div class="flex justify-between border-b border-emerald-100 pb-2">
            <span>Green Tea (8 oz)</span>
            <span class="font-semibold text-emerald-700">28 mg</span>
        </div>
        <div class="flex justify-between pb-2">
            <span>Coca-Cola (12 oz)</span>
            <span class="font-semibold text-emerald-700">34 mg</span>
        </div>
    </div>
</div>

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.

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:

@app.route("/about")
def about():
    return """
    <html>
    <head>
        <meta charset="utf-8">
        <title>CaffeineCheck - About</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="min-h-screen bg-emerald-50 text-slate-900">
        <div class="bg-gradient-to-br from-emerald-700 to-emerald-500 px-6 py-8 text-center text-white">
            <h1 class="text-2xl font-bold">About CaffeineCheck</h1>
        </div>
        <div class="mx-auto max-w-xl px-6 py-10 space-y-6">
            <div class="rounded-2xl bg-white p-6 shadow">
                <h2 class="text-lg font-semibold text-emerald-800">The Science</h2>
                <p class="mt-3 text-slate-600">
                    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.
                </p>
            </div>
            <div class="rounded-2xl bg-white p-6 shadow">
                <h2 class="text-lg font-semibold text-emerald-800">Important Disclaimer</h2>
                <p class="mt-3 text-slate-600">
                    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.
                </p>
            </div>
            <div class="rounded-2xl bg-white p-6 shadow">
                <h2 class="text-lg font-semibold text-emerald-800">Built By</h2>
                <p class="mt-3 text-slate-600">
                    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.
                </p>
            </div>
            <p class="text-center">
                <a class="text-emerald-700 underline hover:text-emerald-900" href="/">&larr; Back to Home</a>
            </p>
        </div>
    </body>
    </html>
    """

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:

<p class="mt-8 text-center text-sm text-slate-500">
    Built by Emily Kate S. &middot;
    <a class="text-emerald-600 underline hover:text-emerald-800" href="/about">About This App</a>
</p>

Step 3: Reduce Repeated HTML

You will notice every page has the same <head> 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:

def page_head(title):
    return f"""
    <html>
    <head>
        <meta charset="utf-8">
        <title>CaffeineCheck - {title}</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="min-h-screen bg-emerald-50 text-slate-900">
    """


def page_header(text):
    return f"""
        <div class="bg-gradient-to-br from-emerald-700 to-emerald-500 px-6 py-8 text-center text-white">
            <h1 class="text-2xl font-bold">{text}</h1>
        </div>
    """


PAGE_FOOTER = """
    </body>
    </html>
"""

Then in any route you can write:

@app.route("/about")
def about():
    return page_head("About") + page_header("About CaffeineCheck") + """
        <div class="mx-auto max-w-xl px-6 py-10 space-y-6">
            ...your content here...
        </div>
    """ + 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.

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

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:

calculation_history = []

In your /result route, after calculating remaining, add:

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.

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

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.

  1. 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

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"

Troubleshooting

Tailwind styles not showing on a new page

Make sure the <script src="https://cdn.tailwindcss.com"></script> tag is in the <head> 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