Calculate your daily keto and paleo macronutrient goals instantly. Get precise net carb, protein, and fat breakdowns for effective weight loss and fat adaptation.
AI Generation Prompt
Free Keto and Paleo Macro Nutrient Calculator: Technical Specification
1. Overview
A web-based, client-side application that calculates personalized macronutrient requirements based on the Mifflin-St Jeor equation. The tool provides a clean, responsive interface to switch between Ketogenic and Paleo dietary guidelines.
2. Visual Design & UI/UX
- Color Palette:
- Primary: #2E7D32 (Forest Green) for health and vitality.
- Secondary: #F5F5F5 (Light Grey) for backgrounds.
- Accent: #FF9800 (Amber) for call-to-action buttons.
- Text: #333333 (Dark Grey) for readability.
- Layout Structure:
- Header: Minimalistic navigation, diet toggle (Keto/Paleo Switch).
- Main Container: A 2-column layout (Desktop) or single-stack (Mobile).
- Input Panel: Left side (Desktop) containing form fields for age, weight, height, gender, and activity level.
- Visualization Panel: Right side (Desktop) containing real-time update graphs (Donut charts for macro percentages).
- Animations:
- Slide-in transitions between form steps.
- Dynamic bar chart expansion when the 'Calculate' button is triggered.
- Smooth number counting animation for caloric output values.
3. Core Features
- Dynamic Diet Toggling: Users can switch between 'Keto' (High Fat, Low Carb) and 'Paleo' (Moderate Fat, Higher Carb) logic at any time.
- Interactive Macro Sliders: Users can manually override recommended macro ratios (e.g., 70% fat / 20% protein / 10% carbs) using sliders, with real-time feedback on total caloric alignment.
- TDEE Engine: Calculation of Total Daily Energy Expenditure adjusted by specific activity factor multipliers (Sedentary to Athlete).
- Export Functionality: Users can download a PDF summary of their calculated goals, including a sample macronutrient breakdown chart.
- PWA Readiness: Service workers implemented for offline access and 'Add to Home Screen' capability.
- Nutritional Education Tooltips: Contextual '?' icons next to input fields explaining why specific data (like activity level) matters.
4. Technical Stack
- Framework: Vanilla JavaScript with modular architecture or lightweight React.
- Charts: Lightweight SVG-based charting library (e.g., Chart.js or D3.js).
- State Management: LocalStorage API to save user inputs across sessions without requiring a database.
- Styling: SCSS with BEM naming conventions for maintainability.
5. User Flow
- Landing: User is prompted to select a diet strategy (Keto or Paleo).
- Input: User enters biometric data. Real-time validation ensures logical input ranges.
- Calculation: On 'Calculate', the UI transitions to display the caloric goal and macro breakdown.
- Refinement: User adjusts sliders to tweak their preference (e.g., 'more protein, less fat').
- Output: User views visual breakdown and exports the result as a PDF.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How do I calculate net carbs for keto?
Net carbs are calculated by subtracting total dietary fiber and sugar alcohols from total carbohydrates. Our tool automatically processes these values based on your daily caloric intake to ensure you stay within your ketogenic limits.
What is the primary difference between keto and paleo macro goals?
Keto is a high-fat, very low-carbohydrate diet designed to induce ketosis. Paleo focuses on whole, unprocessed foods with a more moderate approach to carbohydrates. This calculator adjusts the macro ratios based on which nutritional strategy you select.
How does the calorie deficit work for weight loss?
The calculator determines your Total Daily Energy Expenditure (TDEE) based on your metrics and activity level, then subtracts a percentage to create a caloric deficit, which is essential for sustainable and safe fat loss.
