<!
DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calcolatore di Calorie Moderno</title>
<style>
:root {
--primary-color: #007bff; /* Blu primario */
--secondary-color: #6c757d; /* Grigio secondario */
--light-bg: #f8f9fa; /* Sfondo chiaro */
--dark-text: #343a40; /* Testo scuro */
--light-text: #ffffff; /* Testo chiaro */
--border-color: #dee2e6; /* Colore bordo */
--success-color: #28a745; /* Verde successo */
--error-color: #dc3545; /* Rosso errore */
--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
font-family: var(--font-family);
background-color: var(--light-bg);
color: var(--dark-text);
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
box-sizing: border-box;
}
.calculator-container {
background-color: var(--light-text);
padding: 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
margin-top: 20px;
}
h1 {
color: var(--primary-color);
text-align: center;
margin-bottom: 25px;
font-size: 1.8em;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: var(--secondary-color);
}
.form-group input[type="number"],
.form-group select {
width: 100%;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 5px;
box-sizing: border-box; /* Importante per padding e width */
font-size: 1em;
transition: border-color 0.3s ease;
}
.form-group input[type="number"]:focus,
.form-group select:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* Stile per i radio button (genere) */
.gender-options {
display: flex;
gap: 15px;
margin-top: 5px;
}
.gender-options label {
display: flex;
align-items: center;
cursor: pointer;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 5px;
transition: background-color 0.3s, border-color 0.3s;
font-weight: normal; /* Rimuove il bold di default per label */
}
.gender-options input[type="radio"] {
margin-right: 8px;
accent-color: var(--primary-color); /* Colora il check del radio */
}
.gender-options label:has(input:checked) {
background-color: rgba(0, 123, 255, 0.1);
border-color: var(--primary-color);
color: var(--primary-color);
font-weight: bold;
}
button {
background-color: var(--primary-color);
color: var(--light-text);
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
font-weight: bold;
width: 100%;
transition: background-color 0.3s ease;
margin-top: 10px;
}
button:hover {
background-color: #0056b3; /* Blu più scuro per hover */
}
.results {
margin-top: 25px;
padding: 20px;
background-color: var(--light-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
text-align: center;
}
.results h2 {
color: var(--primary-color);
margin-top: 0;
margin-bottom: 15px;
}
.results p {
font-size: 1.1em;
margin: 8px 0;
color: var(--dark-text);
}
.results p strong {
color: var(--success-color);
font-size: 1.2em;
}
.error-message {
color: var(--error-color);
font-weight: bold;
margin-top: 10px;
text-align: center;
}
footer {
margin-top: 30px;
text-align: center;
font-size: 0.9em;
color: var(--secondary-color);
}
/* Responsive adjustments */
@media (max-width: 600px) {
body {
padding: 10px;
}
.calculator-container {
padding: 20px;
}
h1 {
font-size: 1.6em;
}
.gender-options {
flex-direction: column; /* Per schermi piccoli, radio button in
colonna */
gap: 10px;
}
}
</style>
</head>
<body>
<div class="calculator-container">
<h1>Calcolatore di Calorie</h1>
<div class="form-group">
<label for="age">Età (anni):</label>
<input type="number" id="age" name="age" min="15" max="100"
placeholder="Es. 30" required>
</div>
<div class="form-group">
<label>Genere:</label>
<div class="gender-options">
<label for="male">
<input type="radio" id="male" name="gender" value="male"
checked> Uomo
</label>
<label for="female">
<input type="radio" id="female" name="gender" value="female">
Donna
</label>
</div>
</div>
<div class="form-group">
<label for="weight">Peso (kg):</label>
<input type="number" id="weight" name="weight" step="0.1" min="30"
max="250" placeholder="Es. 70.5" required>
</div>
<div class="form-group">
<label for="height">Altezza (cm):</label>
<input type="number" id="height" name="height" min="100" max="250"
placeholder="Es. 175" required>
</div>
<div class="form-group">
<label for="activity">Livello di Attività Fisica:</label>
<select id="activity" name="activity">
<option value="1.2">Sedentario (poco o nessun esercizio)</option>
<option value="1.375">Leggermente attivo (esercizio leggero/sport
1-3 giorni/sett.)</option>
<option value="1.55">Moderatamente attivo (esercizio moderato/sport
3-5 giorni/sett.)</option>
<option value="1.725">Molto attivo (esercizio intenso/sport 6-7
giorni/sett.)</option>
<option value="1.9">Estremamente attivo (esercizio molto
intenso/lavoro fisico e allenamento due volte al giorno)</option>
</select>
</div>
<button id="calculateBtn">Calcola Calorie</button>
<div id="results" class="results" style="display: none;">
<h2>Il Tuo Risultato</h2>
<p>Metabolismo Basale (BMR): <strong id="bmrResult"></strong>
kcal/giorno</p>
<p>Fabbisogno Calorico Giornaliero (TDEE): <strong
id="tdeeResult"></strong> kcal/giorno</p>
</div>
<div id="errorMessage" class="error-message" style="display: none;"></div>
</div>
<footer>
<p>© 2023 Calcolatore di Calorie Moderno. Formula di Mifflin-St Jeor.</p>
<p>Questo calcolatore fornisce una stima. Consulta un professionista per
consigli personalizzati.</p>
</footer>
<script>
document.getElementById('calculateBtn').addEventListener('click',
function() {
const age = parseInt(document.getElementById('age').value);
const gender =
document.querySelector('input[name="gender"]:checked').value;
const weight = parseFloat(document.getElementById('weight').value);
const height = parseInt(document.getElementById('height').value);
const activityLevel =
parseFloat(document.getElementById('activity').value);
const resultsDiv = document.getElementById('results');
const errorMessageDiv = document.getElementById('errorMessage');
const bmrResultEl = document.getElementById('bmrResult');
const tdeeResultEl = document.getElementById('tdeeResult');
// Nascondi risultati e messaggi di errore precedenti
resultsDiv.style.display = 'none';
errorMessageDiv.style.display = 'none';
errorMessageDiv.textContent = '';
// Validazione Input
if (isNaN(age) || age < 15 || age > 100) {
errorMessageDiv.textContent = "Per favore, inserisci un'età valida
(15-100 anni).";
errorMessageDiv.style.display = 'block';
return;
}
if (isNaN(weight) || weight < 30 || weight > 250) {
errorMessageDiv.textContent = "Per favore, inserisci un peso valido
(30-250 kg).";
errorMessageDiv.style.display = 'block';
return;
}
if (isNaN(height) || height < 100 || height > 250) {
errorMessageDiv.textContent = "Per favore, inserisci un'altezza
valida (100-250 cm).";
errorMessageDiv.style.display = 'block';
return;
}
if (isNaN(activityLevel)) {
errorMessageDiv.textContent = "Per favore, seleziona un livello di
attività.";
errorMessageDiv.style.display = 'block';
return;
}
let bmr;
// Formula di Mifflin-St Jeor
// BMR (Uomini) = (10 × peso in kg) + (6.25 × altezza in cm) - (5 × età
in anni) + 5
// BMR (Donne) = (10 × peso in kg) + (6.25 × altezza in cm) - (5 × età
in anni) - 161
if (gender === 'male') {
bmr = (10 * weight) + (6.25 * height) - (5 * age) + 5;
} else { // female
bmr = (10 * weight) + (6.25 * height) - (5 * age) - 161;
}
const tdee = bmr * activityLevel;
if (!isNaN(bmr) && !isNaN(tdee)) {
bmrResultEl.textContent = bmr.toFixed(0);
tdeeResultEl.textContent = tdee.toFixed(0);
resultsDiv.style.display = 'block';
} else {
errorMessageDiv.textContent = "Si è verificato un errore nel
calcolo. Controlla i valori inseriti.";
errorMessageDiv.style.display = 'block';
}
});
</script>
</body>
</html>
