{"id":31,"date":"2026-07-02T03:28:11","date_gmt":"2026-07-02T03:28:11","guid":{"rendered":"https:\/\/livecalculator.net\/?p=31"},"modified":"2026-07-02T03:34:19","modified_gmt":"2026-07-02T03:34:19","slug":"elementor-31","status":"publish","type":"post","link":"https:\/\/livecalculator.net\/?p=31","title":{"rendered":"Elementor #31"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nBMI Calculator<\/title>\r\n\r\n<style>\r\n\r\n.bmi-wrapper{\r\n width:100%;\r\n max-width:100%;\r\n margin:auto;\r\n font-family:Arial,Helvetica,sans-serif;\r\n box-sizing:border-box;\r\n}\r\n\r\n.bmi-card{\r\n width:100%;\r\n background:#fff;\r\n border-radius:18px;\r\n padding:25px;\r\n box-shadow:0 10px 35px rgba(0,0,0,.08);\r\n box-sizing:border-box;\r\n}\r\n\r\n.bmi-title{\r\n text-align:center;\r\n font-size:30px;\r\n font-weight:700;\r\n color:#1e293b;\r\n margin-bottom:20px;\r\n}\r\n\r\n.bmi-grid{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fit,minmax(250px,1fr));\r\n gap:20px;\r\n}\r\n\r\n.bmi-field label{\r\n display:block;\r\n margin-bottom:8px;\r\n font-weight:600;\r\n color:#475569;\r\n}\r\n\r\n.bmi-field input{\r\n width:100%;\r\n padding:14px;\r\n border:1px solid #d8d8d8;\r\n border-radius:10px;\r\n font-size:16px;\r\n outline:none;\r\n transition:.3s;\r\n box-sizing:border-box;\r\n}\r\n\r\n.bmi-field input:focus{\r\n border-color:#2563eb;\r\n}\r\n\r\n.bmi-buttons{\r\n display:flex;\r\n gap:15px;\r\n margin-top:25px;\r\n flex-wrap:wrap;\r\n}\r\n\r\n.bmi-buttons button{\r\n flex:1;\r\n min-width:140px;\r\n padding:14px;\r\n border:none;\r\n border-radius:10px;\r\n cursor:pointer;\r\n font-size:16px;\r\n font-weight:600;\r\n transition:.3s;\r\n}\r\n\r\n.calculate{\r\n background:#2563eb;\r\n color:#fff;\r\n}\r\n\r\n.calculate:hover{\r\n background:#1d4ed8;\r\n}\r\n\r\n.reset{\r\n background:#e5e7eb;\r\n}\r\n\r\n.reset:hover{\r\n background:#d1d5db;\r\n}\r\n\r\n.result-box{\r\n margin-top:30px;\r\n background:#f8fafc;\r\n border-radius:15px;\r\n padding:25px;\r\n}\r\n\r\n.result-title{\r\n text-align:center;\r\n font-size:22px;\r\n font-weight:bold;\r\n margin-bottom:20px;\r\n}\r\n\r\n.bmi-value{\r\n text-align:center;\r\n font-size:50px;\r\n font-weight:bold;\r\n color:#2563eb;\r\n}\r\n\r\n.category{\r\n text-align:center;\r\n font-size:22px;\r\n font-weight:bold;\r\n margin:10px 0;\r\n}\r\n\r\n.range{\r\n text-align:center;\r\n color:#555;\r\n margin-bottom:20px;\r\n}\r\n\r\n.bar{\r\n width:100%;\r\n height:18px;\r\n background:#ddd;\r\n border-radius:50px;\r\n overflow:hidden;\r\n}\r\n\r\n.fill{\r\n height:100%;\r\n width:0%;\r\n border-radius:50px;\r\n transition:.6s;\r\n}\r\n\r\n.table{\r\n margin-top:25px;\r\n width:100%;\r\n border-collapse:collapse;\r\n overflow:auto;\r\n}\r\n\r\n.table th{\r\n background:#2563eb;\r\n color:#fff;\r\n padding:12px;\r\n}\r\n\r\n.table td{\r\n padding:12px;\r\n border:1px solid #ddd;\r\n text-align:center;\r\n}\r\n\r\n.table tr:nth-child(even){\r\n background:#f8fafc;\r\n}\r\n\r\n@media(max-width:600px){\r\n\r\n.bmi-card{\r\npadding:18px;\r\n}\r\n\r\n.bmi-title{\r\nfont-size:24px;\r\n}\r\n\r\n.bmi-value{\r\nfont-size:38px;\r\n}\r\n\r\n.category{\r\nfont-size:18px;\r\n}\r\n\r\n.table th,\r\n.table td{\r\nfont-size:13px;\r\npadding:10px;\r\n}\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"bmi-wrapper\">\r\n\r\n<div class=\"bmi-card\">\r\n\r\n<div class=\"bmi-title\">\r\nBMI Calculator\r\n<\/div>\r\n\r\n<div class=\"bmi-grid\">\r\n\r\n<div class=\"bmi-field\">\r\n<label>Height (cm)<\/label>\r\n<input type=\"number\" id=\"height\" placeholder=\"Enter Height\">\r\n<\/div>\r\n\r\n<div class=\"bmi-field\">\r\n<label>Weight (kg)<\/label>\r\n<input type=\"number\" id=\"weight\" placeholder=\"Enter Weight\">\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"bmi-buttons\">\r\n<button class=\"calculate\" onclick=\"calculateBMI()\">Calculate BMI<\/button>\r\n<button class=\"reset\" onclick=\"resetBMI()\">Reset<\/button>\r\n<\/div>\r\n\r\n<div class=\"result-box\">\r\n\r\n<div class=\"result-title\">\r\nYour BMI\r\n<\/div>\r\n\r\n<div class=\"bmi-value\" id=\"bmi\">\r\n--\r\n<\/div>\r\n\r\n<div class=\"category\" id=\"category\">\r\nEnter your height and weight\r\n<\/div>\r\n\r\n<div class=\"range\">\r\nHealthy BMI Range: <b>18.5 - 24.9<\/b>\r\n<\/div>\r\n\r\n<div class=\"bar\">\r\n<div class=\"fill\" id=\"fill\"><\/div>\r\n<\/div>\r\n\r\n<table class=\"table\">\r\n\r\n<tr>\r\n<th>BMI<\/th>\r\n<th>Category<\/th>\r\n<\/tr>\r\n\r\n<tr>\r\n<td>Below 18.5<\/td>\r\n<td>Underweight<\/td>\r\n<\/tr>\r\n\r\n<tr>\r\n<td>18.5 - 24.9<\/td>\r\n<td>Normal Weight<\/td>\r\n<\/tr>\r\n\r\n<tr>\r\n<td>25 - 29.9<\/td>\r\n<td>Overweight<\/td>\r\n<\/tr>\r\n\r\n<tr>\r\n<td>30+<\/td>\r\n<td>Obese<\/td>\r\n<\/tr>\r\n\r\n<\/table>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\r\nfunction calculateBMI(){\r\n\r\nlet h=document.getElementById(\"height\").value;\r\nlet w=document.getElementById(\"weight\").value;\r\n\r\nif(h==\"\" || w==\"\"){\r\nalert(\"Please enter both height and weight.\");\r\nreturn;\r\n}\r\n\r\nlet bmi=(w\/((h\/100)*(h\/100))).toFixed(1);\r\n\r\ndocument.getElementById(\"bmi\").innerHTML=bmi;\r\n\r\nlet text=\"\";\r\nlet color=\"\";\r\nlet percent=Math.min((bmi\/40)*100,100);\r\n\r\nif(bmi<18.5){\r\ntext=\"Underweight\";\r\ncolor=\"#3b82f6\";\r\n}\r\n\r\nelse if(bmi<25){\r\ntext=\"Normal Weight\";\r\ncolor=\"#22c55e\";\r\n}\r\n\r\nelse if(bmi<30){\r\ntext=\"Overweight\";\r\ncolor=\"#f59e0b\";\r\n}\r\n\r\nelse{\r\ntext=\"Obese\";\r\ncolor=\"#ef4444\";\r\n}\r\n\r\ndocument.getElementById(\"category\").innerHTML=text;\r\n\r\nlet fill=document.getElementById(\"fill\");\r\n\r\nfill.style.width=percent+\"%\";\r\nfill.style.background=color;\r\n\r\n}\r\n\r\nfunction resetBMI(){\r\n\r\ndocument.getElementById(\"height\").value=\"\";\r\ndocument.getElementById(\"weight\").value=\"\";\r\ndocument.getElementById(\"bmi\").innerHTML=\"--\";\r\ndocument.getElementById(\"category\").innerHTML=\"Enter your height and weight\";\r\ndocument.getElementById(\"fill\").style.width=\"0%\";\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-0f7e38b e-con e-atomic-element e-flexbox-base e-aa48d33 \" data-id=\"0f7e38b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0f7e38b\">\n \t\t<div class=\"elementor-element elementor-element-662ba32 elementor-widget elementor-widget-html\" data-id=\"662ba32\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>BMI Calculator<\/title>\r\n\r\n<style>\r\n\r\n.bmi-wrapper{\r\n width:100%;\r\n max-width:100%;\r\n margin:auto;\r\n font-family:Arial,Helvetica,sans-serif;\r\n box-sizing:border-box;\r\n}\r\n\r\n.bmi-card{\r\n width:100%;\r\n background:#fff;\r\n border-radius:18px;\r\n padding:25px;\r\n box-shadow:0 10px 35px rgba(0,0,0,.08);\r\n box-sizing:border-box;\r\n}\r\n\r\n.bmi-title{\r\n text-align:center;\r\n font-size:30px;\r\n font-weight:700;\r\n color:#1e293b;\r\n margin-bottom:20px;\r\n}\r\n\r\n.bmi-grid{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fit,minmax(250px,1fr));\r\n gap:20px;\r\n}\r\n\r\n.bmi-field label{\r\n display:block;\r\n margin-bottom:8px;\r\n font-weight:600;\r\n color:#475569;\r\n}\r\n\r\n.bmi-field input{\r\n width:100%;\r\n padding:14px;\r\n border:1px solid #d8d8d8;\r\n border-radius:10px;\r\n font-size:16px;\r\n outline:none;\r\n transition:.3s;\r\n box-sizing:border-box;\r\n}\r\n\r\n.bmi-field input:focus{\r\n border-color:#2563eb;\r\n}\r\n\r\n.bmi-buttons{\r\n display:flex;\r\n gap:15px;\r\n margin-top:25px;\r\n flex-wrap:wrap;\r\n}\r\n\r\n.bmi-buttons button{\r\n flex:1;\r\n min-width:140px;\r\n padding:14px;\r\n border:none;\r\n border-radius:10px;\r\n cursor:pointer;\r\n font-size:16px;\r\n font-weight:600;\r\n transition:.3s;\r\n}\r\n\r\n.calculate{\r\n background:#2563eb;\r\n color:#fff;\r\n}\r\n\r\n.calculate:hover{\r\n background:#1d4ed8;\r\n}\r\n\r\n.reset{\r\n background:#e5e7eb;\r\n}\r\n\r\n.reset:hover{\r\n background:#d1d5db;\r\n}\r\n\r\n.result-box{\r\n margin-top:30px;\r\n background:#f8fafc;\r\n border-radius:15px;\r\n padding:25px;\r\n}\r\n\r\n.result-title{\r\n text-align:center;\r\n font-size:22px;\r\n font-weight:bold;\r\n margin-bottom:20px;\r\n}\r\n\r\n.bmi-value{\r\n text-align:center;\r\n font-size:50px;\r\n font-weight:bold;\r\n color:#2563eb;\r\n}\r\n\r\n.category{\r\n text-align:center;\r\n font-size:22px;\r\n font-weight:bold;\r\n margin:10px 0;\r\n}\r\n\r\n.range{\r\n text-align:center;\r\n color:#555;\r\n margin-bottom:20px;\r\n}\r\n\r\n.bar{\r\n width:100%;\r\n height:18px;\r\n background:#ddd;\r\n border-radius:50px;\r\n overflow:hidden;\r\n}\r\n\r\n.fill{\r\n height:100%;\r\n width:0%;\r\n border-radius:50px;\r\n transition:.6s;\r\n}\r\n\r\n.table{\r\n margin-top:25px;\r\n width:100%;\r\n border-collapse:collapse;\r\n overflow:auto;\r\n}\r\n\r\n.table th{\r\n background:#2563eb;\r\n color:#fff;\r\n padding:12px;\r\n}\r\n\r\n.table td{\r\n padding:12px;\r\n border:1px solid #ddd;\r\n text-align:center;\r\n}\r\n\r\n.table tr:nth-child(even){\r\n background:#f8fafc;\r\n}\r\n\r\n@media(max-width:600px){\r\n\r\n.bmi-card{\r\npadding:18px;\r\n}\r\n\r\n.bmi-title{\r\nfont-size:24px;\r\n}\r\n\r\n.bmi-value{\r\nfont-size:38px;\r\n}\r\n\r\n.category{\r\nfont-size:18px;\r\n}\r\n\r\n.table th,\r\n.table td{\r\nfont-size:13px;\r\npadding:10px;\r\n}\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"bmi-wrapper\">\r\n\r\n<div class=\"bmi-card\">\r\n\r\n<div class=\"bmi-title\">\r\nBMI Calculator\r\n<\/div>\r\n\r\n<div class=\"bmi-grid\">\r\n\r\n<div class=\"bmi-field\">\r\n<label>Height (cm)<\/label>\r\n<input type=\"number\" id=\"height\" placeholder=\"Enter Height\">\r\n<\/div>\r\n\r\n<div class=\"bmi-field\">\r\n<label>Weight (kg)<\/label>\r\n<input type=\"number\" id=\"weight\" placeholder=\"Enter Weight\">\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"bmi-buttons\">\r\n<button class=\"calculate\" onclick=\"calculateBMI()\">Calculate BMI<\/button>\r\n<button class=\"reset\" onclick=\"resetBMI()\">Reset<\/button>\r\n<\/div>\r\n\r\n<div class=\"result-box\">\r\n\r\n<div class=\"result-title\">\r\nYour BMI\r\n<\/div>\r\n\r\n<div class=\"bmi-value\" id=\"bmi\">\r\n--\r\n<\/div>\r\n\r\n<div class=\"category\" id=\"category\">\r\nEnter your height and weight\r\n<\/div>\r\n\r\n<div class=\"range\">\r\nHealthy BMI Range: <b>18.5 - 24.9<\/b>\r\n<\/div>\r\n\r\n<div class=\"bar\">\r\n<div class=\"fill\" id=\"fill\"><\/div>\r\n<\/div>\r\n\r\n<table class=\"table\">\r\n\r\n<tr>\r\n<th>BMI<\/th>\r\n<th>Category<\/th>\r\n<\/tr>\r\n\r\n<tr>\r\n<td>Below 18.5<\/td>\r\n<td>Underweight<\/td>\r\n<\/tr>\r\n\r\n<tr>\r\n<td>18.5 - 24.9<\/td>\r\n<td>Normal Weight<\/td>\r\n<\/tr>\r\n\r\n<tr>\r\n<td>25 - 29.9<\/td>\r\n<td>Overweight<\/td>\r\n<\/tr>\r\n\r\n<tr>\r\n<td>30+<\/td>\r\n<td>Obese<\/td>\r\n<\/tr>\r\n\r\n<\/table>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\r\nfunction calculateBMI(){\r\n\r\nlet h=document.getElementById(\"height\").value;\r\nlet w=document.getElementById(\"weight\").value;\r\n\r\nif(h==\"\" || w==\"\"){\r\nalert(\"Please enter both height and weight.\");\r\nreturn;\r\n}\r\n\r\nlet bmi=(w\/((h\/100)*(h\/100))).toFixed(1);\r\n\r\ndocument.getElementById(\"bmi\").innerHTML=bmi;\r\n\r\nlet text=\"\";\r\nlet color=\"\";\r\nlet percent=Math.min((bmi\/40)*100,100);\r\n\r\nif(bmi<18.5){\r\ntext=\"Underweight\";\r\ncolor=\"#3b82f6\";\r\n}\r\n\r\nelse if(bmi<25){\r\ntext=\"Normal Weight\";\r\ncolor=\"#22c55e\";\r\n}\r\n\r\nelse if(bmi<30){\r\ntext=\"Overweight\";\r\ncolor=\"#f59e0b\";\r\n}\r\n\r\nelse{\r\ntext=\"Obese\";\r\ncolor=\"#ef4444\";\r\n}\r\n\r\ndocument.getElementById(\"category\").innerHTML=text;\r\n\r\nlet fill=document.getElementById(\"fill\");\r\n\r\nfill.style.width=percent+\"%\";\r\nfill.style.background=color;\r\n\r\n}\r\n\r\nfunction resetBMI(){\r\n\r\ndocument.getElementById(\"height\").value=\"\";\r\ndocument.getElementById(\"weight\").value=\"\";\r\ndocument.getElementById(\"bmi\").innerHTML=\"--\";\r\ndocument.getElementById(\"category\").innerHTML=\"Enter your height and weight\";\r\ndocument.getElementById(\"fill\").style.width=\"0%\";\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BMI Calculator BMI Calculator Height (cm) Weight (kg) Calculate BMI Reset Your BMI — Enter your height and weight Healthy BMI Range: 18.5 – 24.9 BMI Category Below 18.5 Underweight 18.5 – 24.9 Normal Weight 25 – 29.9 Overweight 30+ Obese BMI Calculator BMI Calculator Height (cm) Weight (kg) Calculate BMI Reset Your BMI — … <a title=\"Elementor #31\" class=\"read-more\" href=\"https:\/\/livecalculator.net\/?p=31\" aria-label=\"Read more about Elementor #31\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-31","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/livecalculator.net\/index.php?rest_route=\/wp\/v2\/posts\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/livecalculator.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/livecalculator.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/livecalculator.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/livecalculator.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=31"}],"version-history":[{"count":10,"href":"https:\/\/livecalculator.net\/index.php?rest_route=\/wp\/v2\/posts\/31\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/livecalculator.net\/index.php?rest_route=\/wp\/v2\/posts\/31\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/livecalculator.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/livecalculator.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/livecalculator.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}