Project 7: Recipe Optimizer & Converter

📋 Project Brief

Build a recipe scaling and unit conversion tool designed for both professional and home cooks. The app parses ingredient strings (e.g., "1/2 cup of milk"), performs mathematical transformations on fractional quantities, and converts between Metric and Imperial systems. The UI must be touch-friendly and highly legible for use in kitchen environments.

🎯 Learning Objectives

• Parse complex natural-language strings into structured data (fractions, units, ingredients)
• Perform accurate arithmetic on fractional values
• Build unit conversion systems with ratio-preserving logic
• Use the Wake Lock API to prevent screen dimming
• Create print-optimized CSS for clean paper output

✅ Feature Requirements

Feature 1: Smart Scaling

Acceptance Criteria:

• A "Servings" slider adjusts all ingredient quantities proportionally
• Default recipe is for 4 servings; user can scale from 1 to 20
• Fractional results must be displayed as readable fractions (e.g., "¾" not "0.75")
• Scaling must handle edge cases: "a pinch of salt" should remain unchanged
• Quantities must round to practical kitchen measurements (no "0.3333 cups")

Feature 2: Unit Conversion

Acceptance Criteria:

• Toggle between Metric (grams, ml, °C) and Imperial (oz, cups, °F)
• Conversion must be accurate for: weight (g↔oz), volume (ml↔cups↔tbsp↔tsp), temperature (°C↔°F)
• The selected unit system must persist in localStorage
• Handle ingredient-specific conversions (1 cup of flour ≠ 1 cup of sugar by weight)

Feature 3: Wake Lock ("No-Sleep" Mode)

Acceptance Criteria:

• A toggle button activates the Screen Wake Lock API
• While active, the screen will not dim or lock
• Show a visual indicator (e.g., a small icon) when Wake Lock is active
• Gracefully handle browsers that don't support the API
• Automatically release the lock when the user navigates away

Feature 4: Print-Optimized CSS

Acceptance Criteria:

• A @media print stylesheet removes all buttons, navigation, and UI chrome
• Only the recipe title, ingredients list, and instructions are printed
• Font sizes are optimized for paper (12-14pt body text)
• The print layout fits on 1-2 pages maximum

Feature 5: Ingredient Strikethrough

Acceptance Criteria:

• Each ingredient has a checkbox next to it
• Checking it applies a strikethrough and dims the text
• A "Hide Completed" toggle removes checked ingredients from view entirely
• Checked state persists during the session

📊 String Parsing Requirements

Input String	Expected Parsed Output
"1/2 cup of milk"	{ quantity: 0.5, unit: "cup", ingredient: "milk" }
"2 large eggs"	{ quantity: 2, unit: null, ingredient: "large eggs" }
"a pinch of salt"	{ quantity: null, unit: "pinch", ingredient: "salt" }
"1 1/2 tbsp olive oil"	{ quantity: 1.5, unit: "tbsp", ingredient: "olive oil" }
"350°F"	{ quantity: 350, unit: "°F", ingredient: null }

🧪 Testing Checklist

• Unit test string parser with all edge cases from the table above
• Unit test scaling math (especially fraction rounding)
• Unit test unit conversions (g↔oz, ml↔cups, °C↔°F)
• Integration test: changing servings updates all ingredients
• Print preview must match acceptance criteria

🚀 Stretch Goals

• Add a "Shopping List" export that combines ingredients from multiple recipes
• Implement a timer system for each cooking step
• Add nutritional information calculation per serving
• Voice control: "Hey, what's the next step?" using the Web Speech API