Banner

Your Personalized Calorie and Macro Blueprint for Any Destination

THE ULTIMATE MACRO CALCULATOR

Embed

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Macro Calculator</title>
 <style>


 .calculate-button {
 background-color: white; /* Gray background */
 color: black; /* Black text */
 /* Add other styling properties as needed */
 -webkit-appearance: none; /* Removes default iOS styling */
 border: 1px solid black;
 padding: 5px 5px;
 border-radius: 5px;
 /* More styles */
 }


 body {
 font-family: Arial, sans-serif;
 }

 .main-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 }

 /* Add styles for the MailerLite pop-up here */
 .mailerlite-popup {
 /* Add your styles for the pop-up here */
 }
 </style>
</head>
<body>
 <div class="main-container">
 <form id="macroForm" novalidate>


 
 <label for="gender" style="font-weight: bold; color: white; font-size: 20px; margin-bottom: 10px;">Gender</label>

 <select id="gender" name="gender" required>
 <option value="male">Male</option>
 <option value="female">Female</option>
 </select>
 
<label for="activityLevel" style="font-weight: bold; color: white; font-size: 20px; margin-bottom: 10px;">Activity Level</label>
<select id="activityLevel" name="activityLevel" required>

 <option value="1.2">Sedentary (Little or no exercise and a desk job)</option>
 <option value="1.375">Lightly Active (Light exercise 1 to 3 days per week)</option>
 <option value="1.55">Moderately Active (Moderate exercise 3 to 5 days per week)</option>
 <option value="1.725">Very Active (Heavy exercise 6 to 7 days per week)</option>
 <option value="1.9">Extremely Active (Very heavy exercise or a physical job or training twice per day)</option>
 </select>
 

<label for="goal" style="font-weight: bold; color: white; font-size: 20px; margin-bottom: 10px;">Goal</label>
<select id="goal" name="goal" required>
 <option value="gain">Gain Weight</option>
 <option value="lose">Lose Weight</option>
</select>
 
	<label for="age" style="font-weight: bold; color: white; font-size: 20px; margin-bottom: 10px;">Age (Years)</label>

 <input type="number" id="age" name="age" min="1" required>
 
 
 <label for="height" style="font-weight: bold; color: white; font-size: 20px; margin-bottom: 10px;">Height (Inches)</label>
 <input type="number" id="height" name="height" min="1" required>
 
 
 <label for="weight" style="font-weight: bold; color: white; font-size: 20px; margin-bottom: 10px;">Weight (lbs)</label>
 <input type="number" id="weight" name="weight" min="1" required>
 
 
 <label for="length" style="font-weight: bold; color: white; font-size: 20px; margin-bottom: 10px;">Length of Bulk/Cut (Weeks)</label>
 <input type="number" id="length" name="length" min="1" required>
 
 
 <label for="weightLossPercent" style="font-weight: bold; color: white; font-size: 20px; margin-bottom: 10px;">Weight Change Per Week (%)</label>
 <input type="number" id="weightLossPercent" name="weightLossPercent" min="0" max="100" step="0.01" required>
 
 

<label for="proteinTarget" style="font-weight: bold; color: white; font-size: 20px; margin-bottom: 10px; line-height: 1.2;">Protein Target (Grams per Lb of Bodyweight)</label>

 <input type="number" id="proteinTarget" name="proteinTarget" min="0" max="5" step="0.01" required>
 
 
 <label for="fatTarget" style="font-weight: bold; color: white; font-size: 20px; margin-bottom: 10px;">Fat Target (%)</label>
 <input type="number" id="fatTarget" name="fatTarget" min="0" max="100" step="0.01" required>
 


 

 <input type="submit" value="Calculate" class="calculate-button">


 </form>

 

 <div class="mailerlite-popup" style="display: none;">
 
 <script>

let popupSubmitted = false; // This flag is false initially

 (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
 .push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
 n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
 (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
 ml('account', '682086');
 // Function to handle form submission
// Function to handle MailerLite form submission

function handleFormSubmit() {
 // Check if an email is entered
 var emailInput = document.querySelector('[data-form="nl9YGe"] input[type="email"]');

 if (emailInput && emailInput.value.includes('@')) {
 calculateMacros();
 document.querySelector('.mailerlite-popup').style.display = 'none';
 document.getElementById('output').style.display = 'block';
 popupSubmitted = true; // Set the flag to true after first submission
 } else {
 alert("Please enter a valid email.");
 }
}
 // Attach the form submission event listener
 document.addEventListener('DOMContentLoaded', function() {
 document.querySelector('[data-form="nl9YGe"]').addEventListener('submit', function (e) {
 e.preventDefault(); // Prevent the default form submission
 handleFormSubmit(); // Call your custom form submission handler
 });
 });
</script>

 
 <div class="ml-embedded" data-form="nl9YGe"></div>
 </div>

 <div id="output" style="display: none;">
 
 
 
Daily Calories Needed: 
 
Macronutrient Breakdown: 
Protein (g): 
Fat (g): 
Carbs (g): 
 
Weight Change Goal Per Week (in Lbs): 
 
Total Calorie Intake Change Per Week (+/-): 
 
Total Calorie Intake Change Per Day (+/-): 
 
Basal Metabolic Rate (Calories at Rest): 
 
Total Daily Energy Expenditure (TDEE): 
 
Estimated Weight Change During Program (Lbs): 
 
Body Mass Index (BMI): 


 </div>
 </div>
 <script>


function validateInputs() {
 // List all input fields that need validation
 const inputFields = ['age', 'height', 'weight', 'weightLossPercent', 'proteinTarget', 'fatTarget'];

 // Loop through each input field
 for (let i = 0; i < inputFields.length; i++) {
 const input = document.getElementById(inputFields[i]);
 const value = input.value.trim();

 // Check if the input is empty or not a number
 if (value === '' || isNaN(parseFloat(value))) {
 return false; // Invalid input found
 }
 }

 return true; // All inputs are valid
}




function calculateMacrosAndShowMailerLite() {
 if (validateInputs()) {
 if (!popupSubmitted) { // Only show the popup if it hasn't been submitted before
 document.querySelector('.mailerlite-popup').style.display = 'block';
 } else {
 calculateMacros(); // Directly calculate macros if popup already submitted
 }
 } else {
 alert("Please Fix Inputs. No Blanks and Must Be Numerical Inputs");
 }
}




 function calculateMacros() {
 // Inputs
 const age = parseFloat(document.getElementById('age').value);
 const height = parseFloat(document.getElementById('height').value);
 const weight = parseFloat(document.getElementById('weight').value);
 const weightLossPercent = parseFloat(document.getElementById('weightLossPercent').value) / 100;
 const activityLevel = parseFloat(document.getElementById('activityLevel').value);
 const gender = document.getElementById('gender').value;
 const weightInKg = weight * 0.453592;
 const heightInCm = height * 2.54;
 const goal = document.getElementById('goal').value;
 
 // Outputs
 const weightChangeGoal = goal === "lose" ? weight * weightLossPercent : weight * (weightLossPercent);
 const calorieGoalPerWeek = weightChangeGoal * 3500;
 const calorieGoalPerDay = calorieGoalPerWeek / 7;
 
 let bmr;
 if (gender === "male") {
 bmr = (9.99 * weightInKg) + (6.25 * heightInCm) - (4.92 * age) + 5;
 } else {
 bmr = (9.99 * weightInKg) + (6.25 * heightInCm) - (4.92 * age) - 161;
 }
 
 const tdee = bmr * activityLevel;
 
 const dailyCalories = goal === "lose" ? tdee - calorieGoalPerDay : tdee + calorieGoalPerDay;
 
 document.getElementById('weightChangeGoal').textContent = weightChangeGoal.toFixed(2);
 document.getElementById('calorieGoalPerWeek').textContent = calorieGoalPerWeek.toFixed(0);
 document.getElementById('calorieGoalPerDay').textContent = calorieGoalPerDay.toFixed(0);
 document.getElementById('bmr').textContent = bmr.toFixed(0);
 document.getElementById('tdee').textContent = tdee.toFixed(0);
 
 const proteinTarget = parseFloat(document.getElementById('proteinTarget').value);
 const proteinGrams = proteinTarget * weight;
 const fatTarget = parseFloat(document.getElementById('fatTarget').value) / 100;
 const fatGrams = fatTarget * dailyCalories / 9;
 const carbsGrams = (dailyCalories - (proteinGrams * 4) - (fatGrams * 9)) / 4;
 const length = parseFloat(document.getElementById('length').value);
 const estimatedWeightChange = weightChangeGoal * length;
 const bmi = (703 * weight) / (height * height);
 
 document.getElementById('dailyCalories').textContent = dailyCalories.toFixed(0);
 document.getElementById('proteinGrams').textContent = proteinGrams.toFixed(0);
 document.getElementById('fatGrams').textContent = fatGrams.toFixed(0);
 document.getElementById('carbsGrams').textContent = carbsGrams.toFixed(0);
 document.getElementById('estimatedWeightChange').textContent = estimatedWeightChange.toFixed(0);
 document.getElementById('bmi').textContent = bmi.toFixed(0);
 
 document.getElementById('output').style.display = 'block';
 }


document.getElementById('macroForm').addEventListener('submit', function(e) {
 e.preventDefault(); // This stops the form from being sent right away

 if (validateInputs()) {
 calculateMacrosAndShowMailerLite();
 } else {
 alert("Please Fix Inputs. No Blanks and Must Be Numerical Inputs");
 }
});




 </script>
</body>
</html>

Text + image

<h2 style="text-align:center">WHAT ARE "MACROS" </h2>
Macronutrients are the nutrients we need in larger quantities that provide our bodies with energy
In other words, fat, protein and carbohydrates. This differs from micronutrients, which are needed in smaller quantities such as vitamins and minerals

Diet health food concept with a large variety of vegetables, fruit, meat, fish, grain salad and spice with foods high in  protein, antioxidants, dietary fibre, anthocaynins and vitamins. Top view.

POINTERS

Text

<h2 style="text-align:center">NOTES ABOUT RESULTS</h2>
Your Total Daily Energy Expenditure, TDEE, also known as "maintenance calories" varies depending on activity level. The lower the activity level, the lower the amount of calories your body requires per day.
Body Mass Index (BMI) Ranges Below:
Under 18.5 – This is described as underweight.
Between 18.5 and 24.9 – This is described as the 'healthy range'.
Between 25 and 29.9 – This is described as overweight.
Between 30 and 39.9 – This is described as obesity.
40 or over – This is described as severe obesity.