Healthy Eating Evangelist

Macro Calculator /* Add some padding and a background color to the body element */ body { padding: 2em; background-color: #f8f8f8; } /* Add some styling to the h1 element */ h1 { text-align: center; color: #333; margin-bottom: 2em; } /* Add some styling to the form input elements */ form input[type="number"] { height: 2em; font-size: 1em; border-radius: 0.25em; } form select { height: 2em; font-size: 1em; border-radius: 0.25em; appearance: none; -webkit-appearance: none; -moz-appearance: none; } /* Add some hover effect to the submit button */ form input[type="submit"]:hover { background-color: #555; } /* Add some styling to the result element */ #result { background-color: #fff; padding: 1em; border-radius: 0.5em; } #result p { margin: 0; } #result strong { color: #333; } /* Add some styling to the form label elements */ form label { font-size: 0.9em; color: #333; } /* Add some hover effect to the form input elements */ form input[type="number"]:hover, form select:hover { border-color: #555; } /* Add some responsive styling to the form elements */ @media (max-width: 600px) { form { width: 90%; } } /* Add some spacing and a border to the form element */ form { padding: 1em; border: 1px solid #ccc; border-radius: 0.25em; } /* Add some spacing and a border to the result element */ #result { margin-top: 1em; border: 1px solid #ccc; border-radius: 0.25em; } /* Add some hover effect to the result element */ #result:hover { box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1); } /* Add some responsive styling to the form and result elements */ @media (max-width: 600px) { form, #result { width: 100%; } } /* Add some spacing and a background color to the body element */ body { padding: 2em; background-color: #f8f8f8; } /* Add some styling to the h1 element */ h1 { text-align: center; color: #333; margin-bottom: 2em; } /* Add some styling to the form elements */ form { max-width: 500px; margin: 0 auto; text-align: left; } form label { display: block; font-size: 0.9em; color: #333; margin-bottom: 0.5em; } form input[type="number"] { width: 100%; height: 2em; font-size: 1em; box-sizing: border-box; padding: 0.5em; border: 1px solid #ccc; border-radius: 0.25em; } form select { width: 100%; height: 2em; font-size: 1em; box-sizing: border-box; padding: 0.5em; border: 1px solid #ccc; border-radius: 0.25em; appearance: none; -webkit-appearance: none; -moz-appearance: none; } form input[type="submit"] { display: block; width: 100%; margin-top: 1em; padding: 0.5em; background-color: #333; color: #fff; border: none; border-radius: 0.25em; cursor: pointer; } /* Add some hover effect to the form elements */ form input[type="number"]:hover, form select:hover { border-color: #555; } form input[type="submit"]:hover { background-color: #555; } /* Add some styling to the result element */ #result { margin-top: 1em; background-color: #fff; padding: 1em; border: 1px solid #ccc; border-radius: 0.5em; } #result p { margin: 0; } #result strong { color: #333; } /* Add some hover effect to the result element */ #result:hover { box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1); } /* Add some responsive styling to the form and result elements */ @media (max-width: 600px) { form, #result { width: 100%; } } Macro Calculator Enter your information to calculate your daily macronutrient needs: Age: Weight (lbs): Height (inches): Activity Level: Sedentary Lightly Active Moderately Active Very Active Extremely Active const form = document.querySelector('form'); form.addEventListener('submit', e = { e.preventDefault(); const age = form.age.value; const weight = form.weight.value; const height = form.height.value; const activity_level = form.activity_level.value; const BMR = 10 * weight + 6.25 * height - 5 * age + 5; const TDEE = BMR * activity_level; const protein = weight * 0.8; const fat = TDEE * 0.25 / 9; const carbs = (TDEE - protein * 4 - fat * 9) / 4; const result = document.querySelector('#result'); result.innerHTML = ` Your daily caloric needs are ${TDEE} calories. You should aim for ${protein} grams of protein, ${fat} grams of fat, and ${carbs} grams of carbs per day. `; });

Macro Calculator

Subscribe