<!DOCTYPE html>
<html>
<head>
<title>Water Intake Calculator</title>
<style>
body { font-family: sans-serif; }
label { display: block; margin-bottom: 5px; }
input { width: 150px; padding: 5px; margin-bottom: 10px; }
button { padding: 8px 15px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
#results { margin-top: 20px; }
</style>
</head>
<body>
<h2>Water Intake Calculator</h2>
<label for="weight">Body Weight (kg):</label>
<input type="number" id="weight" value="91">
<label for="targetIntake">Target Daily Intake (liters):</label>
<input type="number" id="targetIntake" value="3.7">
<label for="weeklyIncrease">Weekly Increase (liters):</label>
<input type="number" id="weeklyIncrease" min="0.2" max="0.3" step="0.01" value="0.25">
<button onclick="calculate()">Calculate</button>
<div id="results"></div>
<script>
function calculate() {
const weight = parseFloat(document.getElementById("weight").value);
const targetIntake = parseFloat(document.getElementById("targetIntake").value);
const weeklyIncrease = parseFloat(document.getElementById("weeklyIncrease").value);
const startingAmount = weight / 2;
const weeksToGoal = (targetIntake - startingAmount) / weeklyIncrease;
const resultsDiv = document.getElementById("results");
resultsDiv.innerHTML = `
<p>Starting Amount: ${startingAmount.toFixed(1)} liters</p>
<p>Weekly Increase: ${weeklyIncrease} liters</p>
<p>Weeks to Reach Goal: ${weeksToGoal.toFixed(1)} weeks</p>
`;
// Additional note if already above the target
if (weeksToGoal < 0) {
resultsDiv.innerHTML += "<p>Note: You are already above your target daily intake.</p>";
}
}
</script>
</body>
</html>