Segmented Timer with Headings for Each Stage

laterrarossa · March 6, 2023

Understandably, this a complicated question and one that I have been trying to find a solution for all over online. I have a coffee company and on my website (https://laterrrarossa.com) I have brewing guides with timers to help customers brew their coffee with a step by step guide. Currently the timers are a simple stopwatch with Start, Pause, and Clear buttons with the time displayed as seconds. While I am happy with this solution, I would love to create a more useful timer, with segments (or basically laps) that countdown and pause until the user is ready to proceed to the next step. For instance, instead of the current timer counting up from zero until it is paused, the displayed text would read "Pour 60 grams of Water" and when the start button is pushed, the timer would countdown from 30 seconds and display the words "Bloom for 30 sec". When the 30 seconds had elapsed, the time would pause before the next stage with a new heading. This might not be possible, at least with fairly simple code which can be used in Squarespace, but I thought I would ask here in case anyone had any ideas on how I might accomplish this.

Thank you so much.

paul2009 · March 6, 2023

43 minutes ago, laterrarossa said:

I have a coffee company and on my website (https://laterrrarossa.com) I have brewing guides with timers. I would love to create a more useful timer, with segments (or basically laps) that countdown and pause until the user is ready to proceed to the next step.

Writing code for this would very straightforward. The questions will be around how to display this to users, and the steps/timings required for each brewing guide. Do you have a mock-up/design?

sayreambrosio · March 6, 2023

This might be helpful. https://insidethesquare.co/squarespace-tutorials/elfsight-countdown-timer-for-squarespace

laterrarossa · March 7, 2023

Thank you @paul2009! Sorry for the slow reply, but attached is a rough concept of how I envision the steps.

laterrarossa · March 14, 2023

Good evening @paul2009 and @sayreambrosio. It is not perfect and still need a lot of finessing, but below is the code I had so far for an upgraded timer, which you can see live at https://laterrarossa.com/aeropress. Thank you both for your help and let me know what you think.

<!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;
		}
	</style>
</head>
<center><body>
	<p id="stage"><strong>Pour 24 g of water, stir, and bloom for 30 sec.</strong></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 = "<strong> Add remaining 168 g of water and brew for 1 min. </strong>";
					timeLeft = stage2;
				} else if (currentStage === 2) {
					currentStage++;
					document.getElementById("stage").innerHTML = "<strong> Place filter the cap on the AeroPress and flip it onto your mug. Press down slowly for 10 sec. </strong>";
					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>

sayreambrosio · March 14, 2023

52 minutes ago, laterrarossa said:

Good evening @paul2009 and @sayreambrosio. It is not perfect and still need a lot of finessing, but below is the code I had so far for an upgraded timer, which you can see live at https://laterrarossa.com/aeropress. Thank you both for your help and let me know what you think.

<!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;
		}
	</style>
</head>
<center><body>
	<p id="stage"><strong>Pour 24 g of water, stir, and bloom for 30 sec.</strong></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 = "<strong> Add remaining 168 g of water and brew for 1 min. </strong>";
					timeLeft = stage2;
				} else if (currentStage === 2) {
					currentStage++;
					document.getElementById("stage").innerHTML = "<strong> Place filter the cap on the AeroPress and flip it onto your mug. Press down slowly for 10 sec. </strong>";
					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>

Looks good. I would add that the timer auto pauses and resets between each step. I went through it a couple times and if you're not paying attention the time starts and finishes quickly. (I'm not sure what code would be needed to make this happen as I'm still learning myself). @paul2009 Do you know?

I would also add some variation to the buttons color. Like gets lighter or darker when hovered over and maybe darker when clicked.

laterrarossa · March 14, 2023

9 minutes ago, sayreambrosio said:

Looks good. I would add that the timer auto pauses and resets between each step. I went through it a couple times and if you're not paying attention the time starts and finishes quickly. (I'm not sure what code would be needed to make this happen as I'm still learning myself). @paul2009 Do you know?

I would also add some variation to the buttons color. Like gets lighter or darker when hovered over and maybe darker when clicked.

@sayreambrosio Thank you. These are all good tips. Originally the first draft did not auto-advance, but I was worried that people would forget to hit start again. Perhaps I will add a buffer between each step. I am still trying to get it to work, but the time is also supposed to blink when it gets to the final 10 seconds of each step to indicate to be ready. I like the different button colour idea, and will play around with that later this week, as my brain is fried currently trying to get this to even function.

sayreambrosio · March 14, 2023

1 minute ago, laterrarossa said:

@sayreambrosio Thank you. These are all good tips. Originally the first draft did not auto-advance, but I was worried that people would forget to hit start again. Perhaps I will add a buffer between each step. I am still trying to get it to work, but the time is also supposed to blink when it gets to the final 10 seconds of each step to indicate to be ready. I like the different button colour idea, and will play around with that later this week, as my brain is fried currently trying to get this to even function.

I'm super impressed with what you have so far. I'm working through all the code videos I can find on YouTube to learn how to enhance sites. You have gotten way farther than I would have. 😄 ❤️

sayreambrosio · March 14, 2023

10 minutes ago, laterrarossa said:

@sayreambrosio Thank you. These are all good tips. Originally the first draft did not auto-advance, but I was worried that people would forget to hit start again. Perhaps I will add a buffer between each step. I am still trying to get it to work, but the time is also supposed to blink when it gets to the final 10 seconds of each step to indicate to be ready. I like the different button colour idea, and will play around with that later this week, as my brain is fried currently trying to get this to even function.

I'm super impressed with what you have so far. I'm working through all the code videos I can find on YouTube to learn how to enhance sites. You have gotten way farther than I would have. 😄 ❤️

I see that you're in Oregon. Have you been to the Human Bean?

laterrarossa · March 14, 2023

10 minutes ago, sayreambrosio said:

I'm super impressed with what you have so far. I'm working through all the code videos I can find on YouTube to learn how to enhance sites. You have gotten way farther than I would have. 😄 ❤️

I see that you're in Oregon. Have you been to the Human Bean?

@sayreambrosio Thank you so much. Forums, videos, articles, and podcasts have all been helpful in building my website for sure.

Yes, we are in Oregon and there are many Human Bean locations around. They are not really my style of coffee, but I am happy to have them around and they are well liked by many without a doubt.

sayreambrosio · March 14, 2023

11 minutes ago, laterrarossa said:

@sayreambrosio Thank you so much. Forums, videos, articles, and podcasts have all been helpful in building my website for sure.

Yes, we are in Oregon and there are many Human Bean locations around. They are not really my style of coffee, but I am happy to have them around and they are well liked by many without a doubt.

My mom was so sad when they came back to Arizona. She had Human Bean withdrawals lol. I'm pretty sure it's not my kind either. I'm a pour over, french press, espresso gal. Occasionally I'll get a Starbucks type coffee but daily it's black coffee of some sort. Just discovered siphon coffee.

laterrarossa · March 14, 2023

2 minutes ago, sayreambrosio said:

My mom was so sad when they came back to Arizona. She had Human Bean withdrawals lol. I'm pretty sure it's not my kind either. I'm a pour over, french press, espresso gal. Occasionally I'll get a Starbucks type coffee but daily it's black coffee of some sort. Just discovered siphon coffee.

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>

sayreambrosio · March 14, 2023

11 minutes ago, laterrarossa said:

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>

Love the hover color change. Have a good night. If I figure anything out I shall let ya know.

Segmented Timer with Headings for Each Stage

Recommended Posts

laterrarossa

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

paul2009

sayreambrosio

sayreambrosio

Posted Images

paul2009

sayreambrosio

laterrarossa

laterrarossa

sayreambrosio

laterrarossa

sayreambrosio

sayreambrosio

laterrarossa

sayreambrosio

laterrarossa

sayreambrosio

Create an account or sign in to comment

News

paul2009

sayreambrosio

sayreambrosio

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources