Untitled
unknown
plain_text
2 months ago
2.4 kB
2
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Protein Calculator</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4; } .calculator { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } label, select, input { display: block; margin: 10px 0; } button { margin-top: 10px; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } #result { margin-top: 20px; font-weight: bold; } </style> </head> <body> <div class="calculator"> <h2>Protein Calculator</h2> <label for="weight">Weight (kg):</label> <input type="number" id="weight" min="1" required> <label for="activity">Activity Level:</label> <select id="activity"> <option value="1.2">Sedentary</option> <option value="1.375">Lightly Active</option> <option value="1.55">Moderately Active</option> <option value="1.725">Very Active</option> <option value="1.9">Extremely Active</option> </select> <button onclick="calculateProtein()">Calculate</button> <div id="result"></div> </div> <script> function calculateProtein() { const weight = document.getElementById('weight').value; const activityFactor = parseFloat(document.getElementById('activity').value); // General guideline: 0.8g of protein per kg of body weight for a sedentary person, // but active individuals might need more. const proteinPerKg = 0.8 * activityFactor; const proteinNeeded = Math.round(weight * proteinPerKg); document.getElementById('result').innerText = `You need approximately ${proteinNeeded} grams of protein per day.`; } </script> </body> </html>
Editor is loading...
Leave a Comment