diff --git a/src/components/App.tsx b/src/components/App.tsx index 1efb0a4..60a5b1c 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -3,6 +3,7 @@ import * as React from "react"; import Quick from "./Quick"; import QuickItem from "./QuickItem"; import QuickCategory from "./QuickCategory"; +import Clock from "./Clock"; class App extends React.Component { constructor(props) { @@ -12,6 +13,7 @@ class App extends React.Component { render(): JSX.Element { return
+ diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx new file mode 100644 index 0000000..60d8292 --- /dev/null +++ b/src/components/Clock.tsx @@ -0,0 +1,64 @@ +import * as React from "react"; + +import "../style/clock.scss"; + +interface State { + time: string; +} + +class Clock extends React.Component<{}, State> { + + private interval: NodeJS.Timeout; + + constructor(props) { + super(props); + this.state = { + time: "12:00" + }; + } + + 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)}` + }); + } + + zeroPad(number: number, pad: number): string { + const length = number.toString().length; + if (length < pad) { + return "0".repeat(pad - length) + number.toString(); + } else { + return number.toString(); + } + } + + startTimer() { + this.interval = setInterval(()=>{ + this.updateTime(); + },1000); + } + + componentDidMount() { + this.updateTime(); + this.startTimer(); + } + + componentWillUnmount(){ + clearInterval(this.interval); + } + + render(): JSX.Element { + return
+
+ {this.state.time} +
+
; + } + +} + + +export default Clock; diff --git a/src/style/clock.scss b/src/style/clock.scss new file mode 100644 index 0000000..b467aa3 --- /dev/null +++ b/src/style/clock.scss @@ -0,0 +1,8 @@ +.clock-component{ + + + .time{ + font-size: 10em; + text-align: center; + } +} \ No newline at end of file diff --git a/src/style/default.scss b/src/style/default.scss index d4ec085..dec5d80 100644 --- a/src/style/default.scss +++ b/src/style/default.scss @@ -9,5 +9,5 @@ body { } .center-wrapper{ - margin-top: 25%; + margin-top: 15%; } \ No newline at end of file