{"id":361,"date":"2026-07-18T17:08:31","date_gmt":"2026-07-18T17:08:31","guid":{"rendered":"https:\/\/mathpk.com\/?page_id=361"},"modified":"2026-07-18T17:09:29","modified_gmt":"2026-07-18T17:09:29","slug":"bmi-calculator","status":"publish","type":"page","link":"https:\/\/mathpk.com\/?page_id=361","title":{"rendered":"BMI Calculator"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t```html\r\n\r\n\r\n\r\n \r\n \r\n BMI Calculator \u2013 Free, Accurate, with Health Insights | MAFtrix<\/title>\r\n <meta name=\"description\" content=\"Free BMI calculator with WHO classification, ideal weight ranges, body fat estimation, personalized health recommendations, and progress tracking. Trusted and precise.\" \/>\r\n <meta name=\"keywords\" content=\"BMI calculator, body mass index, healthy weight, ideal weight, body fat, health calculator, weight loss, fitness\" \/>\r\n <meta name=\"robots\" content=\"index, follow\" \/>\r\n <meta property=\"og:title\" content=\"BMI Calculator \u2013 Free, Accurate, with Health Insights | MAFtrix\" \/>\r\n <meta property=\"og:description\" content=\"Calculate your BMI, ideal weight, body fat, and get personalized health recommendations. Track your progress over time.\" \/>\r\n <meta property=\"og:type\" content=\"website\" \/>\r\n <meta property=\"og:url\" content=\"https:\/\/www.maftrix.com\/bmi-calculator\" \/>\r\n <link rel=\"canonical\" href=\"https:\/\/www.maftrix.com\/bmi-calculator\" \/>\r\n <link rel=\"icon\" href=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='22' fill='%230F1C2E'\/%3E%3Crect x='28' y='24' width='44' height='52' rx='6' fill='%23F7F8FA'\/%3E%3Crect x='34' y='31' width='32' height='12' rx='2' fill='%230EA5A0'\/%3E%3Ccircle cx='40' cy='54' r='3.4' fill='%230F1C2E'\/%3E%3Ccircle cx='50' cy='54' r='3.4' fill='%230F1C2E'\/%3E%3Ccircle cx='60' cy='54' r='3.4' fill='%23F5A623'\/%3E%3Ccircle cx='40' cy='64' r='3.4' fill='%230F1C2E'\/%3E%3Ccircle cx='50' cy='64' r='3.4' fill='%230F1C2E'\/%3E%3Ccircle cx='60' cy='64' r='3.4' fill='%230F1C2E'\/%3E%3C\/svg%3E\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\" \/>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.3\/chart.umd.min.js\"><\/script>\r\n <script type=\"application\/ld+json\">\r\n {\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"MedicalWebPage\",\r\n \"name\": \"BMI Calculator\",\r\n \"description\": \"Calculate your Body Mass Index, ideal weight, body fat, and receive personalized health recommendations.\",\r\n \"about\": {\r\n \"@type\": \"Thing\",\r\n \"name\": \"BMI\"\r\n },\r\n \"audience\": {\r\n \"@type\": \"Audience\",\r\n \"audienceType\": \"General public\"\r\n },\r\n \"specialty\": \"Health\"\r\n }\r\n <\/script>\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n :root {\r\n --primary: #0EA5A0;\r\n --primary-dark: #0B8783;\r\n --dark: #102A43;\r\n --accent: #F5A623;\r\n --danger: #EF4444;\r\n --success: #22C55E;\r\n --bg: #F7F9FC;\r\n --surface: #FFFFFF;\r\n --line: #E3E7ED;\r\n --text: #1F2937;\r\n --text-soft: #5B6472;\r\n --radius: 16px;\r\n --shadow: 0 4px 16px rgba(15, 28, 46, .06), 0 1px 3px rgba(15, 28, 46, .08);\r\n --shadow-lg: 0 20px 48px rgba(15, 28, 46, .16);\r\n --glass: rgba(255, 255, 255, 0.7);\r\n }\r\n html {\r\n scroll-behavior: smooth;\r\n font-size: 18px;\r\n }\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: var(--bg);\r\n color: var(--text);\r\n line-height: 1.6;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n h1,\r\n h2,\r\n h3,\r\n h4,\r\n h5 {\r\n font-family: 'Space Grotesk', sans-serif;\r\n color: var(--dark);\r\n margin: 0 0 .4em;\r\n line-height: 1.15;\r\n letter-spacing: -.01em;\r\n }\r\n h1 {\r\n font-size: 2.8rem;\r\n }\r\n h2 {\r\n font-size: 2rem;\r\n }\r\n h3 {\r\n font-size: 1.4rem;\r\n }\r\n .mono {\r\n font-family: 'IBM Plex Mono', monospace;\r\n }\r\n a {\r\n color: inherit;\r\n text-decoration: none;\r\n }\r\n .wrap {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n }\r\n :focus-visible {\r\n outline: 2px solid var(--primary);\r\n outline-offset: 2px;\r\n }\r\n\r\n \/* ---------- HEADER ---------- *\/\r\n header {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n background: rgba(15, 28, 46, .94);\r\n backdrop-filter: blur(10px);\r\n border-bottom: 1px solid rgba(255, 255, 255, .08);\r\n }\r\n .nav {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 14px 0;\r\n }\r\n .logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-weight: 700;\r\n font-size: 1.3rem;\r\n color: #fff;\r\n }\r\n .logo-mark {\r\n width: 34px;\r\n height: 34px;\r\n border-radius: 9px;\r\n background: linear-gradient(155deg, var(--primary), var(--primary-dark));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #fff;\r\n font-family: 'IBM Plex Mono', monospace;\r\n font-weight: 600;\r\n font-size: .95rem;\r\n }\r\n .logo .accent {\r\n color: var(--accent);\r\n }\r\n nav.links {\r\n display: flex;\r\n gap: 2px;\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n nav.links a {\r\n color: rgba(255, 255, 255, .78);\r\n padding: 10px 16px;\r\n border-radius: 8px;\r\n font-size: .95rem;\r\n font-weight: 500;\r\n transition: .2s;\r\n }\r\n nav.links a:hover {\r\n color: #fff;\r\n background: rgba(255, 255, 255, .08);\r\n }\r\n nav.links a.active {\r\n color: var(--dark);\r\n background: var(--accent);\r\n }\r\n\r\n \/* ---------- HERO ---------- *\/\r\n .hero {\r\n background: radial-gradient(ellipse at 15% -10%, #1a3552 0%, var(--dark) 55%);\r\n color: #fff;\r\n padding: 64px 0 56px;\r\n text-align: center;\r\n }\r\n .hero h1 {\r\n color: #fff;\r\n font-size: 3.2rem;\r\n margin-bottom: .2em;\r\n }\r\n .hero h1 em {\r\n font-style: normal;\r\n color: var(--primary);\r\n }\r\n .hero p {\r\n color: rgba(255, 255, 255, .72);\r\n font-size: 1.15rem;\r\n max-width: 600px;\r\n margin: 0 auto 24px;\r\n }\r\n .trust-badges {\r\n display: flex;\r\n gap: 24px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n font-size: .85rem;\r\n color: rgba(255, 255, 255, .6);\r\n }\r\n .trust-badges span {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n }\r\n .trust-badges svg {\r\n fill: var(--accent);\r\n }\r\n\r\n \/* ---------- BUTTONS ---------- *\/\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 13px 28px;\r\n border-radius: 10px;\r\n font-weight: 600;\r\n font-size: .95rem;\r\n border: 1px solid transparent;\r\n transition: .2s;\r\n white-space: nowrap;\r\n font-family: inherit;\r\n cursor: pointer;\r\n }\r\n .btn-primary {\r\n background: var(--primary);\r\n color: #fff;\r\n }\r\n .btn-primary:hover {\r\n background: var(--primary-dark);\r\n transform: translateY(-1px);\r\n }\r\n .btn-accent {\r\n background: var(--accent);\r\n color: var(--dark);\r\n }\r\n .btn-accent:hover {\r\n filter: brightness(.95);\r\n transform: translateY(-1px);\r\n }\r\n .btn-outline {\r\n background: transparent;\r\n border-color: rgba(255, 255, 255, .35);\r\n color: #fff;\r\n }\r\n .btn-outline:hover {\r\n background: rgba(255, 255, 255, .1);\r\n }\r\n .btn-ghost {\r\n background: var(--surface);\r\n border-color: var(--line);\r\n color: var(--dark);\r\n }\r\n .btn-ghost:hover {\r\n border-color: var(--primary);\r\n color: var(--primary-dark);\r\n }\r\n .btn-block {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n .btn-sm {\r\n padding: 9px 16px;\r\n font-size: .85rem;\r\n }\r\n\r\n \/* ---------- CARDS ---------- *\/\r\n .card {\r\n background: var(--surface);\r\n border: 1px solid var(--line);\r\n border-radius: var(--radius);\r\n padding: 28px;\r\n box-shadow: var(--shadow);\r\n transition: .25s;\r\n }\r\n .card:hover {\r\n box-shadow: var(--shadow-lg);\r\n transform: translateY(-2px);\r\n }\r\n .glass {\r\n background: var(--glass);\r\n backdrop-filter: blur(8px);\r\n border: 1px solid rgba(255, 255, 255, .3);\r\n }\r\n\r\n \/* ---------- CALCULATOR FORM ---------- *\/\r\n .calc-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 32px;\r\n align-items: start;\r\n margin-top: 40px;\r\n }\r\n .field-group {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 16px;\r\n margin-bottom: 16px;\r\n }\r\n .field-group.three {\r\n grid-template-columns: 1fr 1fr 1fr;\r\n }\r\n .field {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n }\r\n .field label {\r\n font-size: .78rem;\r\n font-weight: 600;\r\n color: var(--dark);\r\n letter-spacing: .02em;\r\n }\r\n .field select,\r\n .field input {\r\n border: 1px solid var(--line);\r\n border-radius: 9px;\r\n padding: 11px 12px;\r\n font-family: inherit;\r\n font-size: .95rem;\r\n background: #fff;\r\n color: var(--text);\r\n width: 100%;\r\n transition: .15s;\r\n }\r\n .field select:focus,\r\n .field input:focus {\r\n outline: none;\r\n border-color: var(--primary);\r\n box-shadow: 0 0 0 3px rgba(14, 165, 160, .15);\r\n }\r\n\r\n \/* ---------- RESULTS DASHBOARD ---------- *\/\r\n .results-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n margin-top: 32px;\r\n }\r\n .stat-card {\r\n background: var(--surface);\r\n border: 1px solid var(--line);\r\n border-radius: var(--radius);\r\n padding: 20px 22px;\r\n text-align: center;\r\n box-shadow: var(--shadow);\r\n transition: .2s;\r\n }\r\n .stat-card:hover {\r\n box-shadow: var(--shadow-lg);\r\n transform: translateY(-2px);\r\n }\r\n .stat-card .number {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 2.4rem;\r\n font-weight: 700;\r\n color: var(--primary-dark);\r\n line-height: 1.2;\r\n }\r\n .stat-card .label {\r\n font-size: .8rem;\r\n color: var(--text-soft);\r\n text-transform: uppercase;\r\n letter-spacing: .04em;\r\n margin-top: 4px;\r\n }\r\n .stat-card .sub {\r\n font-size: .85rem;\r\n color: var(--text-soft);\r\n margin-top: 6px;\r\n }\r\n .stat-card.accent .number {\r\n color: var(--accent);\r\n }\r\n .stat-card.danger .number {\r\n color: var(--danger);\r\n }\r\n .stat-card.success .number {\r\n color: var(--success);\r\n }\r\n .stat-card.dark .number {\r\n color: var(--dark);\r\n }\r\n\r\n \/* ---------- BMI GAUGE ---------- *\/\r\n .gauge-wrap {\r\n position: relative;\r\n width: 100%;\r\n max-width: 380px;\r\n margin: 0 auto;\r\n }\r\n .gauge-wrap svg {\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n \/* ---------- CATEGORY BADGE ---------- *\/\r\n .badge {\r\n display: inline-block;\r\n padding: 6px 18px;\r\n border-radius: 40px;\r\n font-weight: 700;\r\n font-size: .85rem;\r\n color: #fff;\r\n margin: 8px 0;\r\n }\r\n .badge.underweight {\r\n background: #94A3B8;\r\n }\r\n .badge.normal {\r\n background: var(--success);\r\n }\r\n .badge.overweight {\r\n background: var(--accent);\r\n }\r\n .badge.obese1 {\r\n background: #F59E0B;\r\n }\r\n .badge.obese2 {\r\n background: #EF4444;\r\n }\r\n .badge.obese3 {\r\n background: #B91C1C;\r\n }\r\n\r\n \/* ---------- RECOMMENDATIONS ---------- *\/\r\n .rec-card {\r\n background: var(--surface);\r\n border: 1px solid var(--line);\r\n border-radius: var(--radius);\r\n padding: 18px 20px;\r\n margin-top: 12px;\r\n border-left: 4px solid var(--primary);\r\n box-shadow: var(--shadow);\r\n }\r\n .rec-card.danger {\r\n border-left-color: var(--danger);\r\n }\r\n .rec-card.success {\r\n border-left-color: var(--success);\r\n }\r\n .rec-card.accent {\r\n border-left-color: var(--accent);\r\n }\r\n\r\n \/* ---------- TABLES ---------- *\/\r\n .table-wrap {\r\n overflow-x: auto;\r\n margin-top: 16px;\r\n }\r\n .table-wrap table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: .9rem;\r\n }\r\n .table-wrap th,\r\n .table-wrap td {\r\n padding: 10px 14px;\r\n border-bottom: 1px solid var(--line);\r\n text-align: left;\r\n }\r\n .table-wrap th {\r\n background: var(--bg);\r\n font-weight: 600;\r\n font-size: .75rem;\r\n text-transform: uppercase;\r\n color: var(--text-soft);\r\n }\r\n .table-wrap tr:hover td {\r\n background: rgba(14, 165, 160, .04);\r\n }\r\n\r\n \/* ---------- FAQ ---------- *\/\r\n .faq-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 16px;\r\n margin-top: 30px;\r\n }\r\n .faq-item {\r\n background: var(--surface);\r\n border: 1px solid var(--line);\r\n border-radius: var(--radius);\r\n padding: 18px 20px;\r\n box-shadow: var(--shadow);\r\n transition: .2s;\r\n }\r\n .faq-item:hover {\r\n box-shadow: var(--shadow-lg);\r\n }\r\n .faq-item summary {\r\n font-weight: 600;\r\n color: var(--dark);\r\n cursor: pointer;\r\n font-size: .95rem;\r\n list-style: none;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n .faq-item summary::after {\r\n content: \"\u25bc\";\r\n font-size: .7rem;\r\n color: var(--text-soft);\r\n transition: .2s;\r\n }\r\n .faq-item[open] summary::after {\r\n transform: rotate(180deg);\r\n }\r\n .faq-item p {\r\n margin-top: 12px;\r\n color: var(--text-soft);\r\n font-size: .9rem;\r\n }\r\n\r\n \/* ---------- RELATED ---------- *\/\r\n .related-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\r\n gap: 16px;\r\n margin-top: 30px;\r\n }\r\n .related-card {\r\n background: var(--surface);\r\n border: 1px solid var(--line);\r\n border-radius: var(--radius);\r\n padding: 18px 16px;\r\n text-align: center;\r\n transition: .2s;\r\n box-shadow: var(--shadow);\r\n }\r\n .related-card:hover {\r\n box-shadow: var(--shadow-lg);\r\n transform: translateY(-3px);\r\n }\r\n .related-card h4 {\r\n font-size: .95rem;\r\n margin: 0;\r\n }\r\n .related-card .badge-sm {\r\n font-family: 'IBM Plex Mono', monospace;\r\n font-size: .65rem;\r\n color: var(--text-soft);\r\n background: var(--bg);\r\n padding: 2px 10px;\r\n border-radius: 12px;\r\n display: inline-block;\r\n margin-top: 6px;\r\n }\r\n\r\n \/* ---------- FOOTER ---------- *\/\r\n footer {\r\n background: var(--dark);\r\n color: rgba(255, 255, 255, .65);\r\n padding: 40px 0 20px;\r\n margin-top: 40px;\r\n }\r\n footer .foot-grid {\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr 1fr;\r\n gap: 32px;\r\n padding-bottom: 30px;\r\n }\r\n footer h5 {\r\n color: #fff;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: .95rem;\r\n margin-bottom: 16px;\r\n }\r\n footer ul {\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n font-size: .9rem;\r\n }\r\n footer ul a:hover {\r\n color: #fff;\r\n }\r\n .foot-bottom {\r\n border-top: 1px solid rgba(255, 255, 255, .1);\r\n padding: 20px 0;\r\n display: flex;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n font-size: .82rem;\r\n }\r\n\r\n \/* ---------- CHARTS ---------- *\/\r\n .chart-container {\r\n background: var(--surface);\r\n border: 1px solid var(--line);\r\n border-radius: var(--radius);\r\n padding: 20px 24px;\r\n margin-top: 32px;\r\n box-shadow: var(--shadow);\r\n }\r\n .chart-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 30px;\r\n align-items: center;\r\n }\r\n .chart-box {\r\n position: relative;\r\n height: 200px;\r\n }\r\n\r\n \/* ---------- PROGRESS ---------- *\/\r\n .progress-track {\r\n height: 10px;\r\n background: var(--line);\r\n border-radius: 20px;\r\n overflow: hidden;\r\n margin: 12px 0 6px;\r\n }\r\n .progress-fill {\r\n height: 100%;\r\n border-radius: 20px;\r\n transition: width .6s ease;\r\n width: 0%;\r\n }\r\n .progress-fill.green {\r\n background: var(--success);\r\n }\r\n .progress-fill.yellow {\r\n background: var(--accent);\r\n }\r\n .progress-fill.red {\r\n background: var(--danger);\r\n }\r\n\r\n \/* ---------- UTILITY ---------- *\/\r\n .hidden {\r\n display: none !important;\r\n }\r\n .text-center {\r\n text-align: center;\r\n }\r\n .mt-20 {\r\n margin-top: 20px;\r\n }\r\n .mb-20 {\r\n margin-bottom: 20px;\r\n }\r\n .flex-wrap {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n }\r\n .items-center {\r\n align-items: center;\r\n }\r\n .justify-between {\r\n justify-content: space-between;\r\n }\r\n\r\n .fade-in {\r\n animation: fadeIn .5s ease forwards;\r\n }\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n transform: translateY(12px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n .slide-up {\r\n animation: slideUp .4s ease forwards;\r\n }\r\n @keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .error-card {\r\n background: #3a1f1a;\r\n border-radius: var(--radius);\r\n padding: 20px 24px;\r\n color: #fff;\r\n margin-top: 20px;\r\n border-left: 4px solid #ff8f78;\r\n }\r\n .error-card .label {\r\n font-family: 'IBM Plex Mono', monospace;\r\n font-size: .72rem;\r\n letter-spacing: .08em;\r\n color: rgba(255, 255, 255, .5);\r\n text-transform: uppercase;\r\n }\r\n .error-card .value {\r\n font-size: 1.1rem;\r\n color: #ff8f78;\r\n font-weight: 600;\r\n }\r\n\r\n \/* ---------- RESPONSIVE ---------- *\/\r\n @media (max-width: 900px) {\r\n .calc-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .results-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n .chart-row {\r\n grid-template-columns: 1fr;\r\n }\r\n .faq-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n footer .foot-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n .field-group.three {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n }\r\n @media (max-width: 600px) {\r\n .results-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .hero h1 {\r\n font-size: 2rem;\r\n }\r\n .stat-card .number {\r\n font-size: 1.8rem;\r\n }\r\n .field-group.three {\r\n grid-template-columns: 1fr;\r\n }\r\n .field-group {\r\n grid-template-columns: 1fr;\r\n }\r\n footer .foot-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n nav.links {\r\n width: 100%;\r\n justify-content: center;\r\n padding-top: 10px;\r\n flex-wrap: wrap;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ============ HEADER ============ -->\r\n <header>\r\n <div class=\"wrap nav\">\r\n <a href=\"#\" class=\"logo\" aria-label=\"MAFtrix home\">\r\n <span class=\"logo-mark\">M<\/span>\r\n <span class=\"logo-word\">MAF<span class=\"accent\">trix<\/span><\/span>\r\n <\/a>\r\n <nav class=\"links\" aria-label=\"Main navigation\">\r\n <a href=\"#\" class=\"active\">BMI Calculator<\/a>\r\n <a href=\"#faq\">FAQ<\/a>\r\n <a href=\"#related\">Calculators<\/a>\r\n <\/nav>\r\n <\/div>\r\n <\/header>\r\n\r\n <main>\r\n\r\n <!-- ============ HERO ============ -->\r\n <section class=\"hero\">\r\n <div class=\"wrap\">\r\n <h1>BMI Calculator \u2013 <em>Your Health, Simplified<\/em><\/h1>\r\n <p>Get your Body Mass Index, ideal weight range, body fat estimate, and personalized health recommendations \u2013 all in seconds.<\/p>\r\n <div class=\"trust-badges\">\r\n <span>\u2713 WHO Verified<\/span>\r\n <span>\u2713 Privacy First<\/span>\r\n <span>\u2713 Free & Accurate<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============ CALCULATOR ============ -->\r\n <section class=\"section\" id=\"calculator\">\r\n <div class=\"wrap\">\r\n <div class=\"calc-grid\">\r\n <!-- Form -->\r\n <div class=\"card\">\r\n <h3>Your Details<\/h3>\r\n <div class=\"field-group three\">\r\n <div class=\"field\">\r\n <label for=\"height\">Height<\/label>\r\n <input type=\"number\" id=\"height\" step=\"0.1\" value=\"175\" \/>\r\n <select id=\"height-unit\" style=\"margin-top:4px;\">\r\n <option value=\"cm\">cm<\/option>\r\n <option value=\"m\">m<\/option>\r\n <option value=\"ft\">ft\/in<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"weight\">Weight<\/label>\r\n <input type=\"number\" id=\"weight\" step=\"0.1\" value=\"75\" \/>\r\n <select id=\"weight-unit\" style=\"margin-top:4px;\">\r\n <option value=\"kg\">kg<\/option>\r\n <option value=\"lbs\">lbs<\/option>\r\n <option value=\"stones\">stones<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"age\">Age<\/label>\r\n <input type=\"number\" id=\"age\" value=\"30\" min=\"2\" max=\"120\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"field-group\">\r\n <div class=\"field\">\r\n <label for=\"gender\">Gender<\/label>\r\n <select id=\"gender\">\r\n <option value=\"male\">Male<\/option>\r\n <option value=\"female\">Female<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"activity\">Activity Level<\/label>\r\n <select id=\"activity\">\r\n <option value=\"1.2\">Sedentary<\/option>\r\n <option value=\"1.375\" selected>Lightly Active<\/option>\r\n <option value=\"1.55\">Moderately Active<\/option>\r\n <option value=\"1.725\">Very Active<\/option>\r\n <option value=\"1.9\">Extra Active<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"field-group\" style=\"margin-top:8px;\">\r\n <div class=\"field\">\r\n <label for=\"waist\">Waist (cm, optional)<\/label>\r\n <input type=\"number\" id=\"waist\" step=\"0.1\" placeholder=\"e.g. 85\" \/>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"hip\">Hip (cm, optional)<\/label>\r\n <input type=\"number\" id=\"hip\" step=\"0.1\" placeholder=\"e.g. 100\" \/>\r\n <\/div>\r\n <\/div>\r\n <button class=\"btn btn-primary btn-block\" id=\"calc-btn\" style=\"margin-top:16px;\">Calculate BMI<\/button>\r\n <button class=\"btn btn-ghost btn-block\" id=\"reset-btn\" style=\"margin-top:8px;\">Reset<\/button>\r\n <div id=\"error-container\"><\/div>\r\n <\/div>\r\n\r\n <!-- Results Preview -->\r\n <div>\r\n <div class=\"card\" style=\"height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;\">\r\n <div id=\"bmi-preview\" style=\"font-size:3.2rem;font-weight:700;color:var(--primary-dark);font-family:'Space Grotesk',sans-serif;\">\u2014<\/div>\r\n <div id=\"category-preview\" class=\"badge\" style=\"margin:12px 0;\">Enter your details<\/div>\r\n <div style=\"color:var(--text-soft);font-size:.9rem;\" id=\"status-preview\">Fill in your height and weight above<\/div>\r\n <div style=\"margin-top:16px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;\">\r\n <div><span style=\"font-size:.7rem;color:var(--text-soft);text-transform:uppercase;display:block;\">Ideal Weight<\/span><span style=\"font-weight:700;\" id=\"ideal-preview\">\u2014<\/span><\/div>\r\n <div><span style=\"font-size:.7rem;color:var(--text-soft);text-transform:uppercase;display:block;\">Body Fat<\/span><span style=\"font-weight:700;\" id=\"fat-preview\">\u2014<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ============ RESULTS DASHBOARD ============ -->\r\n <div id=\"results-container\" class=\"hidden\">\r\n <!-- Main Stats -->\r\n <div class=\"results-grid\">\r\n <div class=\"stat-card\"><div class=\"number\" id=\"r-bmi\">0<\/div><div class=\"label\">BMI<\/div><div class=\"sub\" id=\"r-category\">\u2014<\/div><\/div>\r\n <div class=\"stat-card accent\"><div class=\"number\" id=\"r-ideal\">0<\/div><div class=\"label\">Ideal Weight (kg)<\/div><div class=\"sub\" id=\"r-ideal-range\">\u2014<\/div><\/div>\r\n <div class=\"stat-card success\"><div class=\"number\" id=\"r-bodyfat\">0%<\/div><div class=\"label\">Body Fat %<\/div><div class=\"sub\" id=\"r-fatmass\">\u2014<\/div><\/div>\r\n <div class=\"stat-card dark\"><div class=\"number\" id=\"r-bmr\">0<\/div><div class=\"label\">BMR (kcal\/day)<\/div><div class=\"sub\" id=\"r-tdee\">\u2014<\/div><\/div>\r\n <\/div>\r\n\r\n <!-- Waist & Hip Ratios -->\r\n <div class=\"results-grid\" style=\"grid-template-columns:1fr 1fr 1fr;\">\r\n <div class=\"stat-card\"><div class=\"number\" id=\"r-whtr\">\u2014<\/div><div class=\"label\">Waist-to-Height<\/div><div class=\"sub\" id=\"r-whtr-risk\">\u2014<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"number\" id=\"r-whr\">\u2014<\/div><div class=\"label\">Waist-to-Hip<\/div><div class=\"sub\" id=\"r-whr-risk\">\u2014<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"number\" id=\"r-bsa\">\u2014<\/div><div class=\"label\">Body Surface Area (m\u00b2)<\/div><\/div>\r\n <\/div>\r\n\r\n <!-- BMI Gauge -->\r\n <div class=\"card\" style=\"margin-top:32px;\">\r\n <h4>BMI Scale<\/h4>\r\n <div class=\"gauge-wrap\" id=\"gauge-container\"><\/div>\r\n <div style=\"display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-soft);margin-top:-10px;\">\r\n <span>Underweight<\/span><span>Normal<\/span><span>Overweight<\/span><span>Obese<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Health Recommendations -->\r\n <div class=\"card\" style=\"margin-top:32px;\">\r\n <h4>Personalized Recommendations<\/h4>\r\n <div id=\"recommendations\"><\/div>\r\n <\/div>\r\n\r\n <!-- Weight Planner -->\r\n <div class=\"card\" style=\"margin-top:32px;\">\r\n <h4>Weight Planner<\/h4>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px;\">\r\n <div class=\"field\"><label>Target BMI<\/label><input type=\"number\" id=\"target-bmi\" step=\"0.1\" value=\"22\" \/><\/div>\r\n <div class=\"field\"><label>Target Date<\/label><input type=\"date\" id=\"target-date\" \/><\/div>\r\n <\/div>\r\n <button class=\"btn btn-accent btn-block\" id=\"plan-btn\" style=\"margin-top:12px;\">Plan My Weight<\/button>\r\n <div id=\"plan-results\" style=\"margin-top:16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;\"><\/div>\r\n <\/div>\r\n\r\n <!-- Progress Tracker -->\r\n <div class=\"card\" style=\"margin-top:32px;\">\r\n <h4>Progress Tracker<\/h4>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px;\">\r\n <div class=\"field\"><label>Weight (kg)<\/label><input type=\"number\" id=\"track-weight\" step=\"0.1\" \/><\/div>\r\n <div class=\"field\"><label>Date<\/label><input type=\"date\" id=\"track-date\" \/><\/div>\r\n <\/div>\r\n <button class=\"btn btn-primary btn-block\" id=\"track-btn\" style=\"margin-top:12px;\">Save Entry<\/button>\r\n <div id=\"track-list\" style=\"margin-top:16px;max-height:200px;overflow-y:auto;\"><\/div>\r\n <button class=\"btn btn-ghost btn-sm\" id=\"clear-track\" style=\"margin-top:8px;\">Clear History<\/button>\r\n <\/div>\r\n\r\n <!-- Charts -->\r\n <div class=\"chart-container\">\r\n <h4>Body Composition<\/h4>\r\n <div class=\"chart-row\">\r\n <div class=\"chart-box\"><canvas id=\"pieChart\"><\/canvas><\/div>\r\n <div class=\"chart-box\"><canvas id=\"barChart\"><\/canvas><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Ideal Weight Comparison -->\r\n <div class=\"card\" style=\"margin-top:32px;\">\r\n <h4>Ideal Weight Formulas<\/h4>\r\n <div class=\"table-wrap\">\r\n <table>\r\n <thead><tr><th>Formula<\/th><th>Weight (kg)<\/th><\/tr><\/thead>\r\n <tbody id=\"ideal-table\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Health Risk Analysis -->\r\n <div class=\"card\" style=\"margin-top:32px;\">\r\n <h4>Health Risk Analysis<\/h4>\r\n <div id=\"risk-grid\" style=\"display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;\"><\/div>\r\n <\/div>\r\n\r\n <!-- Macronutrients -->\r\n <div class=\"card\" style=\"margin-top:32px;\">\r\n <h4>Daily Macronutrient Targets<\/h4>\r\n <div id=\"macro-grid\" style=\"display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;\"><\/div>\r\n <\/div>\r\n\r\n <!-- Hydration -->\r\n <div class=\"card\" style=\"margin-top:32px;\">\r\n <h4>Daily Water Intake<\/h4>\r\n <div style=\"display:flex;align-items:center;gap:16px;flex-wrap:wrap;\">\r\n <span style=\"font-size:2rem;font-weight:700;color:var(--primary-dark);\" id=\"water-intake\">\u2014 L<\/span>\r\n <span style=\"color:var(--text-soft);\">\u2248 <span id=\"water-glasses\">\u2014<\/span> glasses (250ml)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Actions -->\r\n <div style=\"display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;justify-content:center;\">\r\n <button class=\"btn btn-primary\" id=\"copy-btn\">\ud83d\udccb Copy Results<\/button>\r\n <button class=\"btn btn-ghost\" id=\"print-btn\">\ud83d\udda8\ufe0f Print Report<\/button>\r\n <button class=\"btn btn-ghost\" id=\"share-btn\">\ud83d\udd17 Share<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============ EDUCATIONAL SECTION ============ -->\r\n <section class=\"section\" style=\"background:#fff;\" id=\"education\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head\">\r\n <span class=\"kicker\">Learn<\/span>\r\n <h2>Understanding BMI<\/h2>\r\n <\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:32px;\">\r\n <div>\r\n <h3>What is BMI?<\/h3>\r\n <p style=\"color:var(--text-soft);\">Body Mass Index (BMI) is a measure of body fat based on height and weight. It is widely used as a screening tool to identify potential weight problems in adults.<\/p>\r\n <div class=\"formula-box\" style=\"background:var(--dark);color:#fff;border-radius:12px;padding:20px;margin-top:16px;\">\r\n <div class=\"mono\" style=\"font-size:.7rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;\">Metric Formula<\/div>\r\n <div style=\"font-size:1.2rem;font-family:'IBM Plex Mono',monospace;color:var(--accent);\">BMI = Weight (kg) \u00f7 Height\u00b2 (m\u00b2)<\/div>\r\n <\/div>\r\n <div class=\"formula-box\" style=\"background:var(--dark);color:#fff;border-radius:12px;padding:20px;margin-top:12px;\">\r\n <div class=\"mono\" style=\"font-size:.7rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;\">Imperial Formula<\/div>\r\n <div style=\"font-size:1.2rem;font-family:'IBM Plex Mono',monospace;color:var(--accent);\">BMI = 703 \u00d7 Weight (lb) \u00f7 Height\u00b2 (in\u00b2)<\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <h3>WHO BMI Classification<\/h3>\r\n <div class=\"table-wrap\">\r\n <table>\r\n <thead><tr><th>Category<\/th><th>BMI Range<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr><td>Severely Underweight<\/td><td>< 16.0<\/td><\/tr>\r\n <tr><td>Underweight<\/td><td>16.0 \u2013 18.4<\/td><\/tr>\r\n <tr><td>Normal<\/td><td>18.5 \u2013 24.9<\/td><\/tr>\r\n <tr><td>Overweight<\/td><td>25.0 \u2013 29.9<\/td><\/tr>\r\n <tr><td>Obesity Class I<\/td><td>30.0 \u2013 34.9<\/td><\/tr>\r\n <tr><td>Obesity Class II<\/td><td>35.0 \u2013 39.9<\/td><\/tr>\r\n <tr><td>Obesity Class III<\/td><td>\u2265 40.0<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p style=\"color:var(--text-soft);font-size:.85rem;margin-top:12px;\">BMI is a screening tool, not a diagnostic tool. It should be interpreted alongside other health metrics.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============ FAQ ============ -->\r\n <section class=\"section\" id=\"faq\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head\">\r\n <span class=\"kicker\">Questions<\/span>\r\n <h2>Frequently Asked Questions<\/h2>\r\n <\/div>\r\n <div class=\"faq-grid\">\r\n <details class=\"faq-item\"><summary>What is BMI?<\/summary><p>BMI (Body Mass Index) is a simple ratio of weight to height used to screen for weight categories that may lead to health problems.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>How accurate is BMI?<\/summary><p>BMI is a useful population-level tool but has limitations. It doesn't distinguish muscle from fat, so athletes may have high BMI but low body fat.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>What is a healthy BMI?<\/summary><p>A BMI between 18.5 and 24.9 is generally considered healthy for most adults.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>Can BMI be wrong?<\/summary><p>Yes. BMI can misclassify muscular individuals, older adults, and pregnant women. It's best used alongside other measures.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>What is the ideal weight for my height?<\/summary><p>Your ideal weight depends on your height, frame, and muscle mass. This calculator provides a range based on several established formulas.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>How does body fat relate to BMI?<\/summary><p>BMI and body fat percentage are correlated but not identical. This calculator estimates body fat using BMI, age, and gender.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>Is BMI different for children?<\/summary><p>Yes. Pediatric BMI uses age and gender-specific percentiles. This calculator is intended for adults 18+.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>How often should I check my BMI?<\/summary><p>Every few months is sufficient for most people. More frequent tracking can help with weight management goals.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>What is the Waist-to-Height Ratio?<\/summary><p>A measure of fat distribution. A ratio below 0.5 is generally associated with lower health risk.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>Why does my BMI say I'm overweight but I'm fit?<\/summary><p>Muscle is denser than fat. If you're athletic, you may have a higher BMI but a healthy body fat percentage. This is a known limitation of BMI.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>What is a good BMI for older adults?<\/summary><p>For adults over 65, a BMI between 23 and 28 is often associated with better health outcomes.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>How does pregnancy affect BMI?<\/summary><p>BMI is not accurate during pregnancy. Use weight gain guidelines from your healthcare provider instead.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>What is the Asian BMI classification?<\/summary><p>Some health organizations use lower BMI cutoffs for Asian populations due to higher health risks at lower BMIs.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>Can I use this calculator for athletes?<\/summary><p>Yes, but be aware that BMI may overestimate body fat in athletes. Use the body fat and waist-to-height metrics for a better picture.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>What is the difference between BMI and BMR?<\/summary><p>BMI measures body composition; BMR (Basal Metabolic Rate) measures the calories your body burns at rest.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>How do I lose weight safely?<\/summary><p>Gradual weight loss (0.5-1 kg per week) through balanced nutrition and exercise is generally recommended. Consult a professional for personalized advice.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>What is the best exercise for my BMI?<\/summary><p>The calculator provides recommendations based on your BMI category. Always consult a fitness professional for personalized plans.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>Does this calculator store my data?<\/summary><p>No. All calculations are performed locally in your browser. Your data is never sent to a server.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>Can I print my results?<\/summary><p>Yes \u2013 use the \"Print Report\" button for a clean, printer-friendly summary.<\/p><\/details>\r\n <details class=\"faq-item\"><summary>Is this calculator medical grade?<\/summary><p>This is an educational tool. Always consult a qualified healthcare professional for medical decisions.<\/p><\/details>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============ RELATED ============ -->\r\n <section class=\"section\" style=\"background:#fff;\" id=\"related\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head\">\r\n <span class=\"kicker\">More Tools<\/span>\r\n <h2>Related Calculators<\/h2>\r\n <\/div>\r\n <div class=\"related-grid\">\r\n <a href=\"#\" class=\"related-card\"><h4>BMR Calculator<\/h4><span class=\"badge-sm\">Health<\/span><\/a>\r\n <a href=\"#\" class=\"related-card\"><h4>TDEE Calculator<\/h4><span class=\"badge-sm\">Health<\/span><\/a>\r\n <a href=\"#\" class=\"related-card\"><h4>Ideal Weight<\/h4><span class=\"badge-sm\">Health<\/span><\/a>\r\n <a href=\"#\" class=\"related-card\"><h4>Body Fat<\/h4><span class=\"badge-sm\">Health<\/span><\/a>\r\n <a href=\"#\" class=\"related-card\"><h4>Calorie Calculator<\/h4><span class=\"badge-sm\">Health<\/span><\/a>\r\n <a href=\"#\" class=\"related-card\"><h4>Water Intake<\/h4><span class=\"badge-sm\">Health<\/span><\/a>\r\n <a href=\"#\" class=\"related-card\"><h4>Macro Calculator<\/h4><span class=\"badge-sm\">Health<\/span><\/a>\r\n <a href=\"#\" class=\"related-card\"><h4>Pregnancy Weight<\/h4><span class=\"badge-sm\">Health<\/span><\/a>\r\n <a href=\"#\" class=\"related-card\"><h4>Waist-to-Hip<\/h4><span class=\"badge-sm\">Health<\/span><\/a>\r\n <a href=\"#\" class=\"related-card\"><h4>Lean Body Mass<\/h4><span class=\"badge-sm\">Health<\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n <!-- ============ FOOTER ============ -->\r\n <footer>\r\n <div class=\"wrap\">\r\n <div class=\"foot-grid\">\r\n <div>\r\n <a href=\"#\" class=\"logo\"><span class=\"logo-mark\">M<\/span><span class=\"logo-word\">MAF<span class=\"accent\">trix<\/span><\/span><\/a>\r\n <p style=\"max-width:280px;margin-top:12px;font-size:.9rem;\">Free, accurate health calculators for a healthier you.<\/p>\r\n <\/div>\r\n <div><h5>Calculators<\/h5><ul><li><a href=\"#\">BMI<\/a><\/li><li><a href=\"#\">BMR<\/a><\/li><li><a href=\"#\">Body Fat<\/a><\/li><li><a href=\"#\">Calories<\/a><\/li><\/ul><\/div>\r\n <div><h5>Company<\/h5><ul><li><a href=\"#\">About<\/a><\/li><li><a href=\"#\">Contact<\/a><\/li><li><a href=\"#\">Privacy<\/a><\/li><li><a href=\"#\">Terms<\/a><\/li><\/ul><\/div>\r\n <div><h5>Follow<\/h5><ul><li><a href=\"#\">Twitter<\/a><\/li><li><a href=\"#\">LinkedIn<\/a><\/li><li><a href=\"#\">GitHub<\/a><\/li><\/ul><\/div>\r\n <\/div>\r\n <div class=\"foot-bottom\"><span>\u00a9 2026 MAFtrix. All rights reserved.<\/span><span>\u2695\ufe0f For educational purposes only.<\/span><\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ ============================================================\r\n \/\/ BMI CALCULATOR \u2013 FULL LOGIC\r\n \/\/ ============================================================\r\n\r\n \/\/ ----- DOM refs -----\r\n const $ = id => document.getElementById(id);\r\n const height = $('height'),\r\n heightUnit = $('height-unit');\r\n const weight = $('weight'),\r\n weightUnit = $('weight-unit');\r\n const age = $('age'),\r\n gender = $('gender'),\r\n activity = $('activity');\r\n const waist = $('waist'),\r\n hip = $('hip');\r\n const calcBtn = $('calc-btn'),\r\n resetBtn = $('reset-btn');\r\n const errorContainer = $('error-container');\r\n const resultsContainer = $('results-container');\r\n\r\n \/\/ Preview\r\n const bmiPreview = $('bmi-preview'),\r\n categoryPreview = $('category-preview'),\r\n statusPreview = $('status-preview');\r\n const idealPreview = $('ideal-preview'),\r\n fatPreview = $('fat-preview');\r\n\r\n \/\/ Results\r\n const r = {};\r\n ['bmi', 'category', 'ideal', 'ideal-range', 'bodyfat', 'fatmass', 'bmr', 'tdee',\r\n 'whtr', 'whtr-risk', 'whr', 'whr-risk', 'bsa'\r\n ].forEach(id => r[id] = $(`r-${id}`));\r\n\r\n let pieChart = null,\r\n barChart = null;\r\n\r\n \/\/ ----- Helpers -----\r\n function toCm(val, unit) {\r\n if (unit === 'cm') return val;\r\n if (unit === 'm') return val * 100;\r\n if (unit === 'ft') return val * 30.48; \/\/ assumes ft\/in combined as inches\r\n return val;\r\n }\r\n\r\n function toKg(val, unit) {\r\n if (unit === 'kg') return val;\r\n if (unit === 'lbs') return val \/ 2.20462;\r\n if (unit === 'stones') return val * 6.35029;\r\n return val;\r\n }\r\n\r\n function getBMICategory(bmi) {\r\n if (bmi < 16) return { label: 'Severely Underweight', cls: 'underweight', color: '#94A3B8' };\r\n if (bmi < 18.5) return { label: 'Underweight', cls: 'underweight', color: '#94A3B8' };\r\n if (bmi < 25) return { label: 'Normal', cls: 'normal', color: '#22C55E' };\r\n if (bmi < 30) return { label: 'Overweight', cls: 'overweight', color: '#F5A623' };\r\n if (bmi < 35) return { label: 'Obesity Class I', cls: 'obese1', color: '#F59E0B' };\r\n if (bmi < 40) return { label: 'Obesity Class II', cls: 'obese2', color: '#EF4444' };\r\n return { label: 'Obesity Class III', cls: 'obese3', color: '#B91C1C' };\r\n }\r\n\r\n function idealWeightDevine(heightCm, gender) {\r\n const inches = heightCm \/ 2.54;\r\n const over5ft = Math.max(0, inches - 60);\r\n if (gender === 'male') return 50 + 2.3 * over5ft;\r\n return 45.5 + 2.3 * over5ft;\r\n }\r\n\r\n function idealWeightHamwi(heightCm, gender) {\r\n const inches = heightCm \/ 2.54;\r\n const over5ft = Math.max(0, inches - 60);\r\n if (gender === 'male') return 48 + 2.7 * over5ft;\r\n return 45.5 + 2.2 * over5ft;\r\n }\r\n\r\n function idealWeightRobinson(heightCm, gender) {\r\n const inches = heightCm \/ 2.54;\r\n const over5ft = Math.max(0, inches - 60);\r\n if (gender === 'male') return 52 + 1.9 * over5ft;\r\n return 49 + 1.7 * over5ft;\r\n }\r\n\r\n function idealWeightMiller(heightCm, gender) {\r\n const inches = heightCm \/ 2.54;\r\n const over5ft = Math.max(0, inches - 60);\r\n if (gender === 'male') return 56.2 + 1.41 * over5ft;\r\n return 53.1 + 1.36 * over5ft;\r\n }\r\n\r\n function idealWeightLorentz(heightCm, gender) {\r\n if (gender === 'male') return heightCm - 100 - (heightCm - 150) \/ 4;\r\n return heightCm - 100 - (heightCm - 150) \/ 2.5;\r\n }\r\n\r\n function bodyFatBMI(bmi, age, gender) {\r\n \/\/ Deurenberg formula\r\n const sex = gender === 'male' ? 1 : 0;\r\n return 1.20 * bmi + 0.23 * age - 10.8 * sex - 5.4;\r\n }\r\n\r\n function bmrMifflin(w, h, a, g) {\r\n if (g === 'male') return 10 * w + 6.25 * h - 5 * a + 5;\r\n return 10 * w + 6.25 * h - 5 * a - 161;\r\n }\r\n\r\n function bsaMosteller(w, h) {\r\n return Math.sqrt((w * h) \/ 3600);\r\n }\r\n\r\n function whtr(waistCm, heightCm) { return waistCm \/ heightCm; }\r\n\r\n function whr(waistCm, hipCm) { return waistCm \/ hipCm; }\r\n\r\n \/\/ ----- Main calculation -----\r\n function calculateBMI() {\r\n const hVal = parseFloat(height.value);\r\n const wVal = parseFloat(weight.value);\r\n const aVal = parseInt(age.value) || 30;\r\n const gVal = gender.value;\r\n const actVal = parseFloat(activity.value) || 1.375;\r\n\r\n if (!hVal || !wVal || hVal <= 0 || wVal <= 0) {\r\n showError('Please enter valid height and weight values.');\r\n return;\r\n }\r\n\r\n const hCm = toCm(hVal, heightUnit.value);\r\n const wKg = toKg(wVal, weightUnit.value);\r\n const hM = hCm \/ 100;\r\n\r\n if (hCm < 50 || hCm > 300 || wKg < 10 || wKg > 600) {\r\n showError('Please enter realistic values (height 50-300 cm, weight 10-600 kg).');\r\n return;\r\n }\r\n\r\n errorContainer.innerHTML = '';\r\n resultsContainer.classList.remove('hidden');\r\n\r\n const bmi = wKg \/ (hM * hM);\r\n const cat = getBMICategory(bmi);\r\n\r\n \/\/ Ideal weight\r\n const idealDevine = idealWeightDevine(hCm, gVal);\r\n const idealHamwi = idealWeightHamwi(hCm, gVal);\r\n const idealRobinson = idealWeightRobinson(hCm, gVal);\r\n const idealMiller = idealWeightMiller(hCm, gVal);\r\n const idealLorentz = idealWeightLorentz(hCm, gVal);\r\n const idealAvg = (idealDevine + idealHamwi + idealRobinson + idealMiller + idealLorentz) \/ 5;\r\n\r\n const healthyMin = 18.5 * hM * hM;\r\n const healthyMax = 24.9 * hM * hM;\r\n\r\n \/\/ Body fat\r\n const bf = Math.max(3, Math.min(60, bodyFatBMI(bmi, aVal, gVal)));\r\n const fatMass = (bf \/ 100) * wKg;\r\n const leanMass = wKg - fatMass;\r\n\r\n \/\/ BMR\r\n const bmr = bmrMifflin(wKg, hCm, aVal, gVal);\r\n const tdee = bmr * actVal;\r\n\r\n \/\/ Waist ratios\r\n const waistCm = parseFloat(waist.value) || 0;\r\n const hipCm = parseFloat(hip.value) || 0;\r\n const whtrVal = waistCm > 0 ? whtr(waistCm, hCm) : null;\r\n const whrVal = (waistCm > 0 && hipCm > 0) ? whr(waistCm, hipCm) : null;\r\n const bsaVal = bsaMosteller(wKg, hCm);\r\n\r\n \/\/ Preview\r\n bmiPreview.textContent = bmi.toFixed(1);\r\n categoryPreview.textContent = cat.label;\r\n categoryPreview.className = `badge ${cat.cls}`;\r\n statusPreview.textContent = `Your BMI is ${bmi.toFixed(1)} \u2013 ${cat.label}`;\r\n idealPreview.textContent = `${idealAvg.toFixed(1)} kg`;\r\n fatPreview.textContent = `${bf.toFixed(1)}%`;\r\n\r\n \/\/ Results\r\n r.bmi.textContent = bmi.toFixed(1);\r\n r.category.textContent = cat.label;\r\n r.ideal.textContent = idealAvg.toFixed(1);\r\n r['ideal-range'].textContent = `${healthyMin.toFixed(1)} \u2013 ${healthyMax.toFixed(1)} kg`;\r\n r.bodyfat.textContent = bf.toFixed(1) + '%';\r\n r.fatmass.textContent = `Fat: ${fatMass.toFixed(1)} kg \u00b7 Lean: ${leanMass.toFixed(1)} kg`;\r\n r.bmr.textContent = Math.round(bmr);\r\n r.tdee.textContent = `TDEE: ${Math.round(tdee)} kcal`;\r\n\r\n if (whtrVal !== null) {\r\n r.whtr.textContent = whtrVal.toFixed(2);\r\n r['whtr-risk'].textContent = whtrVal < 0.5 ? 'Low risk' : 'Increased risk';\r\n } else {\r\n r.whtr.textContent = '\u2014';\r\n r['whtr-risk'].textContent = 'Add waist';\r\n }\r\n if (whrVal !== null) {\r\n r.whr.textContent = whrVal.toFixed(2);\r\n const risk = gVal === 'male' ? (whrVal > 0.9 ? 'High' : 'Low') : (whrVal > 0.85 ? 'High' : 'Low');\r\n r['whr-risk'].textContent = risk + ' risk';\r\n } else {\r\n r.whr.textContent = '\u2014';\r\n r['whr-risk'].textContent = 'Add hip';\r\n }\r\n r.bsa.textContent = bsaVal.toFixed(2);\r\n\r\n \/\/ Gauge\r\n renderGauge(bmi);\r\n\r\n \/\/ Recommendations\r\n renderRecommendations(bmi, cat, wKg, idealAvg);\r\n\r\n \/\/ Ideal table\r\n document.getElementById('ideal-table').innerHTML = `\r\n <tr><td>Devine<\/td><td>${idealDevine.toFixed(1)} kg<\/td><\/tr>\r\n <tr><td>Hamwi<\/td><td>${idealHamwi.toFixed(1)} kg<\/td><\/tr>\r\n <tr><td>Robinson<\/td><td>${idealRobinson.toFixed(1)} kg<\/td><\/tr>\r\n <tr><td>Miller<\/td><td>${idealMiller.toFixed(1)} kg<\/td><\/tr>\r\n <tr><td>Lorentz<\/td><td>${idealLorentz.toFixed(1)} kg<\/td><\/tr>\r\n <tr style=\"font-weight:700;\"><td>Average<\/td><td>${idealAvg.toFixed(1)} kg<\/td><\/tr>\r\n `;\r\n\r\n \/\/ Health risk\r\n renderRisks(bmi, whtrVal, whrVal);\r\n\r\n \/\/ Macros\r\n renderMacros(tdee);\r\n\r\n \/\/ Hydration\r\n const waterL = wKg * 0.035 + (actVal > 1.4 ? 0.35 : 0);\r\n document.getElementById('water-intake').textContent = waterL.toFixed(1) + ' L';\r\n document.getElementById('water-glasses').textContent = Math.round(waterL \/ 0.25);\r\n\r\n \/\/ Charts\r\n renderCharts(bf, leanMass, idealAvg, wKg);\r\n\r\n \/\/ Weight planner\r\n document.getElementById('target-date').value = new Date().toISOString().slice(0, 10);\r\n document.getElementById('target-bmi').value = Math.min(24.9, Math.max(18.5, bmi - 1));\r\n\r\n \/\/ Track\r\n document.getElementById('track-date').value = new Date().toISOString().slice(0, 10);\r\n document.getElementById('track-weight').value = wKg.toFixed(1);\r\n\r\n loadTrackHistory();\r\n }\r\n\r\n \/\/ ----- Gauge -----\r\n function renderGauge(bmi) {\r\n const container = document.getElementById('gauge-container');\r\n const maxAngle = 180;\r\n const minVal = 10,\r\n maxVal = 45;\r\n const angle = ((bmi - minVal) \/ (maxVal - minVal)) * maxAngle;\r\n const clamped = Math.max(0, Math.min(maxAngle, angle));\r\n\r\n const colors = ['#94A3B8', '#94A3B8', '#22C55E', '#F5A623', '#F59E0B', '#EF4444', '#B91C1C'];\r\n const segments = [\r\n [10, 16],\r\n [16, 18.5],\r\n [18.5, 25],\r\n [25, 30],\r\n [30, 35],\r\n [35, 40],\r\n [40, 45]\r\n ];\r\n let arc = '';\r\n segments.forEach((s, i) => {\r\n const a1 = ((s[0] - minVal) \/ (maxVal - minVal)) * maxAngle;\r\n const a2 = ((s[1] - minVal) \/ (maxVal - minVal)) * maxAngle;\r\n const start = -90 + a1;\r\n const end = -90 + a2;\r\n arc +=\r\n `<path d=\"M150,150 L${150+120*Math.cos(start*Math.PI\/180)},${150+120*Math.sin(start*Math.PI\/180)} A120,120 0 0,1 ${150+120*Math.cos(end*Math.PI\/180)},${150+120*Math.sin(end*Math.PI\/180)} Z\" fill=\"${colors[i]}\" stroke=\"#fff\" stroke-width=\"2\"\/>`;\r\n });\r\n\r\n const needleAngle = -90 + clamped;\r\n const needleX = 150 + 100 * Math.cos(needleAngle * Math.PI \/ 180);\r\n const needleY = 150 + 100 * Math.sin(needleAngle * Math.PI \/ 180);\r\n\r\n container.innerHTML = `\r\n <svg viewBox=\"0 0 300 180\" width=\"100%\" height=\"180\">\r\n ${arc}\r\n <circle cx=\"150\" cy=\"150\" r=\"16\" fill=\"#102A43\" stroke=\"#fff\" stroke-width=\"3\"\/>\r\n <line x1=\"150\" y1=\"150\" x2=\"${needleX}\" y2=\"${needleY}\" stroke=\"#102A43\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"150\" cy=\"150\" r=\"6\" fill=\"#F5A623\"\/>\r\n <text x=\"150\" y=\"175\" text-anchor=\"middle\" font-size=\"14\" font-weight=\"700\" fill=\"#102A43\" font-family=\"Space Grotesk,sans-serif\">${bmi.toFixed(1)}<\/text>\r\n <\/svg>\r\n `;\r\n }\r\n\r\n \/\/ ----- Recommendations -----\r\n function renderRecommendations(bmi, cat, weight, ideal) {\r\n const el = document.getElementById('recommendations');\r\n let advice = [];\r\n if (cat.label === 'Normal') {\r\n advice = [\r\n '\u2705 Your BMI is within the healthy range. Continue maintaining a balanced diet and regular physical activity.',\r\n '\ud83e\udd57 Focus on nutrient-dense foods: fruits, vegetables, whole grains, and lean proteins.',\r\n '\ud83c\udfc3 Aim for at least 150 minutes of moderate exercise per week.',\r\n '\ud83e\ude7a Schedule regular check-ups to monitor other health markers like blood pressure and cholesterol.'\r\n ];\r\n } else if (cat.label === 'Underweight' || cat.label === 'Severely Underweight') {\r\n advice = [\r\n '\u26a0\ufe0f Your BMI is below the healthy range. Consider consulting a healthcare professional for personalized advice.',\r\n '\ud83c\udf57 Increase calorie intake with nutrient-rich foods: nuts, avocados, whole grains, and lean proteins.',\r\n '\ud83c\udfcb\ufe0f Incorporate strength training to build muscle mass.',\r\n '\ud83e\ude7a Monitor for any underlying medical conditions that may affect weight.'\r\n ];\r\n } else if (cat.label === 'Overweight') {\r\n advice = [\r\n '\u26a0\ufe0f Your BMI is above the healthy range. Gradual, sustainable changes can help you reach a healthier weight.',\r\n '\ud83e\udd66 Focus on a balanced diet rich in fiber, lean protein, and healthy fats.',\r\n '\ud83d\udeb6 Start with moderate exercise: brisk walking 30 minutes a day, 5 days a week.',\r\n '\ud83d\udcc9 Aim for gradual weight loss of 0.5-1 kg per week for sustainable results.'\r\n ];\r\n } else {\r\n advice = [\r\n '\u26a0\ufe0f Your BMI falls in the obesity range. This is associated with increased health risks.',\r\n '\ud83e\ude7a It is strongly recommended to consult a healthcare professional for a comprehensive health assessment.',\r\n '\ud83e\udd57 Consider a structured nutrition plan with reduced calorie density and increased protein.',\r\n '\ud83c\udfc3 Start with low-impact exercise like swimming or cycling, and gradually increase intensity.',\r\n '\ud83e\udec0 Monitor for related conditions: high blood pressure, type 2 diabetes, and sleep apnea.'\r\n ];\r\n }\r\n el.innerHTML = advice.map(a => `<div class=\"rec-card ${cat.cls}\">${a}<\/div>`).join('');\r\n }\r\n\r\n \/\/ ----- Risks -----\r\n function renderRisks(bmi, whtrVal, whrVal) {\r\n const grid = document.getElementById('risk-grid');\r\n const risks = [\r\n { label: 'Heart Disease', risk: bmi > 25 ? 'Increased' : 'Average' },\r\n { label: 'Type 2 Diabetes', risk: bmi > 25 ? 'Increased' : 'Average' },\r\n { label: 'High Blood Pressure', risk: bmi > 25 ? 'Increased' : 'Average' },\r\n { label: 'Sleep Apnea', risk: bmi > 30 ? 'Increased' : 'Average' },\r\n { label: 'Joint Stress', risk: bmi > 30 ? 'Increased' : 'Average' },\r\n { label: 'Metabolic Syndrome', risk: bmi > 25 ? 'Increased' : 'Average' },\r\n ];\r\n if (whtrVal !== null && whtrVal > 0.5) risks.push({ label: 'Central Obesity', risk: 'Increased' });\r\n if (whrVal !== null) {\r\n const whrRisk = gender.value === 'male' ? (whrVal > 0.9 ? 'Increased' : 'Average') : (whrVal > 0.85 ?\r\n 'Increased' : 'Average');\r\n risks.push({ label: 'Waist-Hip Ratio', risk: whrRisk });\r\n }\r\n grid.innerHTML = risks.map(r =>\r\n `<div class=\"stat-card\" style=\"padding:12px 16px;\"><div class=\"label\">${r.label}<\/div><div style=\"font-weight:600;color:${r.risk==='Increased'?'var(--danger)':'var(--success)'};\">${r.risk}<\/div><\/div>`\r\n ).join('');\r\n }\r\n\r\n \/\/ ----- Macros -----\r\n function renderMacros(tdee) {\r\n const grid = document.getElementById('macro-grid');\r\n const p = tdee * 0.30 \/ 4,\r\n c = tdee * 0.40 \/ 4,\r\n f = tdee * 0.30 \/ 9,\r\n fiber = 25;\r\n grid.innerHTML = `\r\n <div class=\"stat-card\" style=\"padding:12px;\"><div class=\"label\">Protein<\/div><div style=\"font-weight:700;font-size:1.2rem;\">${Math.round(p)}g<\/div><\/div>\r\n <div class=\"stat-card\" style=\"padding:12px;\"><div class=\"label\">Carbs<\/div><div style=\"font-weight:700;font-size:1.2rem;\">${Math.round(c)}g<\/div><\/div>\r\n <div class=\"stat-card\" style=\"padding:12px;\"><div class=\"label\">Fat<\/div><div style=\"font-weight:700;font-size:1.2rem;\">${Math.round(f)}g<\/div><\/div>\r\n <div class=\"stat-card\" style=\"padding:12px;\"><div class=\"label\">Fiber<\/div><div style=\"font-weight:700;font-size:1.2rem;\">${fiber}g<\/div><\/div>\r\n `;\r\n }\r\n\r\n \/\/ ----- Charts -----\r\n function renderCharts(bf, leanMass, ideal, currentWeight) {\r\n const ctx1 = document.getElementById('pieChart').getContext('2d');\r\n const ctx2 = document.getElementById('barChart').getContext('2d');\r\n if (pieChart) pieChart.destroy();\r\n if (barChart) barChart.destroy();\r\n\r\n pieChart = new Chart(ctx1, {\r\n type: 'doughnut',\r\n data: {\r\n labels: ['Fat Mass', 'Lean Mass'],\r\n datasets: [{ data: [bf, 100 - bf], backgroundColor: ['#F5A623', '#0EA5A0'], borderWidth: 0 }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 11 } } } }\r\n }\r\n });\r\n\r\n barChart = new Chart(ctx2, {\r\n type: 'bar',\r\n data: {\r\n labels: ['Current', 'Ideal'],\r\n datasets: [{ data: [currentWeight, ideal], backgroundColor: ['#0EA5A0', '#F5A623'], borderRadius: 6 }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { legend: { display: false } },\r\n scales: { y: { beginAtZero: true, ticks: { font: { size: 10 } } } }\r\n }\r\n });\r\n }\r\n\r\n \/\/ ----- Weight Planner -----\r\n document.getElementById('plan-btn').addEventListener('click', () => {\r\n const targetBMI = parseFloat(document.getElementById('target-bmi').value) || 22;\r\n const targetDate = new Date(document.getElementById('target-date').value);\r\n const now = new Date();\r\n if (targetDate <= now) { alert('Please select a future date.'); return; }\r\n const hVal = parseFloat(height.value);\r\n const hCm = toCm(hVal, heightUnit.value);\r\n const hM = hCm \/ 100;\r\n const wKg = toKg(parseFloat(weight.value), weightUnit.value);\r\n const targetW = targetBMI * hM * hM;\r\n const diff = wKg - targetW;\r\n const days = Math.ceil((targetDate - now) \/ 86400000);\r\n const weeks = days \/ 7;\r\n const weeklyLoss = diff \/ weeks;\r\n\r\n const el = document.getElementById('plan-results');\r\n if (diff < 0) {\r\n el.innerHTML =\r\n `<div class=\"stat-card\"><div class=\"number\">${Math.abs(diff).toFixed(1)}<\/div><div class=\"label\">Weight to Gain (kg)<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"number\">${weeklyLoss.toFixed(1)}<\/div><div class=\"label\">Weekly Gain (kg)<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"number\">${Math.round((targetW*7700)\/days)}<\/div><div class=\"label\">Extra Calories\/day<\/div><\/div>`;\r\n } else {\r\n el.innerHTML =\r\n `<div class=\"stat-card\"><div class=\"number\">${diff.toFixed(1)}<\/div><div class=\"label\">Weight to Lose (kg)<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"number\">${weeklyLoss.toFixed(1)}<\/div><div class=\"label\">Weekly Loss (kg)<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"number\">${Math.round((diff*7700)\/days)}<\/div><div class=\"label\">Deficit Calories\/day<\/div><\/div>`;\r\n }\r\n });\r\n\r\n \/\/ ----- Progress Tracker -----\r\n let trackData = [];\r\n\r\n function loadTrackHistory() {\r\n try {\r\n const stored = localStorage.getItem('bmi_track');\r\n if (stored) trackData = JSON.parse(stored);\r\n } catch (e) { trackData = []; }\r\n renderTrack();\r\n }\r\n\r\n function renderTrack() {\r\n const list = document.getElementById('track-list');\r\n if (!trackData.length) { list.innerHTML = '<p style=\"color:var(--text-soft);font-size:.85rem;\">No entries yet.<\/p>'; return; }\r\n list.innerHTML = trackData.slice().reverse().slice(0, 20).map(e =>\r\n `<div style=\"display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:.85rem;\">\r\n <span>${e.date}<\/span><span>${e.weight} kg<\/span>\r\n <\/div>`\r\n ).join('');\r\n }\r\n\r\n document.getElementById('track-btn').addEventListener('click', () => {\r\n const w = parseFloat(document.getElementById('track-weight').value);\r\n const d = document.getElementById('track-date').value;\r\n if (!w || !d) return;\r\n trackData.push({ weight: w, date: d });\r\n try { localStorage.setItem('bmi_track', JSON.stringify(trackData)); } catch (e) {}\r\n renderTrack();\r\n });\r\n\r\n document.getElementById('clear-track').addEventListener('click', () => {\r\n trackData = [];\r\n localStorage.removeItem('bmi_track');\r\n renderTrack();\r\n });\r\n\r\n \/\/ ----- Copy, Print, Share -----\r\n document.getElementById('copy-btn').addEventListener('click', () => {\r\n const text =\r\n `BMI: ${r.bmi.textContent} (${r.category.textContent}). Ideal weight: ${r.ideal.textContent} kg. Body fat: ${r.bodyfat.textContent}. Calculated on MAFtrix.`;\r\n navigator.clipboard.writeText(text).then(() => alert('Results copied!'));\r\n });\r\n\r\n document.getElementById('print-btn').addEventListener('click', () => window.print());\r\n\r\n document.getElementById('share-btn').addEventListener('click', () => {\r\n const text =\r\n `My BMI is ${r.bmi.textContent} (${r.category.textContent}). Check yours: https:\/\/www.maftrix.com\/bmi-calculator`;\r\n if (navigator.share) navigator.share({ title: 'My BMI', text });\r\n else navigator.clipboard.writeText(text).then(() => alert('Share text copied!'));\r\n });\r\n\r\n \/\/ ----- Error -----\r\n function showError(msg) {\r\n errorContainer.innerHTML = `<div class=\"error-card\"><div class=\"label\">Check your inputs<\/div><div class=\"value\">${msg}<\/div><\/div>`;\r\n resultsContainer.classList.add('hidden');\r\n }\r\n\r\n \/\/ ----- Reset -----\r\n function resetAll() {\r\n height.value = '';\r\n weight.value = '';\r\n age.value = '';\r\n waist.value = '';\r\n hip.value = '';\r\n errorContainer.innerHTML = '';\r\n resultsContainer.classList.add('hidden');\r\n bmiPreview.textContent = '\u2014';\r\n categoryPreview.textContent = 'Enter your details';\r\n categoryPreview.className = 'badge';\r\n statusPreview.textContent = 'Fill in your height and weight above';\r\n idealPreview.textContent = '\u2014';\r\n fatPreview.textContent = '\u2014';\r\n document.getElementById('track-list').innerHTML = '';\r\n document.getElementById('plan-results').innerHTML = '';\r\n if (pieChart) pieChart.destroy();\r\n if (barChart) barChart.destroy();\r\n }\r\n\r\n \/\/ ----- Init -----\r\n calcBtn.addEventListener('click', calculateBMI);\r\n resetBtn.addEventListener('click', resetAll);\r\n\r\n \/\/ Auto-calculate on load\r\n setTimeout(calculateBMI, 400);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n```\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>“`html BMI Calculator \u2013 Free, Accurate, with Health Insights | MAFtrix M MAFtrix BMI Calculator FAQ Calculators BMI Calculator \u2013 Your Health, Simplified Get your Body Mass Index, ideal weight range, body fat estimate, and personalized health recommendations \u2013 all in seconds. \u2713 WHO Verified \u2713 Privacy First \u2713 Free & Accurate Your Details Height…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-361","page","type-page","status-publish","hentry"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"attaurrehman1575@gmail.com","author_link":"https:\/\/mathpk.com\/?author=1"},"comment_info":0,"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/mathpk.com\/index.php?rest_route=\/wp\/v2\/pages\/361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mathpk.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mathpk.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mathpk.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mathpk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=361"}],"version-history":[{"count":4,"href":"https:\/\/mathpk.com\/index.php?rest_route=\/wp\/v2\/pages\/361\/revisions"}],"predecessor-version":[{"id":365,"href":"https:\/\/mathpk.com\/index.php?rest_route=\/wp\/v2\/pages\/361\/revisions\/365"}],"wp:attachment":[{"href":"https:\/\/mathpk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}