<div class="bmi-card">
  <h3>BMI Calculator</h3>
  <div class="inputs">
    <div class="group">
      <label>Height (cm)</label>
      <input type="number" id="height" placeholder="180">
    </div>
    <div class="group">
      <label>Weight (kg)</label>
      <input type="number" id="weight" placeholder="75">
    </div>
  </div>
  <button onclick="calculateBMI()">Calculate</button>
  <div class="result-box" id="resultBox" style="display:none">
    <div class="bmi-score" id="bmiScore">22.5</div>
    <span class="bmi-status" id="bmiStatus">Normal</span>
  </div>
</div>

.bmi-card {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  max-width: 320px;
  margin: 0 auto;
  text-align: center;
}
h3 {
  color: #1f2937;
  margin-top: 0;
}
.inputs {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
.group {
  text-align: left;
}
label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 5px;
  color: #6b7280;
}
input {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-sizing: border-box;
}
button {
  width: 100%;
  padding: 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 20px;
}
button:hover {
  background: #1d4ed8;
}
.result-box {
  background: #eff6ff;
  padding: 15px;
  border-radius: 8px;
}
.bmi-score {
  font-size: 2rem;
  font-weight: 800;
  color: #2563eb;
}
.bmi-status {
  font-weight: 600;
  color: #1f2937;
}

function calculateBMI() {
  const h = parseFloat(document.getElementById("height").value);
  const w = parseFloat(document.getElementById("weight").value);
  const resultBox = document.getElementById("resultBox");
  const scoreEl = document.getElementById("bmiScore");
  const statusEl = document.getElementById("bmiStatus");

  if (!h || !w) return;

  const bmi = (w / ((h / 100) ** 2)).toFixed(1);
  scoreEl.innerText = bmi;
  resultBox.style.display = "block";

  let status = "";
  if (bmi < 18.5) status = "Underweight";
  else if (bmi < 25) status = "Normal";
  else if (bmi < 30) status = "Overweight";
  else status = "Obese";

  statusEl.innerText = status;
}

Back to Snippets

Simple BMI Calculator JS

Check health metrics quickly with this Body Mass Index calculator. Users enter height and weight to get an instant calculation and category rating, which is great for health and fitness websites.

323

#javascript

#css

#calculator

#health

#bmi

#math

#widget

#ui

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

.bmi-card {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  max-width: 320px;
  margin: 0 auto;
  text-align: center;
}
h3 {
  color: #1f2937;
  margin-top: 0;
}
.inputs {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
.group {
  text-align: left;
}
label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 5px;
  color: #6b7280;
}
input {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-sizing: border-box;
}
button {
  width: 100%;
  padding: 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 20px;
}
button:hover {
  background: #1d4ed8;
}
.result-box {
  background: #eff6ff;
  padding: 15px;
  border-radius: 8px;
}
.bmi-score {
  font-size: 2rem;
  font-weight: 800;
  color: #2563eb;
}
.bmi-status {
  font-weight: 600;
  color: #1f2937;
}