Project 26: Recipe Scraper UI

📋 Project Brief

Build a recipe cleaner UI that strips away the ads, life stories, and clutter from recipe blog pages, presenting only the ingredients and instructions in a clean, usable format.

✅ Feature Requirements

Feature 1: Content Extraction

Acceptance Criteria:

• Simulated input: user pastes raw recipe text or HTML
• Regex and heuristics extract: title, ingredients list, and step-by-step instructions
• Ignore non-recipe content (ads, author bios, "Jump to Recipe" links)

Feature 2: Cook Mode

Acceptance Criteria:

• Large font (20px+), high contrast, simplified layout
• Wake Lock API keeps screen on
• Step-by-step navigation with "Next Step" / "Previous Step" buttons
• Current step highlighted; completed steps dimmed

Feature 3: Fraction Scaling

Acceptance Criteria:

• A multiplier (0.5x, 1x, 2x, 3x) scales all ingredient quantities
• Fractions displayed as readable characters (½, ¼, ¾)
• Non-scalable items (e.g., "1 bay leaf") remain unchanged

Feature 4: Ingredient Checklist

Acceptance Criteria:

• Each ingredient is a clickable checkbox
• Checked items get strikethrough styling
• A progress bar shows "5 of 12 ingredients ready"

Feature 5: Shopping List Export

Acceptance Criteria:

• Unchecked ingredients exported as a plain-text shopping list
• Grouped by category (Produce, Dairy, Pantry) if possible
• "Copy to Clipboard" and "Share" options

🧪 Testing Checklist

• Unit test ingredient parsing and fraction scaling
• Unit test content extraction regex
• Integration test: pasting recipe text produces clean output
• A11y: Cook Mode fully keyboard-navigable