What is your Body Mass Index?
About this app
Create a Body Mass Index (BMI) calculator with both METRIC and IMPERIAL unit systems.
[ { "search": "\n Height (cm): 175\n \n Weight (kg): 70\n \n", "replace": "\n Height (cm): 175\n \n Weight (kg): 70\n \n Height (cm): \n \n Weight (kg): \n \n" }, { "search": "\n Height (feet): 5\n \n Height (inches): 6\n \n Weight (lbs): 150\n \n", "replace": "\n Height (feet): 5\n \n Height (inches): 6\n \n Weight (lbs): 150\n \n Height (feet): \n \n Height (inches): \n \n Weight (lbs): \n \n" }, { "search": ".metric-input {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 20px;\n}", "replace": ".metric-input {\n display: inline-block;\n margin-right: 20px;\n}\n\n.imperial-input {\n display: inline-block;\n}" }, { "search": "\n\n\n", "replace": "\n\n\n\n " } ]
Related apps
Put this on your site
Source
[
{
"search": "<div class=\"metric-input\">\n <div>Height (cm): <span id=\"height-metric-value\">175</span></div>\n <input type=\"range\" id=\"height-metric-slider\" class=\"slider\" min=\"140\" max=\"210\" value=\"175\">\n <div>Weight (kg): <span id=\"weight-metric-value\">70</span></div>\n <input type=\"range\" id=\"weight-metric-slider\" class=\"slider\" min=\"40\" max=\"200\" value=\"70\">\n</div>",
"replace": "<div class=\"metric-input\">\n <div>Height (cm): <span id=\"height-metric-value\">175</span></div>\n <input type=\"range\" id=\"height-metric-slider\" class=\"slider\" min=\"140\" max=\"210\" value=\"175\">\n <div>Weight (kg): <span id=\"weight-metric-value\">70</span></div>\n <input type=\"range\" id=\"weight-metric-slider\" class=\"slider\" min=\"40\" max=\"200\" value=\"70\">\n <div>Height (cm): <span id=\"height-metric-value\"></span></div>\n <input type=\"range\" id=\"height-metric-slider\" class=\"slider\" min=\"140\" max=\"210\" value=\"175\">\n <div>Weight (kg): <span id=\"weight-metric-value\"></span></div>\n <input type=\"range\" id=\"weight-metric-slider\" class=\"slider\" min=\"40\" max=\"200\" value=\"70\">\n</div>"
},
{
"search": "<div class=\"imperial-input\" style=\"display: none;\">\n <div>Height (feet): <span id=\"height-imperial-feet-value\">5</span></div>\n <input type=\"range\" id=\"height-imperial-feet-slider\" class=\"slider\" min=\"4\" max=\"6\" value=\"5\">\n <div>Height (inches): <span id=\"height-imperial-inches-value\">6</span></div>\n <input type=\"range\" id=\"height-imperial-inches-slider\" class=\"slider\" min=\"0\" max=\"11\" value=\"6\">\n <div>Weight (lbs): <span id=\"weight-imperial-value\">150</span></div>\n <input type=\"range\" id=\"weight-imperial-slider\" class=\"slider\" min=\"88\" max=\"440\" value=\"150\">\n</div>",
"replace": "<div class=\"imperial-input\" style=\"display: none;\">\n <div>Height (feet): <span id=\"height-imperial-feet-value\">5</span></div>\n <input type=\"range\" id=\"height-imperial-feet-slider\" class=\"slider\" min=\"4\" max=\"6\" value=\"5\">\n <div>Height (inches): <span id=\"height-imperial-inches-value\">6</span></div>\n <input type=\"range\" id=\"height-imperial-inches-slider\" class=\"slider\" min=\"0\" max=\"11\" value=\"6\">\n <div>Weight (lbs): <span id=\"weight-imperial-value\">150</span></div>\n <input type=\"range\" id=\"weight-imperial-slider\" class=\"slider\" min=\"88\" max=\"440\" value=\"150\">\n <div>Height (feet): <span id=\"height-imperial-feet-value\"></span></div>\n <input type=\"range\" id=\"height-imperial-feet-slider\" class=\"slider\" min=\"4\" max=\"6\" value=\"5\">\n <div>Height (inches): <span id=\"height-imperial-inches-value\"></span></div>\n <input type=\"range\" id=\"height-imperial-inches-slider\" class=\"slider\" min=\"0\" max=\"11\" value=\"6\">\n <div>Weight (lbs): <span id=\"weight-imperial-value\"></span></div>\n <input type=\"range\" id=\"weight-imperial-slider\" class=\"slider\" min=\"88\" max=\"440\" value=\"150\">\n</div>"
},
{
"search": ".metric-input {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 20px;\n}",
"replace": ".metric-input {\n display: inline-block;\n margin-right: 20px;\n}\n\n.imperial-input {\n display: inline-block;\n}"
},
{
"search": "<div class=\"scale-section\" id=\"underweight\"></div>\n<div class=\"scale-section\" id=\"normal-weight\"></div>\n<div class=\"scale-section\" id=\"overweight\"></div>\n<div class=\"scale-section\" id=\"obese\"></div>",
"replace": "<div class=\"scale-section\" id=\"underweight\"></div>\n<div class=\"scale-section\" id=\"normal-weight\"></div>\n<div class=\"scale-section\" id=\"overweight\"></div>\n<div class=\"scale-section\" id=\"obese\"></div>\n<style>\n .highlighted {\n font-weight: bold;\n }\n\n #underweight {\n background-color: #add8e6;\n }\n\n #normal-weight {\n background-color: #4ba6c5;\n }\n\n #overweight {\n background-color: #ffd700;\n }\n\n #obese {\n background-color: #ff6347;\n }\n</style>"
}
]
NEW APPS
These are apps made by the community!