Macro Calculator<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: #333;\n background-color: #f5f5f5;\n padding: 20px;\n }\n\n .marco-container {\n max-width: 600px;\n margin: 0 auto;\n background: white;\n padding: 30px;\n border-radius: 12px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n }\n\n h1 {\n font-size: 32px;\n margin-bottom: 10px;\n color: #222;\n }\n\n h2 {\n font-size: 24px;\n margin-bottom: 20px;\n color: #444;\n }\n\n .description {\n color: #666;\n margin-bottom: 30px;\n font-size: 16px;\n }\n\n .form-group {\n margin-bottom: 25px;\n }\n\n label {\n display: block;\n margin-bottom: 8px;\n font-weight: 500;\n color: #444;\n font-size: 15px;\n }\n\n .input-wrapper {\n position: relative;\n }\n\n input[type=\"number\"] {\n width: 100%;\n padding: 12px 45px 12px 15px;\n font-size: 16px;\n border: 2px solid #ddd;\n border-radius: 8px;\n transition: border-color 0.3s;\n }\n\n input[type=\"number\"]:focus {\n outline: none;\n border-color: #F0605C;\n }\n\n .unit-label {\n position: absolute;\n right: 15px;\n top: 50%;\n transform: translateY(-50%);\n color: #999;\n font-size: 14px;\n }\n\n .unit-toggle {\n display: flex;\n gap: 10px;\n margin-top: 10px;\n }\n\n .unit-btn {\n flex: 1;\n padding: 8px 16px;\n border: 2px solid #ddd;\n background: white;\n border-radius: 6px;\n cursor: pointer;\n font-size: 14px;\n transition: all 0.3s;\n }\n\n .unit-btn.active {\n background: #F0605C;\n border-color: #F0605C;\n color: white;\n }\n\n .height-inputs {\n display: flex;\n gap: 10px;\n }\n\n .height-inputs .input-wrapper {\n flex: 1;\n }\n\n .height-cm {\n display: block;\n }\n\n .height-ft-in {\n display: none;\n }\n\n .radio-group {\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n }\n\n .radio-option {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n .radio-option input[type=\"radio\"] {\n width: 20px;\n height: 20px;\n margin-right: 8px;\n cursor: pointer;\n accent-color: #F0605C;\n }\n\n .radio-option label {\n margin: 0;\n cursor: pointer;\n font-weight: normal;\n }\n\n select {\n width: 100%;\n padding: 12px 15px;\n font-size: 16px;\n border: 2px solid #ddd;\n border-radius: 8px;\n background: white;\n cursor: pointer;\n transition: border-color 0.3s;\n }\n\n select:focus {\n outline: none;\n border-color: #F0605C;\n }\n\n .calculate-btn {\n width: 100%;\n padding: 15px;\n background: #F0605C;\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 18px;\n font-weight: 600;\n cursor: pointer;\n transition: background 0.3s;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .calculate-btn:hover {\n background: #e04f4b;\n }\n\n .calculate-btn:active {\n transform: scale(0.98);\n }\n\n .result {\n display: none;\n margin-top: 30px;\n padding: 25px;\n background: #f8f9fa;\n border-radius: 8px;\n border-left: 4px solid #F0605C;\n }\n\n .result.show {\n display: block;\n }\n\n .result h3 {\n color: #F0605C;\n margin-bottom: 15px;\n font-size: 20px;\n }\n\n .calorie-value {\n font-size: 36px;\n font-weight: bold;\n color: #222;\n margin-bottom: 10px;\n }\n\n .calorie-unit {\n font-size: 16px;\n color: #666;\n margin-bottom: 25px;\n }\n\n .macro-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 15px;\n margin: 25px 0;\n }\n\n .macro-card {\n background: white;\n padding: 20px;\n border-radius: 8px;\n text-align: center;\n border: 2px solid #F0605C;\n }\n\n .macro-card h4 {\n color: #F0605C;\n font-size: 14px;\n margin-bottom: 10px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .macro-card .value {\n font-size: 28px;\n font-weight: bold;\n color: #222;\n margin-bottom: 5px;\n }\n\n .macro-card .unit {\n font-size: 12px;\n color: #666;\n }\n\n .macro-card .percentage {\n font-size: 14px;\n color: #999;\n margin-top: 5px;\n }\n\n .info-section {\n margin-top: 25px;\n padding: 20px;\n background: white;\n border-radius: 8px;\n border: 1px solid #ddd;\n }\n\n .info-section h4 {\n color: #444;\n margin-bottom: 10px;\n font-size: 16px;\n }\n\n .info-section p {\n color: #666;\n font-size: 14px;\n line-height: 1.6;\n }\n\n @media (max-width: 480px) {\n .container {\n padding: 20px;\n }\n\n h1 {\n font-size: 28px;\n }\n\n h2 {\n font-size: 20px;\n }\n\n .macro-grid {\n grid-template-columns: 1fr;\n }\n\n .radio-group {\n flex-direction: column;\n gap: 10px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"marco-container\">\n <h1>Macro Calculator<\/h1>\n\n <div id=\"macroForm\">\n <div class=\"form-group\">\n <label>Current Weight<\/label>\n <div class=\"input-wrapper\">\n <input type=\"number\" id=\"weight\" step=\"0.1\">\n <span class=\"unit-label\" id=\"weightUnit\">kg<\/span>\n <\/div>\n <div class=\"unit-toggle\">\n <button type=\"button\" class=\"unit-btn active\" onclick=\"setWeightUnit('kg')\">Kilograms (kg)<\/button>\n <button type=\"button\" class=\"unit-btn\" onclick=\"setWeightUnit('lbs')\">Pounds (lbs)<\/button>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label>Height<\/label>\n <div class=\"height-cm\" id=\"heightCmDiv\">\n <div class=\"input-wrapper\">\n <input type=\"number\" id=\"heightCm\" step=\"0.1\">\n <span class=\"unit-label\">cm<\/span>\n <\/div>\n <\/div>\n <div class=\"height-ft-in\" id=\"heightFtInDiv\">\n <div class=\"height-inputs\">\n <div class=\"input-wrapper\">\n <input type=\"number\" id=\"heightFt\" step=\"1\">\n <span class=\"unit-label\">ft<\/span>\n <\/div>\n <div class=\"input-wrapper\">\n <input type=\"number\" id=\"heightIn\" step=\"1\">\n <span class=\"unit-label\">in<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"unit-toggle\">\n <button type=\"button\" class=\"unit-btn active\" onclick=\"setHeightUnit('cm')\">Centimeters (cm)<\/button>\n <button type=\"button\" class=\"unit-btn\" onclick=\"setHeightUnit('ft')\">Feet & Inches (ft\/in)<\/button>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label>Age<\/label>\n <div class=\"input-wrapper\">\n <input type=\"number\" id=\"age\">\n <span class=\"unit-label\">years<\/span>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label>Sex<\/label>\n <div class=\"radio-group\">\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"male\" name=\"sex\" value=\"male\">\n <label for=\"male\">Male<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"female\" name=\"sex\" value=\"female\">\n <label for=\"female\">Female<\/label>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label>Activity Level<\/label>\n <select id=\"activityLevel\">\n <option value=\"1.2\">Sedentary (little or no exercise)<\/option>\n <option value=\"1.375\">Lightly active (1-3 days\/week)<\/option>\n <option value=\"1.55\">Moderately active (3-5 days\/week)<\/option>\n <option value=\"1.725\">Very active (6-7 days\/week)<\/option>\n <option value=\"1.9\">Extra active (very intense exercise)<\/option>\n <\/select>\n <\/div>\n\n <div class=\"form-group\">\n <label>Goal<\/label>\n <div class=\"radio-group\">\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"lose\" name=\"goal\" value=\"lose\">\n <label for=\"lose\">Weight Loss<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"maintain\" name=\"goal\" value=\"maintain\" checked>\n <label for=\"maintain\">Maintain Weight<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"gain\" name=\"goal\" value=\"gain\">\n <label for=\"gain\">Muscle Gain<\/label>\n <\/div>\n <\/div>\n <\/div>\n\n <button type=\"button\" class=\"calculate-btn\" onclick=\"calculateMacros()\">Calculate<\/button>\n <\/div>\n\n <div class=\"result\" id=\"result\">\n <h3>Your Daily Targets<\/h3>\n <div class=\"calorie-value\" id=\"calorieValue\">0<\/div>\n <div class=\"calorie-unit\">calories\/day<\/div>\n \n <h3 style=\"margin-top: 25px;\">Macronutrient Breakdown<\/h3>\n <div class=\"macro-grid\">\n <div class=\"macro-card\">\n <h4>Protein<\/h4>\n <div class=\"value\" id=\"proteinGrams\">0<\/div>\n <div class=\"unit\">grams\/day<\/div>\n <div class=\"percentage\" id=\"proteinPercent\">0%<\/div>\n <\/div>\n <div class=\"macro-card\">\n <h4>Carbs<\/h4>\n <div class=\"value\" id=\"carbsGrams\">0<\/div>\n <div class=\"unit\">grams\/day<\/div>\n <div class=\"percentage\" id=\"carbsPercent\">0%<\/div>\n <\/div>\n <div class=\"macro-card\">\n <h4>Fats<\/h4>\n <div class=\"value\" id=\"fatsGrams\">0<\/div>\n <div class=\"unit\">grams\/day<\/div>\n <div class=\"percentage\" id=\"fatsPercent\">0%<\/div>\n <\/div>\n <\/div>\n\n <div class=\"info-section\">\n <h4>About Your Macros<\/h4>\n <p id=\"macroExplanation\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n let weightUnit = 'kg';\n let heightUnit = 'cm';\n\n function setWeightUnit(unit) {\n weightUnit = unit;\n document.getElementById('weightUnit').textContent = unit;\n \n const buttons = document.querySelectorAll('.form-group:first-child .unit-btn');\n buttons.forEach(btn => {\n if (btn.textContent.includes(unit)) {\n btn.classList.add('active');\n } else {\n btn.classList.remove('active');\n }\n });\n }\n\n function setHeightUnit(unit) {\n heightUnit = unit;\n \n const buttons = document.querySelectorAll('.form-group:nth-child(2) .unit-btn');\n buttons.forEach(btn => {\n if (btn.textContent.includes(unit)) {\n btn.classList.add('active');\n } else {\n btn.classList.remove('active');\n }\n });\n \n if (unit === 'cm') {\n document.getElementById('heightCmDiv').style.display = 'block';\n document.getElementById('heightFtInDiv').style.display = 'none';\n } else {\n document.getElementById('heightCmDiv').style.display = 'none';\n document.getElementById('heightFtInDiv').style.display = 'block';\n }\n }\n\n function calculateMacros() {\n \/\/ Get weight in kg\n let weight = parseFloat(document.getElementById('weight').value);\n if (!weight || weight <= 0) {\n alert('Please enter a valid weight');\n return;\n }\n if (weightUnit === 'lbs') {\n weight = weight * 0.453592;\n }\n\n \/\/ Get height in cm\n let height;\n if (heightUnit === 'cm') {\n height = parseFloat(document.getElementById('heightCm').value);\n if (!height || height <= 0) {\n alert('Please enter a valid height');\n return;\n }\n } else {\n const feet = parseFloat(document.getElementById('heightFt').value) || 0;\n const inches = parseFloat(document.getElementById('heightIn').value) || 0;\n if (feet <= 0 && inches <= 0) {\n alert('Please enter a valid height');\n return;\n }\n height = (feet * 30.48) + (inches * 2.54);\n }\n\n const age = parseFloat(document.getElementById('age').value);\n if (!age || age <= 0) {\n alert('Please enter a valid age');\n return;\n }\n\n const sexInput = document.querySelector('input[name=\"sex\"]:checked');\n if (!sexInput) {\n alert('Please select your sex');\n return;\n }\n const sex = sexInput.value;\n\n const activityLevel = parseFloat(document.getElementById('activityLevel').value);\n\n const goalInput = document.querySelector('input[name=\"goal\"]:checked');\n const goal = goalInput.value;\n\n \/\/ Calculate BMR using Mifflin-St Jeor Equation\n let bmr;\n if (sex === 'male') {\n bmr = (10 * weight) + (6.25 * height) - (5 * age) + 5;\n } else {\n bmr = (10 * weight) + (6.25 * height) - (5 * age) - 161;\n }\n\n \/\/ Calculate TDEE\n let tdee = bmr * activityLevel;\n\n \/\/ Adjust calories based on goal\n let calories;\n let proteinPercent, carbsPercent, fatsPercent;\n let explanation;\n\n if (goal === 'lose') {\n calories = tdee * 0.85; \/\/ 15% deficit\n proteinPercent = 0.40;\n carbsPercent = 0.40;\n fatsPercent = 0.20;\n explanation = \"For weight loss, you're in a 15% calorie deficit with a 40\/40\/20 macro split (protein\/carbs\/fats). High protein helps preserve muscle mass while losing fat.\";\n } else if (goal === 'gain') {\n calories = tdee + 500; \/\/ 500 calorie surplus\n proteinPercent = 0.30;\n carbsPercent = 0.40;\n fatsPercent = 0.30;\n explanation = \"For muscle gain, you're in a 500 calorie surplus with a 30\/40\/30 macro split. Higher carbs fuel your workouts and support muscle growth.\";\n } else {\n calories = tdee;\n proteinPercent = 0.30;\n carbsPercent = 0.40;\n fatsPercent = 0.30;\n explanation = \"For maintenance, your calories equal your daily energy expenditure with a balanced 30\/40\/30 macro split to maintain your current weight.\";\n }\n\n \/\/ Calculate macros in grams\n \/\/ Protein: 4 cal\/g, Carbs: 4 cal\/g, Fats: 9 cal\/g\n const proteinGrams = Math.round((calories * proteinPercent) \/ 4);\n const carbsGrams = Math.round((calories * carbsPercent) \/ 4);\n const fatsGrams = Math.round((calories * fatsPercent) \/ 9);\n\n \/\/ Display results\n document.getElementById('calorieValue').textContent = Math.round(calories);\n document.getElementById('proteinGrams').textContent = proteinGrams;\n document.getElementById('proteinPercent').textContent = Math.round(proteinPercent * 100) + '%';\n document.getElementById('carbsGrams').textContent = carbsGrams;\n document.getElementById('carbsPercent').textContent = Math.round(carbsPercent * 100) + '%';\n document.getElementById('fatsGrams').textContent = fatsGrams;\n document.getElementById('fatsPercent').textContent = Math.round(fatsPercent * 100) + '%';\n document.getElementById('macroExplanation').textContent = explanation;\n\n document.getElementById('result').classList.add('show');\n \n setTimeout(() => {\n document.getElementById('result').scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }, 100);\n }\n <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t<\/div>\n\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div class=\"vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone \" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>\n\t\t<div id=\"fws_69e8ba58b80eb\" data-column-margin=\"default\" data-midnight=\"dark\" class=\"wpb_row vc_row-fluid vc_row\" style=\"padding-top: 0px; padding-bottom: 0px; \"><div class=\"row-bg-wrap\" data-bg-animation=\"none\" data-bg-animation-delay=\"\" data-bg-overlay=\"false\"><div class=\"inner-wrap row-bg-layer\" ><div class=\"row-bg viewport-desktop\" style=\"\"><\/div><\/div><\/div><div class=\"row_col_wrap_12 col span_12 dark left\">\n\t<div class=\"vc_col-sm-6 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone \" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"nectar-split-heading \" data-align=\"default\" data-m-align=\"inherit\" data-text-effect=\"default\" data-animation-type=\"line-reveal-by-space\" data-animation-delay=\"0\" data-animation-offset=\"\" data-m-rm-animation=\"\" data-stagger=\"\" data-custom-font-size=\"false\" ><h1 >Like Duolingo but for Weight Loss<\/h1><\/div>\n<div class=\"wpb_text_column wpb_content_element \" >\n\t<div class=\"wpb_wrapper\">\n\t\t<p>Fito is a food and calories tracking app, like <a href=\"https:\/\/www.duolingo.com\/\" rel=\"noopener\">Duolingo<\/a> but for weight loss. And it has a cute little bear that accompanies you on your diet in the <a href=\"https:\/\/getfitoapp.com\/tools\/fitness-streak-widgets-and-watch-faces\/\">home screen widgets<\/a>, giving your long-term health journey a boost of motivation.<\/p>\n\t<\/div>\n<\/div>\n\n\n\n<div class=\"nectar-cta text_hover_color_FFFFFF alignment_tablet_default alignment_phone_default display_tablet_inherit display_phone_inherit \" data-color=\"accent-color\" data-using-bg=\"true\" data-style=\"basic\" data-display=\"block\" data-alignment=\"left\" data-text-color=\"custom\" ><h3 style=\"color: #FFFFFF;\"><span class=\"link_wrap\" style=\"padding-top: 15px; padding-right: 30px; padding-bottom: 15px; padding-left: 30px;\"><a class=\"link_text\" role=\"button\" href=\"https:\/\/getfitoapp.com\/\"><span class=\"text\">Try it now<\/span><\/a><\/span><\/h3><\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div class=\"vc_col-sm-6 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone \" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"img-with-aniamtion-wrap \" data-max-width=\"100%\" data-max-width-mobile=\"default\" data-shadow=\"none\" data-animation=\"none\" >\n <div class=\"inner\">\n <div class=\"hover-wrap\"> \n <div class=\"hover-wrap-inner\">\n <img loading=\"lazy\" decoding=\"async\" class=\"img-with-animation skip-lazy\" data-delay=\"0\" height=\"1580\" width=\"2523\" data-animation=\"none\" src=\"https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets.png\" alt=\"Six colorful widgets from a calorie tracking app, showing a red cartoon bear illustrating daily calorie intake status, including "over" and "remaining" counts for diet and fitness management.\" srcset=\"https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets.png 2523w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets-300x188.png 300w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets-1024x641.png 1024w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets-768x481.png 768w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets-1536x962.png 1536w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets-2048x1283.png 2048w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/01\/widgets-18x12.png 18w\" sizes=\"auto, (max-width: 2523px) 100vw, 2523px\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Marco Calculator Calculate your daily macronutrient needs based on your goals. This calculator will provide personalized protein, carbohydrate, and fat targets. Macro Calculator Macro Calculator Current Weight kg Kilograms (kg)...","protected":false},"author":1,"featured_media":0,"parent":6528,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"tags":[39],"class_list":{"0":"post-6751","1":"page","2":"type-page","3":"status-publish","5":"tag-tools"},"_links":{"self":[{"href":"https:\/\/getfitoapp.com\/en\/wp-json\/wp\/v2\/pages\/6751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getfitoapp.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/getfitoapp.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/en\/wp-json\/wp\/v2\/comments?post=6751"}],"version-history":[{"count":5,"href":"https:\/\/getfitoapp.com\/en\/wp-json\/wp\/v2\/pages\/6751\/revisions"}],"predecessor-version":[{"id":6757,"href":"https:\/\/getfitoapp.com\/en\/wp-json\/wp\/v2\/pages\/6751\/revisions\/6757"}],"up":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/en\/wp-json\/wp\/v2\/pages\/6528"}],"wp:attachment":[{"href":"https:\/\/getfitoapp.com\/en\/wp-json\/wp\/v2\/media?parent=6751"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getfitoapp.com\/en\/wp-json\/wp\/v2\/tags?post=6751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}