I’m trying to make a daily 5 minute journal type app. When the user starts typing, a 5 minute countdown starts, seconds included. I want the timer to be displayed and in realtime, so no refreshing for it to be correct. I’ve been scouring the forum and can’t figure it out. If someone has it in JavaScript, that would be amazing, as I have a better understanding of that.
Create HTML element and paste this into it, might not do “exactly” what you want but should help!
<html>
<body>
Time left to next 5 min:
<div id="countDown"></div>
<script>
setInterval(function () {
var d = new Date();
var seconds = d.getMinutes() * 60 + d.getSeconds(); //convet 00:00 to seconds for easier caculation
var fiveMin = 60 * 5; //five minutes is 300 seconds!
var timeleft = fiveMin - seconds % fiveMin; // let's say 01:30, then current seconds is 90, 90%300 = 90, then 300-90 = 210. That's the time left!
var result = parseInt(timeleft / 60) + ':' + timeleft % 60; //formart seconds into 00:00
document.getElementById('countDown').innerHTML = result;
}, 500) //calling it every 0.5 second to do a count down
</script>
</body>
</html>
If you needed to get anything out of that, like a time remaining back into Bubble to action some type of workflow then you could probably use the JavaScript to Bubble function.
1 Like
This might be better @samanthadibble314
Create a normal Input element and have it launch a workflow when the Value is changed, like shown below.
Paste the following into it.
var counter = 300;
setInterval(function() {
counter--;
if (counter >= 0) {
span = document.getElementById("count");
span.innerHTML = counter;
}
if (counter === 0) {
alert('Out of time!');
clearInterval(counter);
}
}, 1000);
Back on your page where you have your Input field to be typed into it, add a HTML element under it and past the following into it:
<html>
<body>
<span id="count">300</span> seconds
</body>
</html>
Now try typing into your Input field, see if the workflow triggers and the timer starts to countdown from 5min (it’s in seconds but you can probably change that)
The html isn’t changing at all for the second one. Your first response is much closer to what I want, so I’m trying to make that one work. The problem that’s happening is that the timer doesn’t start after my input’s value isn’t empty and isn’t restarting when I refresh the page.
So with the second one, the timer should start as soon as the input’s value is changed and when you refresh the page it should reset again. If you could perhaps share your app and show me what you have now (or make a copy of what you have) I could take a look and make it work for you
Try it now @samanthadibble314, I’ve just changed the workflow to a do when condition is true and set it to just run once. I think before, that JS was running every time the value was changing and messing things up.
If at all you need it to run again (for whatever reason) before the page has refreshed, then we can set it to run based upon a custom state changing.
This might help too
https://buildingonbubble.com/block/countdown-timer-1466528802569x695336233767534600