Hi Jonathan!
Thank You for this! 
I am new at coding and Hype as well, but so far I think that Hype is amazing!
I need to create a banner which is counting down to 19:00 o'clock every day, so the countdown timer has to refresh itself to the following day when reached at 19:00. I can't seem to figure it out.
If anybody would help me I would be super-grateful!
I made some adjustments so that it will reset for the day when it gets to 0. Feel free to give it a try:
FlexibleCountdownTimer-day.hype.zip (68.8 KB)
You'll probably need to hide the day part, since it would always show 0.
OMG THANK YOU!!!!! 
Everything works now perfectly!!!
how to make days can be 3 digit:
136:18:46:20
The class name itself embeds how many digits you want. So if you want days to have 3 digits (including 0 padding), then you would select the day element, and adjust Class Name in the Identity Inspector from countdown_days countdown_format_1 to countdown_days countdown_format_3.
For the inner html version, you'd likewise change:
<span class="countdown_days">0</span>d
to
<span class="countdown_days countdown_format_3">0</span>d
how to use that in your "flexible countdown timer" ?
it's look different
3 days… version of the mechanical countdown:
MechanicalLetterCountdownTimer-3days.hype.zip (74,6 KB)
2 posts were split to a new topic: Display problems in wedding invitation
5 posts were split to a new topic: Implementing the mechanical countdown template
@jonathan This is amazing, thank you! Question, do you have an alternative hype file of how would one use this by adding a script into resources vs using in the head of the doc?
TimerJSResources.zip (25.6 KB)
I'd imagine maybe like this? This seems work though are there better alternatives?
Yeah, I think your solution would work. You can remove this code at the end:
// use a Hype scene load handler to start:
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":updateCountdownClocks});
Also it might wind up doing more work than needed if you're using multiple scenes or jump back to this scene.
The less the script code the better, I guess, but this works wonders, thank you, absolutely remarkable stuff exactly what I needed. Will show you what I got going on when it's completed.
@jonathan Here's an example of an ad that uses your countdown method with style based on the original page design found at B&H.
All said and done, Im a bit worried it uses my machine time Eastern Time zone. Question, how do I change and limit to just EST timezone only, is there a setting in the script I can change which would, show different times as far as countdown concerned in different regions - in other words, if Im in Australia for example, I want them to see the time it begins for Australia which is 16 hours +.
Im trying to make sure the times match the EST to the rest of the world and compute regionally as far countdown is concerned, its hard to wrap my head around the time zone idea since I'm not anywhere but in EST.
Thanks in advance.
If you are setting the time and time zone in this line var countDownDateString = "2023-02-07T14:00:00-00:00"; -- it should show you the precise moment regardless of what time zone you're in. You can use this conversion tool to check: ISO8601 Date Converter Online - DenCode
The dropdown show you the time in your time zone:
Since the function determines the diff between the iso8601 string on the line: var deltaTimeInterval = targetTimeInterval - currentTimeInterval;
and the user's current computer time, it should work regardless.
Hi @Daniel,
Hope your doing well,
I had to read your response a few times to comprehend, so just to confirm, the way I have it is correct, it should compute to the time that I set within the script which is at 14:00 worldwide?
Thanks again
You would adjust this line:
countDownDateString = "2023-02-07T14:00:00-00:00"
So that it matches your 'end moment'. January 15th 9pm EST would be: 2022-01-15T21:00:00-05:00
Yes, that's what it was set to countDownDateString = "2023-02-07T14:00:00-00:00" prior my timezone paranoia 
Super!
Thank you for confirming.
Looks like theres no "month" here.
what would it look like for month as far as the deltaTimeInterval field? Im trying to emulate one of the sites which has months part of the countdown.
using this `var countDownDateString = "2023-09-06T14:00:00-00:00";
function updateCountdownClocks() {
// some code from:
// How To Create a Countdown Timer
// formatting - Pad a number with leading zeros in JavaScript - Stack Overflow
var targetTimeInterval = new Date(countDownDateString).getTime();
var currentTimeInterval = new Date().getTime();
var deltaTimeInterval = targetTimeInterval - currentTimeInterval;
if(deltaTimeInterval < 0) {
// do special handling when timer is expired; default is to just set it to 0
deltaTimeInterval = 0;
}
var timeComponents = {
"months" : Math.floor(deltaTimeInterval / (0 * 0 * 0 * 0)),
"days" : Math.floor(deltaTimeInterval / (1000 * 60 * 60 * 24)),
"hours" : Math.floor((deltaTimeInterval % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
"minutes" : Math.floor((deltaTimeInterval % (1000 * 60 * 60)) / (1000 * 60)),
"seconds" : Math.floor((deltaTimeInterval % (1000 * 60)) / 1000),
};
// utility function to add leading 0's
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
// utility function that gets the requested padding of zeros from a class name
// of the format countdown_format_N where 'N' is an integer for the
// total width (ie 3 would be 088 008 888 8888)
function determinePadding(element) {
var matches = element.className.match(/countdown\_format\_([\d]+)/);
if(matches == null || matches.length != 2) {
return 0;
}
return Math.max(0, parseInt(matches[1]));
}
// for each component, try to find a matching class name that wants to be filled in
for(var timeComponentKey in timeComponents) {
if(timeComponents.hasOwnProperty(timeComponentKey) == false) {
continue;
}
var timeValue = timeComponents[timeComponentKey];
var timeElements = document.getElementsByClassName("countdown_" + timeComponentKey);
for(var i = 0; i < timeElements.length; i++) {
var timeElement = timeElements[i];
var padding = determinePadding(timeElement);
timeElement.innerHTML = pad(timeValue, padding);
}
}
// repeat every second
window.setTimeout(updateCountdownClocks, 1000);
}
// start after document has loaded (without use of handlers)
window.setTimeout(updateCountdownClocks, 0);`
Looks like I got it,
"months" : Math.floor(deltaTimeInterval / (1000 * 2592000)),
thank you anyways
Using math like this is passable at the day level since most days have 24 hours, but really won't work at the month level given they can have 28-31 days.
Further, when dates are within a month, it is very ambiguous what a month means. Let's say The date is June 14 and the contest ends July 20. You're over 31 days away, but cover two partial months. So is that one month, two months, or no months since it doesn't cover a full month ever? There's lots of situations where when there's ambiguity in speech, which I would want to avoid if there's financial stakes.
Regardless if you're working with calendar dates beyond simple cases, you probably should use a calendar library that can properly handle a lot of these cases and items that are common edges like leap years/leap seconds.
I've heard moment.js is good, but I've never personally used it (there's objective-c equivalents for mac apps I have used though). There's also plugins that can do diffing between dates to give better responses. See:
It also looks like the example you sent uses a jquery plugin called "countdown"; I think this is it: