I am trying to create a coffee ratio calculator. My slider works to select the ratio, but the amount of coffee does not calculate how much water to use or interact with the ratio selected. Here is my broken code:
When I change the amount of coffee in the input field, the recommended water amount does not update to reflect the selected ratio. How can I fix this issue so that the coffee amount interacts properly with the selected ratio to calculate the water amount?
<!DOCTYPE html>
<html>
<head>
<title>Coffee Ratio Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
}
.calculator {
max-width: 600px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.result {
margin-top: 20px;
font-weight: bold;
}
.slider {
width: 100%;
}
.input-section {
margin-bottom: 20px;
}
.slider-labels {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="calculator">
<h2>Coffee Ratio Calculator</h2>
<p>Adjust the coffee-to-water ratio using the slider and enter the amount of coffee you want to use. The calculator will display the recommended amount of water based on the selected ratio.</p>
<div class="input-section">
<label for="ratio">Select Coffee Strength:</label>
<div class="slider-labels">
<span>1:12</span>
<span>1:15</span>
<span>1:18</span>
</div>
<input type="range" id="ratio" name="ratio" min="12" max="18" value="15" step="0.1" class="slider" oninput="updateRatio(this.value)">
<div id="selectedRatio">Selected Ratio: 1:15</div>
</div>
<script>
function updateRatio(value) {
document.getElementById('selectedRatio').innerText = 'Selected Ratio: 1:' + parseFloat(value).toFixed(1);
}
</script>
<div class="input-section">
<label for="coffeeAmount">Amount of Coffee (grams):</label>
<input type="number" id="coffeeAmount" value="12" min="1" oninput="calculateWater()">
</div>
<div class="result">
<p>Recommended Water Amount: <span id="waterAmount">180</span> grams</p>
</div>
</div>
<script>
function updateRatio(value) {
document.getElementById('selectedRatio').innerText = 'Selected Ratio: 1:' + value;
calculateWater();
}
function calculateWater() {
var ratio = document.getElementById('ratio').value;
var coffeeAmount = document.getElementById('coffeeAmount').value;
if (coffeeAmount === '') {
coffeeAmount = 0;
}
var waterAmount = coffeeAmount * ratio;
document.getElementById('waterAmount').innerText = waterAmount.toFixed(1);
}
document.addEventListener('DOMContentLoaded', function() {
calculateWater(); // Initial calculation on page load
});
</script>
</body>
</html>