Technical Specification: Free Online TDEE Calculator

Overview

A clean, professional, and highly responsive web application designed to calculate a user's Total Daily Energy Expenditure (TDEE). The app focuses on providing immediate, accurate nutritional insights without the need for logins, databases, or tracking.

Core Features

• Formula Implementation: Uses the Mifflin-St Jeor equation (BMR calculation) multiplied by a specific activity factor (Sedentary, Lightly Active, Moderately Active, Very Active, Extra Active).
• Dynamic UI: Real-time calculation feedback as the user updates their inputs.
• Visual Data: A breakdown card showing BMR, Maintenance Calories, and suggested calorie targets for weight loss (cutting) and muscle gain (bulking).
• Responsive Inputs: Mobile-first design utilizing numeric inputs with range validation.
• No Persistence: Zero reliance on localStorage or sessionStorage ensuring full compatibility with sandboxed iframes.

UI/UX Design

• Layout:
  • Header: Simple, descriptive branding and a one-sentence instruction.
  • Main Tool Area: A two-column grid on desktop (Inputs on the left, Results on the right). On mobile, inputs stack vertically above the results.
  • Results Section: A visually distinct card featuring a prominent "Maintenance Calories" metric, surrounded by smaller, actionable insights.
• Color Palette (Light Mode Only):
  • Primary: Indigo/Blue (#4F46E5) for action buttons and active states.
  • Background: Soft Gray (#F9FAFB) for the page background.
  • Cards: Pure White (#FFFFFF) for input containers and results.
  • Text: Dark Slate (#111827) for readability, with secondary Gray (#6B7280) for labels.
  • Accents: Success Green (#059669) for gain/deficit visual indicators.

Animation & Micro-interactions

• Transition: Smooth fade-in for result panels when calculations update (CSS transition: opacity 0.3s ease-in-out).
• Input Focus: Subtle ring-glow effect around inputs when focused for enhanced accessibility.
• Responsive Scaling: Elements use relative sizing (rem/em) to ensure font sizes and spacing remain consistent on all viewports.

Technical Constraints & Requirements

• Architecture: Single HTML file containing all CSS (<style>) and JavaScript (<script>).
• Dependencies: Use Tailwind CSS via CDN for styling and a lightweight icon library (e.g., FontAwesome or Lucide) for UI elements.
• Logic: Vanilla JavaScript event listeners (input or change events) attached to form fields to trigger calculation functions instantly.
• Security/Sandbox:
  • No localStorage or cookies.
  • No pop-ups (alert/confirm); use custom modal overlays within the DOM if messages are required.
  • External links must strictly use target="_blank" and rel="noopener noreferrer".