nick/new-year-countdown
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: nick:2cf33ba2d83adadce628c4eee3859e0c9f4121dc
Branches Tags
nick:master
..
compare: nick:6fa785668c046ee03ee9ea90d00ca3b99dc1e7e3
Branches Tags
nick:master

7 Commits
2cf33ba2d8 ... 6fa785668c

Author SHA1 Message Date
Nick Stokoe
6fa785668c www/{index.html,countdown.js} - add a ten-minute phase 2022-12-31 13:16:19 +00:00
Nick Stokoe
68fbefab9e www/index.html - adjust countdown styles 
mainly, add a blink for seconds and countdown
 2022-12-31 13:16:04 +00:00
Nick Stokoe
586471e83b ,gitignore - /node_modules/ 2022-12-31 13:06:57 +00:00
Nick Stokoe
14c176326b www/countdown.js - remove unused cruft 2022-12-31 13:06:22 +00:00
Nick Stokoe
13ea5765f0 www/index.html - use https URLs for remote assets 2022-12-31 10:32:34 +00:00
Nick Stokoe
e0e7b55d99 www/countdown.js - allow mocking the current time 2022-12-31 10:32:19 +00:00
Nick Stokoe
3a7f9e20e5 package.json - add server runscript 2022-12-31 10:15:35 +00:00
4 changed files with 31 additions and 11 deletions
Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/node_modules/

6
package.json
View File

@@ -4,8 +4,12 @@
"description": "Count down each New Year's arrival around the world", "description": "Count down each New Year's arrival around the world",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"server": "http-server ./www",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"author": "", "author": "",
"license": "ISC" "license": "ISC",
"devDependencies": {
"http-server": "^14.1.1"
}
} }

19
www/countdown.js
View File

@@ -1,8 +1,8 @@
// This is deliberately browser-compatible JS, so we avoid fat arrows etc. // This is deliberately browser-compatible JS, so we avoid fat arrows etc.
var locale = "EN-GB"; var locale = "EN-GB";
var now = new Date(); var now = getTimeNow();
var nextNewYearUTC = new Date(Date.UTC(now.getFullYear()+1, 0, 1)); var nextNewYearUTC = new Date(Date.UTC(getTimeNow().getFullYear()+1, 0, 1));
var secsRemaining = 0; var secsRemaining = 0;
var nextZone; var nextZone;
var counter = document.getElementById("counter"); var counter = document.getElementById("counter");
@@ -12,6 +12,15 @@ var untilDate = document.getElementById("until-date");
var countDownSound = new Audio('get-ready.ogg'); var countDownSound = new Audio('get-ready.ogg');
// This function returns the current time - or we can adjust it to a
// fake time, if we're testing!
function getTimeNow() {
var now = new Date();
var offset = 0; // hours
return new Date(now.valueOf() + offset*3600000);
}
// Convert the next new year time to 'date, hours:mins:secs' in the target timezone // Convert the next new year time to 'date, hours:mins:secs' in the target timezone
function zoneTime(zone, refTime) { function zoneTime(zone, refTime) {
return refTime.toLocaleString('EN-US', { return refTime.toLocaleString('EN-US', {
@@ -226,7 +235,8 @@ function pad(num) {
function counterClass(millisecsRemaining) { function counterClass(millisecsRemaining) {
if (millisecsRemaining > 3600000) return "hours"; if (millisecsRemaining > 3600000) return "hours";
if (millisecsRemaining > 60000) return "minutes"; if (millisecsRemaining > 600000) return "minutes";
if (millisecsRemaining > 60000) return "ten-minutes";
if (millisecsRemaining > 10000) return "seconds"; if (millisecsRemaining > 10000) return "seconds";
return "countdown"; return "countdown";
} }
@@ -257,7 +267,6 @@ function handleTick(now) {
} }
var millisecsRemaining = zoneIndex[nextZone].nydDate.getTime() - now.getTime(); var millisecsRemaining = zoneIndex[nextZone].nydDate.getTime() - now.getTime();
var excl = millisecsRemaining < 1000*5? "!" : "";
console.debug("seconds",now.getSeconds()); console.debug("seconds",now.getSeconds());
if (millisecsRemaining < 2*60*1000) { if (millisecsRemaining < 2*60*1000) {
@@ -291,7 +300,7 @@ function handleTick(now) {
} }
function ticker() { function ticker() {
var now = new Date(); var now = getTimeNow();
handleTick(now); handleTick(now);
var millis = now.getMilliseconds() var millis = now.getMilliseconds()

16
www/index.html
View File

@@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/7.8.0/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.0/d3.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/css?family=Chango" rel="stylesheet" type="text/css">
<style> <style>
body { body {
font-family: Chango; font-family: Chango;
@@ -14,10 +14,16 @@
div#location { div#location {
font-size: 50pt; font-size: 50pt;
} }
div.hours { color: blue; } div.hours { color: black; }
div.minutes { color: green; } div.minutes { color: green; }
div.seconds { color: orange; } div.ten-minutes { color: orange; }
div.countdown { color: red; } div.seconds { color: orange; animation: blinker 1s linear infinite; }
div.countdown { color: red; animation: blinker 1s linear infinite; }
@keyframes blinker {
50% {
opacity: 0;
}
}
</style> </style>
</head> </head>
<body> <body>