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