<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>BMR Calculator</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="calculator">
		<h2>BMR Calculator</h2>
		<form>
			<label for="gender">Gender</label>
			<select name="gender" id="gender">
				<option value="male">Male</option>
				<option value="female">Female</option>
			</select>
			<label for="age">Age</label>
			<input type="number" id="age" name="age" required>
			<label for="height">Height (cm)</label>
			<input type="number" id="height" name="height" required>
			<label for="weight">Weight (kg)</label>
			<input type="number" id="weight" name="weight" required>
			<label for="activity">Activity Level</label>
			<select name="activity" id="activity">
				<option value="sedentary">Sedentary</option>
				<option value="lightly-active">Lightly Active</option>
				<option value="moderately-active">Moderately Active</option>
				<option value="very-active">Very Active</option>
				<option value="extra-active">Extra Active</option>
			</select>
			<label for="formula">Formula</label>
			<select name="formula" id="formula">
				<option value="oxford">Oxford Equation</option>
				<option value="harris-benedict">Harris-Benedict Revised Equation</option>
				<option value="mifflin-st-jeor">Mifflin-St Jeor Equation</option>
			</select>
			<button type="button" onclick="calculateBMR()">Calculate</button>
		</form>
		<div id="result"></div>
	</div>
</body>
</html>

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #f2f2f2;
	font-family: Arial, sans-serif;
}

.calculator {
	margin: 50px auto;
	padding: 20px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	width: 80%;
	max-width: 500px;
}

h2 {
	text-align: center;
	margin-bottom: 20px;
}

form {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

label {
	flex-basis: 100%;
	margin-bottom: 10px;
	font-weight: bold;
}

select,
input[type="number"] {
	flex-basis: calc(50% - 5px);
	padding: 5px;
	border-radius: 5px;
	border: 1px solid #ccc;
	margin-bottom: 20px


function calculateBMR() {
	// get form values
	const gender = document.getElementById("gender").value;
	const age = parseInt(document.getElementById("age").value);
	const height = parseInt(document.getElementById("height").value);
	const weight = parseInt(document.getElementById("weight").value);
	const activity = document.getElementById("activity").value;
	const formula = document.getElementById("formula").value;

	// calculate BMR based on selected formula
	let bmr = 0;
	if (formula === "oxford") {
		if (gender === "male") {
			bmr = 18.5 * weight + 6.25 * height - 5 * age + 5;
		} else {
			bmr = 10.5 * weight + 6.25 * height - 5 * age - 161;
		}
	} else if (formula === "harris-benedict") {
		if (gender === "male") {
			bmr = 88.362 + 13.397 * weight + 4.799 * height - 5.677 * age;
		} else {
			bmr = 447.593 + 9.247 * weight + 3.098 * height - 4.330 * age;
		}
	} else if (formula === "mifflin-st-jeor") {
		if (gender === "male") {
			bmr = 10 * weight + 6.25 * height - 5 * age + 5;
		} else {
			bmr = 10 * weight + 6.25 * height - 5 * age - 161;
		}
	}

	// calculate total daily energy expenditure based on activity level
	let tdee = 0;
	switch (activity) {
		case "sedentary":
			tdee = bmr * 1.2;
			break;
		case "lightly-active":
			tdee = bmr * 1.375;
			break;
		case "moderately-active":
			tdee = bmr * 1.55;
			break;
		case "very-active":
			tdee = bmr * 1.725;
			break;
		case "extra-active":
			tdee = bmr * 1.9;
			break;
	}

	// display result on page
	const resultDiv = document.getElementById("result");
	resultDiv.innerHTML = `
		<p>Your BMR is: <strong>${bmr.toFixed(2)} calories</strong></p>
		<p>Your TDEE is: <strong>${tdee.toFixed(2)} calories</strong></p>
	`;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.