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>;
 	}
 

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;
 	}
 }