html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- Created by GOAT KAUSHIKBRO -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<div class="card shadow-sm">
<div class="card-body">
<h4 class="text-center mb-4">BMI Calculator</h4>
<form id="bmiForm">
<div class="mb-3">
<label for="weight" class="form-label">Weight(kg)</label>
<input type="number" id="weight" class="form-control" placeholder="Enter your weight" required>
</div>
<div class="mb-3">
<label for="height" class="form-label">Height(cm)</label>
<input type="number" id="height" class="form-control" placeholder="Enter your height" required>
</div>
<button type="button" id="calculateBtn" class="btn btn-primary w-100">Calculate</button>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Created by GOAT KAUSHIKBRO */
body {
background:#111;
color: #ffffff;
}
.card {
border-radius: 12px;
}
#bmiValue {
font-size: 1.5rem;
}
#bmiCategory {
font-size: 1.2rem;
color: #ffc107;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Created by GOAT KAUSHIKBRO
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("calculateBtn").addEventListener("click", function () {
const weight = parseFloat(document.getElementById("weight").value);
const height = parseFloat(document.getElementById("height").value) / 100;
if (!weight || !height || weight <= 0 || height <= 0) {
alert("Wrong Values");
return;
}
const bmi = (weight / (height * height)).toFixed(2);
document.getElementById("bmiValue").textContent = `Your BMI: ${bmi}`;
let category = "";
if (bmi < 18.5) {
category = "Light Weight Eat more protein";
document.getElementById("bmiCategory").style.color = "#17a2b8";
} else if (bmi >= 18.5 && bmi <= 27.9) {
category = "Normal weight enjoy you are healthy";
document.getElementById("bmiCategory").style.color = "#28a745";
} else if (bmi >= 28 && bmi <= 29.9) {
category = "Overweight eat less and move more";
document.getElementById("bmiCategory").style.color = "red";
} else {
category = "Obese you are whale!";
document.getElementById("bmiCategory").style.color = "#dc3545";
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Uruchom