I am going to call it a day here in a few minutes, as I have to get up early, but I did set a different hover state color for the background and text of the buttons, with the updated code below.
<!DOCTYPE html>
<html>
<head>
<title>AeroPress Brewing Timer</title>
<style>
button {
background-color: #CB6849;
color: #E9D8C1;
font-family: "Futura PT", sans-serif;
font-size: 16px;
padding: 10px 10px;
border: none;
border-radius: 5px;
margin-right: 5px;
}
button:hover{
background: #B7B8AB;
color: #556E77;
</style>
</head>
<center><body>
<p id="stage">Pour 24 g of water, stir, and bloom for 30 sec.</p>
<h1 id="timer">00:30</h1>
<button onclick="startTimer()">Start</button>
<button onclick="pauseTimer()">Pause</button>
<button onclick="resetTimer()">Reset</button>
<script>
var stage1 = 30; // Time for stage 1 in seconds
var stage2 = 60; // Time for stage 2 in seconds
var stage3 = 10; // Time for stage 3 in seconds
var totalTime = stage1 + stage2 + stage3; // Total time in seconds
var timeLeft = stage1; // Time left in seconds
var currentStage = 1; // Current stage of brewing process
var timerInterval; // Interval ID for timer
function startTimer() {
document.getElementById("timer").innerHTML = formatTime(timeLeft);
timerInterval = setInterval(updateTimer, 1000);
}
function pauseTimer() {
clearInterval(timerInterval);
}
function updateTimer() {
if (timeLeft <= 0) {
clearInterval(timerInterval);
if (currentStage === 1) {
currentStage++;
document.getElementById("stage").innerHTML = "Add remaining 168 g of water and brew for 1 min.";
timeLeft = stage2;
} else if (currentStage === 2) {
currentStage++;
document.getElementById("stage").innerHTML = "Place the filter cap on the AeroPress and flip it onto your mug. Press down slowly for 10 sec.";
timeLeft = stage3;
} else {
document.getElementById("timer").innerHTML = "Enjoy.";
return;
}
document.getElementById("timer").innerHTML = formatTime(timeLeft);
timerInterval = setInterval(updateTimer, 1000);
} else {
document.getElementById("timer").innerHTML = formatTime(timeLeft);
if (timeLeft <= 10) {
var blink = document.getElementById("timer");
blink.style.color = (blink.style.color == "#556E77" ? "#FFFFFF" : "#556E77");
}
timeLeft--;
}
}
function resetTimer() {
clearInterval(timerInterval);
timeLeft = stage1;
currentStage = 1;
document.getElementById("stage").innerHTML = "Pour 24 g of water, stir, and bloom for 30 sec.";
document.getElementById("timer").innerHTML = "00:30";
document.getElementById("timer").style.color = "#556E77";
}
function formatTime(time) {
var minutes = Math.floor(time / 60);
var seconds = time % 60;
return (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
}
</script>
</body></center>
</html>
laterrarossa's post in Segmented Timer with Headings for Each Stage was marked as the answer
