diff --git a/source/code/app.js b/source/code/app.js
index 3f588fe..f4d47bb 100644
--- a/source/code/app.js
+++ b/source/code/app.js
@@ -1,30 +1,22 @@
// NEWER
class TimeDisplay {
- constructor(element, format = 'HH:mm:ss', interval = 1000) {
+ constructor(element, options, interval) {
this.element = element;
- this.format = format;
- this.interval = interval;
+ this.options = options || {hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false};
+ this.interval = interval || 1000;
this.isPaused = false;
this.locale = navigator.language || 'en-US';
this.updateTime();
+
+ console.group('Time information');
+ console.info('\nOptions:', this.options, '\n\n');
+ console.info('Interval:', this.interval);
+ console.groupEnd();
}
- formatTime(date) {
- const options = {hour: '2-digit', minute: '2-digit', hour12: false};
-
- switch (this.format) {
- case 'HH:mm':
- return date.toLocaleTimeString(this.locale, options);
- case 'HH:mm:ss':
- return date.toLocaleTimeString(this.locale, {...options, second: '2-digit'});
- case 'hh:mm A':
- return date.toLocaleTimeString(this.locale, {...options, hour12: true});
- case 'hh:mm:ss A':
- return date.toLocaleTimeString(this.locale, {...options, second: '2-digit', hour12: true});
- }
-
- return date.toString();
+ formatTime(time) {
+ return time.toLocaleTimeString(this.locale, this.options);
}
async updateTime() {
@@ -48,6 +40,44 @@ class TimeDisplay {
}
}
+class DateDisplay {
+ constructor(element, options) {
+ this.element = element;
+ this.options = options || {year: 'numeric', month: 'long', day: 'numeric'};
+ this.updateDate();
+ this.checkForDateChange();
+
+ console.group('Date information');
+ console.info('\nOptions:', this.options, '\n\n');
+ console.info('Remaining minutes:', Math.floor(this.getTimeUntilNextMidnight() / 3600));
+ console.groupEnd();
+ }
+
+ formatDate(date) {
+ return new Intl.DateTimeFormat(navigator.language, this.options).format(date);
+ }
+
+ updateDate() {
+ const now = new Date();
+ this.element.textContent = this.formatDate(now);
+ }
+
+ getTimeUntilNextMidnight() {
+ const now = new Date();
+ const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+ return nextMidnight - now;
+ }
+
+ checkForDateChange() {
+ const timeUntilNextMidnight = this.getTimeUntilNextMidnight();
+
+ setTimeout(() => {
+ this.updateDate();
+ this.checkForDateChange();
+ }, timeUntilNextMidnight);
+ }
+}
+
//NEW
function Clock(id) {
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index 7521092..90fd8ea 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -30,7 +30,7 @@ tags: