> Source URL: /unit-3/project-paths/yeoram-k/yeoram-k-2026-04-21.guide # Yeoram's Project Guide **Project:** Workout Weight Calculator **Category:** Web App (Flask) **Last updated:** April 21 --- > Note: This guide reflects the latest state of your project repo. It may not match the most up-to-date version if you've worked since. ## Where You Are Good progress on your project! - `weights.py` holds all the logic: `EXERCISES`, `VALID_UNITS/GOALS/EXERCISES`, `ROUTINE_MAP`, `calculate_weight`, and `get_workout_data`. - `main.py` walks the user through 4 steps (unit → exercise → goal → 1RM), validates each one with `prompt_for_choice` / `prompt_for_number`, and prints a full routine with a top set, back-off sets, and accessories. - `flask` is already in your `pyproject.toml`, so `uv add flask` is done. --- ## Project Structure Your project splits into two kinds of code: - **Business logic — you already handwrote this.** Everything in `weights.py`. - **View / web code — agent-assisted is fine.** `app.py` (reads the form, calls `get_workout_data`, renders a template) and the HTML files in `templates/`. Example target layout: ``` workout-weight-calculator/ ├── main.py ← keep the CLI working (optional — nice for demo) ├── weights.py ← already done — don't touch ├── app.py ← NEW: Flask routes — read form + call weights.get_workout_data ├── templates/ │ ├── base.html ← NEW: Tailwind CDN + mobile viewport + shared layout │ └── index.html ← NEW: the form + the result card ├── pyproject.toml └── README.md ``` --- ## Phase 1: Scaffold the Flask App > **Agent-assisted is fine.** ### Objective Get a Flask app running locally that shows a styled "Workout Weight Calculator" heading on `http://127.0.0.1:5000`. ### Instructions - [ ] Create `app.py` at the project root with one `/` route that renders `index.html` - [ ] Create a `templates/` folder - [ ] Create `templates/base.html` with the Tailwind Play CDN, a mobile viewport meta, and a `{% block content %}` - [ ] Create `templates/index.html` that extends `base.html` and shows a heading - [ ] Run `uv run flask --app app run --debug` and open the page in your browser - [ ] On your phone, open Chrome DevTools → device toolbar (or visit your computer's local IP on your phone on the same Wi-Fi) to confirm it looks OK on a small screen ### Hints **`app.py`:** ```python from flask import Flask, render_template app = Flask(__name__) @app.route("/") def index(): return render_template("index.html") ``` **`templates/base.html`:** ```html Workout Weight Calculator
{% block content %}{% endblock %}
``` **`templates/index.html`:** ```html {% extends "base.html" %} {% block content %}

Workout Weight Calculator

Plan your next session.

{% endblock %} ``` > **Optional — get help from your agent:** > > ```text > I just scaffolded a Flask app with a base.html using the Tailwind > Play CDN. Walk me through how {% extends %} and {% block content %} > connect base.html and index.html. Don't change my code — just explain. > ``` --- ## Phase 2: Build the Form > **Mixed phase.** The _decisions_ about which fields exist (unit, exercise, goal, 1RM) are yours — they mirror the 4 steps in your CLI. The Tailwind _styling_ is agent-assisted. ### Objective Put your 4 CLI questions on one mobile-friendly page as a single `
`. Submitting it reloads `/` with the answers in the URL. ### Instructions - [ ] In `templates/index.html`, add a `` with four inputs: - [ ] **Unit**: radio buttons — `value="1"` (Pounds) and `value="2"` (Kilograms) - [ ] **Exercise**: radio buttons or a `` - [ ] Big phone-friendly button: `Calculate` - [ ] Keep the `name` attributes exactly as `unit`, `exercise`, `goal`, `one_rm` — `app.py` will read these in Phase 3 ### Hints **Reuse the numeric string keys ("1", "2", ...) that `weights.py` already uses — don't change `weights.py`, just send the same strings from the form.** ```html
Goal
{% for value, label in [("1", "Strength"), ("2", "Hypertrophy"), ("3", "Endurance")] %} {% endfor %}
``` **1RM input + submit button:** ```html ``` > **Optional — get help from your agent:** > > ```text > Here is my index.html form. Keep the name attributes and values > exactly as they are. Help me polish the mobile styling — better > spacing, bigger tap targets, a soft card background on the form. > Don't change any form field names. > ``` --- ## Phase 3: Show the Workout Card > **Handwrite the route yourself.** ### Objective When the form submits, read the 4 values from the URL, call `weights.get_workout_data(...)`, and render the same routine your CLI prints — as styled cards on the page. ### Instructions - [ ] In `app.py`, read `unit`, `exercise`, `goal`, `one_rm` from `request.args` - [ ] Validate: only call `weights.get_workout_data(...)` if all four are present and `one_rm` parses as a positive float (use `try/except`) - [ ] Pass `data` (the dict `get_workout_data` returns) to the template. Pass `None` if the user hasn't submitted yet - [ ] In `index.html`, render the result only when `data` is set (`{% if data %}`) - [ ] Show the main lifts and accessories in cards — same info your CLI prints, just styled ### Hints **`app.py`:** ```python from flask import Flask, render_template, request import weights app = Flask(__name__) @app.route("/") def index(): unit = request.args.get("unit") exercise = request.args.get("exercise") goal = request.args.get("goal") one_rm_raw = request.args.get("one_rm") data = None error = None if unit and exercise and goal and one_rm_raw: try: one_rm = float(one_rm_raw) if one_rm <= 0: raise ValueError data = weights.get_workout_data(unit, goal, exercise, one_rm) except ValueError: error = "Please enter a positive number for your 1RM." return render_template("index.html", data=data, error=error) ``` **`index.html`:** ```html {% if error %}

{{ error }}

{% endif %} {% if data %}

{{ data.exercise }}

Goal: {{ data.goal }}

Main lift

Accessories

{% endif %} ``` > **Optional — get help from your agent:** > > ```text > My /dashboard-style result card is rendering. Keep my route logic > and the {% for %} loops exactly as they are. Help me polish the > Tailwind styling on the result card — nicer typography hierarchy, > a subtle divider between main lift and accessories, colored pill > for the goal name. Don't change app.py. > ``` --- ## Checkpoint 2 Readiness By Thursday April 23 at 3pm, you should have: - [ ] `app.py` exists with one `/` route that reads the form and calls `weights.get_workout_data` - [ ] `weights.py` is unchanged — no math moved into `app.py` or the template - [ ] `templates/base.html` has the Tailwind Play CDN and mobile viewport meta - [ ] Form has unit, exercise, goal, and 1RM inputs; the `name` attributes match what `app.py` reads - [ ] Submitting the form shows a styled card with main lift + accessories below the form - [ ] Invalid 1RM (blank, `abc`, negative) shows a friendly message instead of crashing - [ ] Page looks good on a phone-sized viewport (test with DevTools device toolbar) - [ ] `README.md` updated with `uv run flask --app app run --debug` and a one-line description - [ ] Checkpoint 2 entry in `project.journal.md` mentions the web pivot + what was yours vs agent-assisted - [ ] Committed and pushed ## Helpful Resources - [Checkpoint 2 Instructions](../../projects/final-project-checkpoint-2.project.md) - [Flask Setup Guide](../../resources/flask-setup.guide.md) - [Tailwind Play CDN docs](https://tailwindcss.com/docs/installation/play-cdn) — copy-paste setup, no build step - [Tailwind utility cheatsheet](https://nerdcave.com/tailwind-cheat-sheet) — handy when you don't remember a class name --- ## Backlinks The following sources link to this document: - [April 21 -- Pivot to Flask web app with Tailwind](/unit-3/project-paths/yeoram-k/yeoram-k.path.llm.md)