html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
color: white; /* Maakt alle tekst standaard wit */
background-color: black; /* Stelt de achtergrondkleur in op zwart */
}
#calorie-calculator {
max-width: 100%; /* Zorgt voor responsiveness */
padding: 20px;
margin: 0 auto; /* Verwijdert bovenmarge en centreert horizontaal */
}
#calorie-calculator input,
#calorie-calculator select,
#calorie-calculator button {
width: 100%;
padding: 10px;
margin: 6px 0 12px; /* Voegt ruimte toe tussen de elementen */
display: inline-block;
border: none; /* Verwijdert de rand */
border-radius: 20px; /* Voegt afgeronde hoeken toe */
box-sizing: border-box;
background-color: transparent; /* Maakt de achtergrond van velden transparant */
color: white; /* Maakt tekstkleur wit */
font-size: 16px; /* Stelt een standaard tekstgrootte in */
}
#calorie-calculator button {
background-color: #2acd35; /* Groene achtergrond voor de knop */
cursor: pointer; /* Verandert de cursor in een handje bij hover */
font-weight: 600; /* Maakt de tekst iets dikker */
}
#calorie-calculator button:hover {
background-color: #28b831; /* Een iets donkerdere groen bij hover */
}
#result, #bmi-result {
margin-top: 10px;
font-size: 18px; /* Maakt de resultaattekst iets groter */
}
function calculateCalories() {
const gender = document.getElementById('gender').value;
const age = parseInt(document.getElementById('age').value, 10);
const weight = parseInt(document.getElementById('weight').value, 10);
const height = parseInt(document.getElementById('height').value, 10);
const activityLevel = parseFloat(document.getElementById('activity').value);
let bmr;
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);
}
const totalCalories = bmr * activityLevel;
document.getElementById('result').innerText = `Totale dagelijkse caloriebehoefte: ${totalCalories.toFixed(2)} calorieën.`;
// Bereken BMI
const heightInMeters = height / 100;
const bmi = weight / (heightInMeters * heightInMeters);
let bmiStatus = "";
if (bmi < 18.5) {
bmiStatus = "ondergewicht";
} else if (bmi >= 18.5 && bmi <= 24.9) {
bmiStatus = "een gezond gewicht";
} else if (bmi >= 25 && bmi <= 29.9) {
bmiStatus = "overgewicht";
} else if (bmi >= 30) {
bmiStatus = "obesitas";
}
document.getElementById('bmi-result').innerText = `Jouw BMI: ${bmi.toFixed(2)}, wat duidt op ${bmiStatus}.`;
}