Elizabeth - Week 5: Add the Mood Feature

Your Decision Helper app is working. You have a home page, a form that takes options, a result page that picks one randomly with a fun reason, and error handling for when someone doesn't fill in enough options. That's a real, functioning web app.

This week you're going to add the feature you set as your goal: a mood dropdown that changes the reason on the result page based on how the user is feeling. This means the app gets smarter -- instead of just random silly reasons, the response actually connects to the person's mood.

Your app: run app.py with the play button to see it at http://localhost:3300

Part 1: Python Practice

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

Challenge: Build a "mood report card" that takes a mood, a list of activities, and prints a formatted recommendation card.

Your program should:

  • Store a person's name, their current mood, and a numeric stress level (1-10) as variables
  • Store at least 3 activity suggestions as separate variables
  • Calculate a "chill score" using a formula: chill_score = (10 - stress_level) * 2
  • Print a formatted recommendation card with borders, the person's info, their chill score, and the list of activities

Example output (yours will have different data):

╔══════════════════════════════════════╗
  Mood Report Card
──────────────────────────────────────
  Name:         Elizabeth
  Current Mood: Stressed
  Stress Level: 7 / 10
  Chill Score:  6 / 20
──────────────────────────────────────
  Try one of these:
  1. Go for a walk
  2. Listen to music
  3. Watch a comfort show
╚══════════════════════════════════════╝

Hints:

  • Start with your variables: name = "Elizabeth", mood = "Stressed", stress_level = 7
  • The formula: chill_score = (10 - stress_level) * 2
  • Use f-strings to plug your variables into print statements: print(f" Name: {name}")
  • Use print("═" * 38) to make borders

Need a refresher?

  • Variables -- how to store text and numbers

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

Part 2: Add the Mood Dropdown

Right now your /decide form asks for a question and options. You're going to add a mood dropdown so the user can tell the app how they're feeling, and the result page will give a reason that matches their mood.

Step 1: Add the dropdown to your form

Open app.py and find the /decide route. Look for the line with the "Choose For Me!" button:

<button class="rounded-xl bg-blue-600 px-6 py-3 font-semibold text-white shadow hover:bg-blue-700" type="submit">Choose For Me!</button>

Right above that button line, add this dropdown:

<div>
    <label class="block text-sm font-medium text-slate-700">How are you feeling?</label>
    <select class="mt-1 w-full rounded-lg border-2 border-blue-200 px-3 py-2 focus:border-blue-500 focus:outline-none" name="mood">
        <option value="happy">Happy</option>
        <option value="stressed">Stressed</option>
        <option value="bored">Bored</option>
        <option value="adventurous">Adventurous</option>
        <option value="tired">Tired</option>
    </select>
</div>

This creates a dropdown menu with 5 mood options. The name="mood" part is important -- that's how your Python code will read what the user picked.

Step 2: Update the result route to use the mood

Now find the /result route in app.py. You need to change two things:

First, right after the line question = request.form.get("question", "your decision"), add:

    mood = request.form.get("mood", "happy")

This reads what mood the user picked from the dropdown.

Second, replace your current reasons list and the reason = random.choice(reasons) line with mood-specific reasons:

    mood_reasons = {
        "happy": [
            "You're already in a great mood -- this will keep the good vibes going!",
            "Happy people make the best choices. This one sparks joy.",
            "Your smile says it all. Go with this one!",
        ],
        "stressed": [
            "This is the low-effort, high-reward option. You deserve easy today.",
            "When in doubt, pick the one that feels like a deep breath.",
            "Stress says overthink it. We say just go with this.",
        ],
        "bored": [
            "This is the most interesting option. Trust us.",
            "Boredom is just untapped adventure. This one fixes that.",
            "Shake things up. This is the one you wouldn't normally pick.",
        ],
        "adventurous": [
            "Fortune favors the bold. This is the bold choice.",
            "You asked for adventure and the universe answered.",
            "This option has main character energy.",
        ],
        "tired": [
            "This is the comfiest option. Cozy wins today.",
            "Your bed would approve of this choice.",
            "Low energy? This is the path of least resistance.",
        ],
    }

    reasons = mood_reasons.get(mood, mood_reasons["happy"])
    reason = random.choice(reasons)

Here's what this does:

  • mood_reasons is a dictionary -- it's like a lookup table. Each mood (the key) maps to a list of reasons (the value).

  • mood_reasons.get(mood, mood_reasons["happy"]) looks up the user's mood in the dictionary. If their mood isn't found for some reason, it falls back to the "happy" reasons.

  • random.choice(reasons) picks one random reason from that mood's list, same as before.

Step 3: Show the mood on the result page

Still in the /result route, find this line in your HTML:

<h1 class="text-xl font-semibold text-blue-900">You asked: {question}</h1>

Right below it, add a line showing the mood:

<p class="mt-2 text-sm text-slate-500">Mood: {mood}</p>

Step 4: Test it

  1. Save app.py (Cmd+S)
  2. If the app is still running, click inside the terminal and press Ctrl+C to stop it
  3. Click the play button to restart the app
  4. Go to your app in the browser, fill in a question and options, pick a mood, and click "Choose For Me!"
  5. The result page should now show a reason that matches your mood

Try different moods and see how the reasons change.

Part 3: Make It Yours

Some ideas to keep improving your app:

  • Add more moods -- add entries to the mood_reasons dictionary and options to the dropdown (anxious, excited, nostalgic, etc.)

  • Change the page color based on mood -- use the mood variable in your CSS class: happy = warm colors, stressed = calming blue, etc.

  • Add more reasons -- the more you add, the more varied and fun the results feel

  • Customize the reasons -- make them sound like you. Inside jokes, references you like, whatever makes it fun

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: add mood dropdown to decision helper
  4. Click Commit, then Sync Changes

Set Your Goal: Add a New Feature

Pick one new feature to add before next week:

  • Add a /history page that shows the last few decisions (store them in a Python list)
  • Change the page background color based on the mood the user picked
  • Add a "share with a friend" button that copies the result to clipboard

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. I want to add a /history route that shows the last 10 decisions the user made. Store them in a Python list. Make the page look like my other pages (same Tailwind classes, same blue gradient). Explain what each part does."

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

"Explain the part about storing decisions in a list. How does the list keep the data between requests?"

  1. After adding the code, run your app (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 the current text with your chosen feature. Be specific:

  • Good: "Add a /history page that shows my last 10 decisions"

  • Not good: "work on my app"

Troubleshooting

The mood dropdown doesn't show up

  • Make sure you added the <div>...<select>...</select>...</div> block inside the <form> tag, above the submit button
  • Save the file (Cmd+S) and restart the app (Ctrl+C, then play button)

The result page still shows random reasons (not mood-specific)

  • Make sure you added mood = request.form.get("mood", "happy") in the /result route
  • Make sure you replaced the old reasons list with the mood_reasons dictionary
  • Check that reasons = mood_reasons.get(mood, mood_reasons["happy"]) comes after the dictionary, not before

KeyError or NameError about "mood"

  • Check spelling: the dropdown's name="mood" must match exactly with request.form.get("mood")
  • Make sure the mood variable is created before you try to use it in the HTML

The app crashes when I submit the form

  • Look at the error in the terminal. The last line usually says what went wrong.
  • Common cause: a missing comma between items in the mood_reasons dictionary. Each list needs a comma after the closing ] (except the last one).

Something else isn't working

Ask the AI agent:

"I'm getting this error in my Flask app: [paste the error]. My app is a decision helper and I just added a mood dropdown. What's wrong?"

Or ask your instructor.

Resources