CodePen Demo<\/title>\r\n\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.0.2\/css\/bootstrap.min.css\">\r\n\r\n <style>\r\n .input-group {\r\n margin-bottom: 15px;\r\n }\r\n .radio-group {\r\n margin-top: 10px;\r\n }\r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n }\r\n th, td {\r\n border: 0px solid #ddd;\r\n padding: 10px;\r\n text-align: center;\r\n }\r\n .image {\r\n width: 100px;\r\n height: 100px;\r\n background-size: cover;\r\n background-position: center;\r\n }\r\n @media (max-width: 600px) {\r\n .image {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n }\r\n <\/style>\r\n\r\n \r\n<\/head>\r\n\r\n<body>\r\n <div class=\"content-body\" style=\"margin-top:100px; min-height: 876px;\">\r\n \r\n <div class=\"container-fluid\">\r\n <div class=\"row\">\r\n <div class=\"col-xl-12 col-xxl-12\">\r\n <div class=\"row\">\r\n <div class=\"col-xl-12\">\r\n <div class=\"card\" style=\"padding: 20px;\">\r\n <div class=\"settings-form\">\r\n <div class=\"form-row\" id=\"calculator\">\r\n <div class=\"form-group col-md-6\">\r\n <label for=\"age\">Age (years):<\/label>\r\n <input type=\"number\" id=\"age\" min=\"1\" required=\"\" class=\"form-control\">\r\n <span id=\"ageError\" class=\"error\"><\/span>\r\n <\/div>\r\n <div class=\"form-group col-md-6\">\r\n <label for=\"gender\">Gender:<\/label>\r\n <select id=\"gender\" class=\"form-select form-control\">\r\n <option value=\"male\">Male<\/option>\r\n <option value=\"female\">Female<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group col-md-6\">\r\n <label for=\"weight\">Weight (kg):<\/label>\r\n <input type=\"number\" id=\"weight\" min=\"1\" required=\"\" class=\"form-select form-control\">\r\n <span id=\"weightError\" class=\"error\"><\/span>\r\n <\/div>\r\n <div class=\"form-group col-md-6\">\r\n <label for=\"heightCm\">Height (cm):<\/label>\r\n <input type=\"number\" id=\"heightCm\" min=\"1\" required=\"\" class=\"form-select form-control\">\r\n <span id=\"heightError\" class=\"error\"><\/span>\r\n <label style=\"margin-top: 10px;\">Height (feet & inches):<\/label>\r\n <div style=\"display: flex; gap: 10px;\">\r\n <input type=\"number\" id=\"heightFeet\" min=\"0\" step=\"1\" placeholder=\"Feet\" class=\"form-select form-control\" style=\"flex: 1;\">\r\n <input type=\"number\" id=\"heightInches\" min=\"0\" max=\"11\" step=\"1\" placeholder=\"Inches\" class=\"form-select form-control\" style=\"flex: 1;\">\r\n <\/div>\r\n <span id=\"heightFeetError\" class=\"error\"><\/span>\r\n <\/div>\r\n \r\n <div class=\"form-group col-md-6\"> \r\n <label for=\"body-fat\">Body Fat Percentage (%):<\/label>\r\n <button id=\"bodyFatButton\" class=\"form-select form-control button\">Body Fat %<\/button>\r\n <span id=\"bodyFatError\" class=\"error\"><\/span>\r\n <\/div>\r\n <div id=\"bodyFatOptions\" class=\"radio-group\" style=\"display: none;\">\r\n <label for=\"body-fat-option\">Select Body Fat Percentage:<\/label>\r\n <table id=\"bodyFatTable\">\r\n <thead>\r\n <tr>\r\n <th>Reference<\/th>\r\n <th>Body Fat %<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <div class=\"form-group col-md-6\">\r\n <label for=\"activity-level\">Activity Level:<\/label>\r\n <select id=\"activity-level\" class=\"form-select form-control\">\r\n <option value=\"sedentary\">Sedentary (little to no exercise)<\/option>\r\n <option value=\"lightly-active\">Lightly Active (light exercise\/sports 1-3 days\/week)<\/option>\r\n <option value=\"moderately-active\">Moderately Active (moderate exercise\/sports 3-5 days\/week)<\/option>\r\n <option value=\"very-active\">Very Active (hard exercise\/sports 6-7 days a week)<\/option>\r\n <option value=\"extra-active\">Extra Active (very hard exercise\/sports & physical job or 2x training)<\/option>\r\n <\/select>\r\n <br>\r\n <\/div>\r\n <div class=\"form-group col-md-6\">\r\n <button onclick=\"calculateBMR()\" class=\"btn btn-primary\">Calculate BMR & TDEE<\/button>\r\n <div style=\"margin-top: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; font-family: Arial, sans-serif; font-size: 14px; color: #333;\">\r\n <h3 style=\"font-size: 16px; font-weight: bold; margin-bottom: 8px;\">Reference<\/h3>\r\n <p>\r\n The BMR calculation is based on the Mifflin-St Jeor equation. For more details, visit: \r\n <a href=\"https:\/\/reference.medscape.com\/calculator\/846\/mifflin-st-jeor-equation\" target=\"_blank\" style=\"color: #007BFF; text-decoration: none;\">mifflin-st-jeor-equation<\/a>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group col-md-12\">\r\n <div id=\"results\" style=\"display: block;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n \r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"><\/script>\r\n<script>\r\n function validateForm() {\r\n var isValid = true;\r\n var age = document.getElementById('age').value;\r\n var weight = document.getElementById('weight').value;\r\n var heightCm = document.getElementById('heightCm').value;\r\n var heightFeet = document.getElementById('heightFeet').value;\r\n var heightInches = document.getElementById('heightInches').value;\r\n var bodyFatRadioValue = document.querySelector('input[name=\"bodyFat\"]:checked')?.value;\r\n var bodyFat;\r\n\r\n if (bodyFatRadioValue === 'others') {\r\n var customBodyFatInput = document.getElementById('customBodyFatInput');\r\n bodyFat = parseFloat(customBodyFatInput.value);\r\n } else {\r\n bodyFat = parseFloat(bodyFatRadioValue);\r\n }\r\n\r\n if (age <= 0 || isNaN(age)) {\r\n document.getElementById('ageError').innerText = \"Please enter a valid age.\";\r\n isValid = false;\r\n } else {\r\n document.getElementById('ageError').innerText = \"\";\r\n }\r\n\r\n if (weight <= 0 || isNaN(weight)) {\r\n document.getElementById('weightError').innerText = \"Please enter a valid weight.\";\r\n isValid = false;\r\n } else {\r\n document.getElementById('weightError').innerText = \"\";\r\n }\r\n\r\n if ((heightCm <= 0 || isNaN(heightCm)) && ((heightFeet <= 0 || isNaN(heightFeet)) && (heightInches < 0 || isNaN(heightInches)))) {\r\n document.getElementById('heightError').innerText = \"Please enter a valid height in cm or feet & inches.\";\r\n document.getElementById('heightFeetError').innerText = \"Please enter a valid height in cm or feet & inches.\";\r\n isValid = false;\r\n } else {\r\n document.getElementById('heightError').innerText = \"\";\r\n document.getElementById('heightFeetError').innerText = \"\";\r\n }\r\n\r\n if (bodyFatRadioValue === 'others') {\r\n if (isNaN(bodyFat) || bodyFat < 1 || bodyFat > 100) {\r\n document.getElementById('bodyFatError').innerText = \"Please enter a valid custom body fat percentage (1-100).\";\r\n isValid = false;\r\n } else {\r\n document.getElementById('bodyFatError').innerText = \"\";\r\n }\r\n } else if (bodyFat < 1 || bodyFat > 100 || isNaN(bodyFat)) {\r\n document.getElementById('bodyFatError').innerText = \"Please enter a valid body fat percentage (1-100).\";\r\n isValid = false;\r\n } else {\r\n document.getElementById('bodyFatError').innerText = \"\";\r\n }\r\n\r\n return isValid;\r\n }\r\n function calculateBMR() {\r\n if (!validateForm()) {\r\n return;\r\n }\r\n\r\n var age = parseInt(document.getElementById('age').value);\r\n var gender = document.getElementById('gender').value;\r\n var weight = parseInt(document.getElementById('weight').value);\r\n var heightCm = parseFloat(document.getElementById('heightCm').value);\r\n var heightFeet = parseInt(document.getElementById('heightFeet').value);\r\n var heightInches = parseInt(document.getElementById('heightInches').value);\r\n var bodyFat = parseFloat(document.querySelector('input[name=\"bodyFat\"]:checked')?.value);\r\n var activityLevel = document.getElementById('activity-level').value;\r\n \r\n \/\/ Convert feet and inches to cm if cm is not provided\r\n var height;\r\n if (!isNaN(heightCm) && heightCm > 0) {\r\n height = heightCm;\r\n } else if (!isNaN(heightFeet) && heightFeet >= 0 && !isNaN(heightInches) && heightInches >= 0) {\r\n height = (heightFeet * 30.48) + (heightInches * 2.54); \/\/ 1 foot = 30.48 cm, 1 inch = 2.54 cm\r\n } else {\r\n height = 0; \/\/ fallback\r\n }\r\n \r\n \/\/ Calculate BMR using Mifflin-St Jeor equation\r\n var bmr;\r\n if (gender === 'male') {\r\n bmr = (10 * weight) + (6.25 * height) - (5 * age) + 5;\r\n } else {\r\n bmr = (10 * weight) + (6.25 * height) - (5 * age) - 161;\r\n }\r\n \r\n \/\/ Calculate TDEE\r\n var tdee;\r\n switch (activityLevel) {\r\n case 'sedentary':\r\n tdee = bmr * 1.2;\r\n break;\r\n case 'lightly-active':\r\n tdee = bmr * 1.375;\r\n break;\r\n case 'moderately-active':\r\n tdee = bmr * 1.55;\r\n break;\r\n case 'very-active':\r\n tdee = bmr * 1.725;\r\n break;\r\n case 'extra-active':\r\n tdee = bmr * 1.9;\r\n break;\r\n }\r\n \r\n \/\/ Display results\r\n var results = \"<h3>Results<\/h3>\";\r\n results += \"<p>Your Basal Metabolic Rate (BMR) is: <b>\" + bmr.toFixed(2) + \" calories\/day<\/b><\/p>\";\r\n results += \"<p>Your Total Daily Energy Expenditure (TDEE) is: <b>\" + tdee.toFixed(2) + \" calories\/day<\/b><\/p>\";\r\n \r\n document.getElementById('results').innerHTML = results;\r\n document.getElementById('results').style.display = 'block';\r\n }\r\n\r\n\r\n document.getElementById('bodyFatButton').addEventListener('click', () => {\r\n const gender = document.getElementById('gender').value;\r\n const bodyFatOptions = {\r\n male: [8, 10, 15, 20, 25, 30, 35, 40],\r\n female: [12,15, 20, 25, 30, 35, 40, 45]\r\n };\r\n\r\n const tableBody = document.querySelector('#bodyFatTable tbody');\r\n tableBody.innerHTML = '';\r\n\r\n bodyFatOptions[gender].forEach((value) => {\r\n const row = document.createElement('tr');\r\n\r\n const imgCell = document.createElement('td');\r\n const imgDiv = document.createElement('div');\r\n imgDiv.className = 'image';\r\n imgDiv.style.backgroundImage = `url('https:\/\/thefuturebot.com\/demoziw\/wp-content\/uploads\/2025\/07\/${gender}_${value}.jpeg')`;\r\n imgCell.appendChild(imgDiv);\r\n\r\n const radioCell = document.createElement('td');\r\n radioCell.innerHTML = `<label><input type=\"radio\" name=\"bodyFat\" value=\"${value}\"> ${value}%<\/label>`;\r\n\r\n row.appendChild(imgCell);\r\n row.appendChild(radioCell);\r\n tableBody.appendChild(row);\r\n });\r\n\r\n \/\/ Add \"Others\" option with input box\r\n const othersRow = document.createElement('tr');\r\n\r\n const othersImgCell = document.createElement('td');\r\n othersImgCell.textContent = 'Others';\r\n\r\n const othersRadioCell = document.createElement('td');\r\n othersRadioCell.innerHTML = `\r\n <label>\r\n <input type=\"radio\" name=\"bodyFat\" value=\"others\" id=\"bodyFatOthersRadio\"> Others\r\n <\/label>\r\n <input type=\"number\" id=\"customBodyFatInput\" min=\"1\" max=\"100\" placeholder=\"Enter %\" style=\"display:none; width: 60px; margin-left: 10px;\">\r\n `;\r\n\r\n othersRow.appendChild(othersImgCell);\r\n othersRow.appendChild(othersRadioCell);\r\n tableBody.appendChild(othersRow);\r\n\r\n \/\/ Event listener to show\/hide custom input box\r\n document.getElementById('bodyFatOthersRadio').addEventListener('change', function() {\r\n const customInput = document.getElementById('customBodyFatInput');\r\n if (this.checked) {\r\n customInput.style.display = 'inline-block';\r\n customInput.focus();\r\n } else {\r\n customInput.style.display = 'none';\r\n customInput.value = '';\r\n }\r\n });\r\n\r\n \/\/ Hide custom input if any other radio is selected\r\n const bodyFatRadios = document.querySelectorAll('input[name=\"bodyFat\"]');\r\n bodyFatRadios.forEach(radio => {\r\n if (radio.id !== 'bodyFatOthersRadio') {\r\n radio.addEventListener('change', () => {\r\n const customInput = document.getElementById('customBodyFatInput');\r\n customInput.style.display = 'none';\r\n customInput.value = '';\r\n });\r\n }\r\n });\r\n\r\n document.getElementById('bodyFatOptions').style.display = 'block';\r\n });\r\n\t\t\r\n document.getElementById('gender').addEventListener('change', () => {\r\n document.getElementById('bodyFatButton').click();\r\n });\r\n\r\n\r\n \/\/ Synchronize height inputs\r\n document.getElementById('heightCm').addEventListener('input', function() {\r\n var cm = parseFloat(this.value);\r\n if (!isNaN(cm) && cm > 0) {\r\n var totalInches = cm \/ 2.54;\r\n var feet = Math.floor(totalInches \/ 12);\r\n var inches = Math.round(totalInches % 12);\r\n document.getElementById('heightFeet').value = feet;\r\n document.getElementById('heightInches').value = inches;\r\n document.getElementById('heightFeetError').innerText = \"\";\r\n } else {\r\n document.getElementById('heightFeet').value = \"\";\r\n document.getElementById('heightInches').value = \"\";\r\n }\r\n });\r\n\r\n function syncFeetInchesToCm() {\r\n var feet = parseInt(document.getElementById('heightFeet').value);\r\n var inches = parseInt(document.getElementById('heightInches').value);\r\n if (!isNaN(feet) && feet >= 0 && !isNaN(inches) && inches >= 0 && inches < 12) {\r\n var cm = (feet * 30.48) + (inches * 2.54);\r\n document.getElementById('heightCm').value = cm.toFixed(0);\r\n document.getElementById('heightError').innerText = \"\";\r\n } else {\r\n document.getElementById('heightCm').value = \"\";\r\n }\r\n }\r\n\r\n document.getElementById('heightFeet').addEventListener('input', syncFeetInchesToCm);\r\n document.getElementById('heightInches').addEventListener('input', syncFeetInchesToCm);\r\n<\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BMR & TDEE Calculator CodePen Demo Age (years): Gender: MaleFemale Weight (kg): Height (cm): Height (feet & inches): Body Fat…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-28527","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/thefuturebot.com\/demoziw\/wp-json\/wp\/v2\/pages\/28527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thefuturebot.com\/demoziw\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thefuturebot.com\/demoziw\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thefuturebot.com\/demoziw\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thefuturebot.com\/demoziw\/wp-json\/wp\/v2\/comments?post=28527"}],"version-history":[{"count":5,"href":"https:\/\/thefuturebot.com\/demoziw\/wp-json\/wp\/v2\/pages\/28527\/revisions"}],"predecessor-version":[{"id":28561,"href":"https:\/\/thefuturebot.com\/demoziw\/wp-json\/wp\/v2\/pages\/28527\/revisions\/28561"}],"wp:attachment":[{"href":"https:\/\/thefuturebot.com\/demoziw\/wp-json\/wp\/v2\/media?parent=28527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}