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> {