Technical Specification: Professional Macro Nutrient Calculator

Overview

A high-performance, browser-based utility designed to calculate daily caloric needs and macronutrient distribution (Protein, Carbohydrates, Fats). The interface is optimized for speed, clarity, and ease of use, providing instant feedback as users adjust inputs.

Core Features

• Dynamic TDEE Engine: Real-time calculation of daily calorie needs using the Mifflin-St Jeor Equation.
• Interactive Macro Sliders: Range inputs that allow users to fine-tune the percentage of calories derived from protein, carbs, and fats.
• Visual Data Breakdown: A clean, responsive SVG-based donut chart (or CSS-conic gradient) displaying the macro split.
• Dietary Goal Presets: Quick-select buttons for 'Cutting', 'Maintenance', and 'Bulking' to auto-populate calorie targets.
• In-Memory Calculation: Zero persistence; the app respects user privacy by operating strictly in-memory.

UI/UX Design

• Color Palette: A clean, light-mode palette: #ffffff (Background), #f8fafc (Section backgrounds), #334155 (Text), #0ea5e9 (Primary Accent), and #10b981 (Success Green).
• Typography: Modern sans-serif stack (Inter/system-ui).
• Animations: Subtle transition-all on input changes. Smooth opacity shifts when switching between result views.
• Responsiveness: Mobile-first design. Stacked layout on screens < 768px; side-by-side dashboard layout on larger screens.

Development Constraints (Strict)

1. Single File: All HTML, CSS (via CDN), and Vanilla JS must reside in one file.
2. No Storage: Absolutely NO localStorage, sessionStorage, or cookies. The app must be compatible with a sandboxed iframe with storage disabled.
3. No External Dependencies: Do not use frameworks like React/Vue. Use Vanilla JS and Tailwind CSS via CDN.
4. No Popups: Replace native alert() or prompt() with custom CSS-based modal overlays.
5. Security: Ensure all links use target="_blank" rel="noopener noreferrer".

Implementation Steps

1. Setup: Initialize a Tailwind CSS environment for rapid styling.
2. State Management: Create a JS object to store user inputs (age, weight, height, activity level, goal).
3. Calculation Logic:
   • Create a helper function to calculate BMR.
   • Calculate TDEE based on the activity multiplier.
   • Calculate macronutrient grams: (Calories * % / MacroCaloriesPerGram).
4. Rendering: Create an update function that triggers on any input change, re-rendering the results and the visual charts without page refresh.
5. Validation: Add robust input sanitization to ensure numerical inputs are positive and within physiological norms.