new calculator

<div id="macro-calculator">
<h2>Macronutrient Calculator</h2>

<label for="weight">Weight (lbs):</label>
<input type="number" id="weight" placeholder="Enter your weight" required>

<label for="activity-level">Activity Level:</label>
<select id="activity-level">
<option value="1.2">Sedentary (little or no exercise)</option>
<option value="1.375">Lightly active (light exercise/sports 1-3 days/week)</option>
<option value="1.55">Moderately active (moderate exercise/sports 3-5 days/week)</option>
<option value="1.725">Very active (hard exercise/sports 6-7 days a week)</option>
<option value="1.9">Super active (very hard exercise/physical job)</option>
</select>

<label for="goal">Goal:</label>
<select id="goal">
<option value="deficit">Lose Weight</option>
<option value="maintenance">Maintain Weight</option>
<option value="surplus">Gain Muscle</option>
</select>

<button onclick="calculateMacros()">Calculate</button>

<h3>Results:</h3>
<p id="calories-output">Calories: <span id="calories"></span></p>
<p id="protein-output">Protein: <span id="protein"></span> grams</p>
<p id="carbs-output">Carbs: <span id="carbs"></span> grams</p>
<p id="fat-output">Fat: <span id="fat"></span> grams</p>
</div>

<script>
function calculateMacros() {
const weight = document.getElementById("weight").value;
const activityLevel = parseFloat(document.getElementById("activity-level").value);
const goal = document.getElementById("goal").value;

// Basic calorie calculation (adjust for different goals)
let calories = weight * 10 * activityLevel;
if (goal === "deficit") {
calories *= 0.85; // Reduce calories for weight loss
} else if (goal === "surplus") {
calories *= 1.15; // Increase calories for muscle gain
}

// Macro breakdown (example ratios: 40% carbs, 30% protein, 30% fat)
const protein = (calories * 0.3) / 4; // 4 calories per gram of protein
const carbs = (calories * 0.4) / 4; // 4 calories per gram of carbs
const fat = (calories * 0.3) / 9; // 9 calories per gram of fat

// Display results
document.getElementById("calories").textContent = Math.round(calories);
document.getElementById("protein").textContent = Math.round(protein);
document.getElementById("carbs").textContent = Math.round(carbs);
document.getElementById("fat").textContent = Math.round(fat);
}
</script>