Technical Specification: Online Cooking Unit Converter & Recipe Scale Calculator

Overview

A clean, professional, and highly responsive web utility designed for chefs and home cooks to perform rapid unit conversions and recipe scaling. The application operates entirely client-side, ensuring privacy and speed.

Core Features

• Comprehensive Unit Conversion:
  • Volume: Cups, Tablespoons, Teaspoons, Fluid Ounces, Milliliters, Liters.
  • Weight: Grams, Kilograms, Ounces, Pounds.
  • Temperature: Celsius, Fahrenheit, and Gas Mark.
• Recipe Multiplier: A dedicated section to input a factor (e.g., 0.5x, 2x) to instantly scale all ingredients in a list.
• Live Conversion Engine: Instant updates as the user types, using optimized vanilla JavaScript for performance.
• Clean Print-Friendly UI: Designed to look good even when printed or viewed on a phone while cooking.

UI/UX Design

• Layout Structure:
  • Header: Simple, centered title with a brief descriptive subtitle.
  • Main Converter Card: A centralized container with three distinct tabs: [Volume], [Weight], [Temperature].
  • Result Display: Large, bold typography for the output, ensuring high readability at a glance.
  • Conversion History: A list of recent conversions displayed below the main tool (in-memory only, cleared on page refresh).
• Visual Aesthetic:
  • Theme: Strict light mode. Use whites, soft grays, and a primary accent color of 'Sage Green' (#779377) or 'Warm Terracotta' (#D17A5A) for active elements.
  • Typography: Sans-serif, high-legibility font (e.g., Inter or system-ui).
  • Interactions: Subtle hover states on buttons, smooth fade-in animations for result updates, and responsive input field scaling.

Development Directives & Constraints

• Single-File Architecture: All HTML, CSS, and JS must be embedded in one file. No external dependencies except for CDN-hosted libraries (e.g., Tailwind CSS for styling).
• Sandbox Compatibility: Do NOT use localStorage, sessionStorage, or cookies. Use in-memory state variables only.
• No Popups: Do not use alert(), confirm(), or prompt(). All user feedback must be handled via DOM elements (e.g., custom styled message boxes).
• Performance: Ensure zero layout shift (CLS). All calculations must be handled synchronously for near-instant response times.
• SEO Optimization: Use semantic HTML5 tags (<main>, <section>, <article>, <header>) to ensure search engines correctly index the conversion data.
• Mobile Responsibility: Use a 'mobile-first' CSS approach. Inputs should be large and easy to tap on touchscreen devices.

Implementation Strategy

1. Data Object: Define a standard JavaScript object mapping conversion ratios.
2. Event Handling: Attach 'input' event listeners to all conversion fields to trigger automatic recalculation.
3. State Management: Keep a single 'appState' object in JavaScript to manage current values and history.
4. CSS Styling: Use Tailwind CSS utility classes to ensure a premium, modern SaaS look with minimal code bloat.