From 8e185d9f98d7d052fdecbb53ec2f2a55a4de7ba9 Mon Sep 17 00:00:00 2001
From: Niklas <niklas@kapelle.org>
Date: Wed, 22 Apr 2020 16:15:45 +0200
Subject: [PATCH] added date to clock

---
 src/components/Clock.tsx | 20 ++++++++++++++++++--
 src/style/clock.scss     |  9 ++++++---
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
index 60d8292..c5c9aa9 100644
--- a/src/components/Clock.tsx
+++ b/src/components/Clock.tsx
@@ -4,6 +4,7 @@ import "../style/clock.scss";
 
 interface State {
 	time: string;
+	date: string;
 }
 
 class Clock extends React.Component<{}, State> {
@@ -13,19 +14,27 @@ class Clock extends React.Component<{}, State> {
 	constructor(props) {
 		super(props);
 		this.state = {
-			time: "12:00"
+			time: "",
+			date: ""
 		};
 	}
 
 	updateTime() {
 		const now = new Date();
-		
+
 		// Is there a native function for formatting time ??
 		this.setState({
 			time: `${this.zeroPad(now.getHours(), 2)}:${this.zeroPad(now.getMinutes(), 2)}`
 		});
 	}
 
+	updateDate() {
+		const now = new Date();
+		this.setState({
+			date: `${now.toDateString()}`
+		});
+	}
+
 	zeroPad(number: number, pad: number): string {
 		const length = number.toString().length;
 		if (length < pad) {
@@ -38,11 +47,15 @@ class Clock extends React.Component<{}, State> {
 	startTimer() {
 		this.interval = setInterval(()=>{
 			this.updateTime();
+
+			// This will change only if the tab stays open after midnight. But still, lets cover that
+			this.updateDate();
 		},1000);
 	}
 
 	componentDidMount() {
 		this.updateTime();
+		this.updateDate();
 		this.startTimer();
 	}
 
@@ -55,6 +68,9 @@ class Clock extends React.Component<{}, State> {
 			<div className="time">
 				{this.state.time}
 			</div>
+			<div className="date">
+				{this.state.date}
+			</div>
 		</div>;
 	}
 
diff --git a/src/style/clock.scss b/src/style/clock.scss
index b467aa3..985db27 100644
--- a/src/style/clock.scss
+++ b/src/style/clock.scss
@@ -1,8 +1,11 @@
 .clock-component{
-
-
+	text-align: center;
 	.time{
 		font-size: 10em;
-		text-align: center;
+	}
+
+	.date {
+		font-size: 1em;
+		margin-top: -1em;
 	}
 }
\ No newline at end of file