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.options = options || {hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false};
-		this.interval = interval;
+		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) {
+	formatTime(time) {
-		const options = {hour: '2-digit', minute: '2-digit', hour12: false};
+		return time.toLocaleTimeString(this.locale, this.options);
-
-		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();
 	}
 
 	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) {

source/screens/demo/examples/ui/windows.liquid

@@ -30,7 +30,7 @@ tags:
 			<button><i class="bi bi-volume-down"></i></button>
 		</nav>
 		<nav class="clock">
-			<span><span id="time">##:##</span><br>TT.MM.JJJJ</span>
+			<span><span id="time">##:##</span><br><span id="date">TT.MM.JJJJ</span></span>
 		</nav>
 		<nav>
 			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
@@ -57,7 +57,12 @@ tags:
 
 	// let clock = new Clock('time');
 	const timeElement = document.getElementById('time');
-	const timeDisplay = new TimeDisplay(timeElement, 'HH:mm:ss', 1000);
+	const timeFormat = {hour: '2-digit', minute: '2-digit'};
+	const timeDisplay = new TimeDisplay(timeElement, timeFormat);
+	const dateElement = document.getElementById('date');
+	const dateFormat = {year: 'numeric', month: '2-digit', day: '2-digit'}
+	const dateDisplay = new DateDisplay(dateElement, dateFormat);
+
 
 	document.getElementById('pauseButton').addEventListener('click', () => {
 		timeDisplay.pause();