1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Daily Water Intake</title> 6 <link rel="stylesheet" href=""> 7 </head> 8 <body> 9 10 <div class="card"> 11 <h1 class="title">Daily Water Intake</h1> 12 <p class="subtitle">Calculate how much water your body needs every day</p> 13 14 <input type="number" id="weight" placeholder="Weight (kg)"> 15 <input type="number" id="height" placeholder="Height (cm)"> 16 17 <select id="activity"> 18 <option value="">Select Activity Level</option> 19 <option value="light">Light Activity</option> 20 <option value="medium">Medium Activity</option> 21 <option value="heavy">Heavy Activity</option> 22 </select> 23 24 <button onclick="calculateWater()">Check Daily Intake</button> 25 26 <div id="result"></div> 27 </div> 28 29 <script src="script.js"></script> 30 </body> 31 </html>
1 * { 2 background-color: white; 3 font-family:Verdana, Geneva, Tahoma, sans-serif; 4 margin: 10px; 5 padding: 10px; 6 } 7 8 table { 9 border-collapse: collapse; 10 } 11 12 th, td { 13 border: 1px solid #ddd; 14 }
1 function calculateWater() { 2 const weight = document.getElementById("weight").value; 3 const height = document.getElementById("height").value; 4 const activity = document.getElementById("activity").value; 5 const result = document.getElementById("result"); 6 7 if (!weight || !height || !activity) { 8 result.style.color = "red"; 9 result.innerText = "Please fill in all fields"; 10 return; 11 } 12 13 let waterNeed = weight * 35; 14 15 if (height > 170) { 16 waterNeed *= 1.1; 17 } 18 19 if (activity === "medium") { 20 waterNeed *= 1.15; 21 } else if (activity === "heavy") { 22 waterNeed *= 1.3; 23 } 24 25 waterNeed = Math.round(waterNeed); 26 27 result.style.color = "#1b8f5a"; 28 result.innerHTML = `💧 You need <strong>${waterNeed} ml</strong> of water per day`; 29 }