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> {
{this.state.time}
+
+ {this.state.date} +
; } 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