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",
"main": "index.js",
"scripts": {
"server": "http-server ./www",
"test": "echo \"Error: no test specified\" && exit 1"
},
"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.
var locale = "EN-GB";
var now = new Date();
var nextNewYearUTC = new Date(Date.UTC(now.getFullYear()+1, 0, 1));
var now = getTimeNow();
var nextNewYearUTC = new Date(Date.UTC(getTimeNow().getFullYear()+1, 0, 1));
var secsRemaining = 0;
var nextZone;
var counter = document.getElementById("counter");
@@ -12,6 +12,15 @@ var untilDate = document.getElementById("until-date");
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
function zoneTime(zone, refTime) {
return refTime.toLocaleString('EN-US', {
@@ -226,7 +235,8 @@ function pad(num) {
function counterClass(millisecsRemaining) {
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";
return "countdown";
}
@@ -257,7 +267,6 @@ function handleTick(now) {
}
var millisecsRemaining = zoneIndex[nextZone].nydDate.getTime() - now.getTime();
var excl = millisecsRemaining < 1000*5? "!" : "";
console.debug("seconds",now.getSeconds());
if (millisecsRemaining < 2*60*1000) {
@@ -291,7 +300,7 @@ function handleTick(now) {
}
function ticker() {
var now = new Date();
var now = getTimeNow();
handleTick(now);
var millis = now.getMilliseconds()

16
www/index.html
View File

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