From 944d3c91e23c111ba93d2ee40ffcc8ae24c87a54 Mon Sep 17 00:00:00 2001
From: charlesleezhaoyi <charlesleezhaoyi@gmail.com>
Date: Tue, 10 Oct 2023 20:31:36 +0800
Subject: [PATCH 1/3] Commit #1 - Added Date object on App.js and built Tick
 function to increment each second

---
 src/App.js   |  4 +---
 src/index.js | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 4a6f800f..49ad06c6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,9 +8,7 @@ class App extends React.Component {
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
+          <p>{new Date().toString()}</p>
         </header>
       </div>
     );
diff --git a/src/index.js b/src/index.js
index a64e7d56..dd458f6c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,4 +4,16 @@ import "./index.css";
 import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(<App />);
+//root.render(<App />);
+
+const tick = () => {
+  const element = (
+    <div>
+      Hello World!
+      <h1>It is {new Date().toLocaleDateString()}.</h1>
+    </div>
+  );
+  root.render(element);
+};
+
+setInterval(tick);

From 9eedfee99321d0dd971a966d5ec5825f96b85967 Mon Sep 17 00:00:00 2001
From: charlesleezhaoyi <charlesleezhaoyi@gmail.com>
Date: Tue, 10 Oct 2023 20:53:53 +0800
Subject: [PATCH 2/3] Commit #2 - added functions to  set and clear Interval

---
 src/App.js   | 23 ++++++++++++++++++++++-
 src/index.js | 14 +-------------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/App.js b/src/App.js
index 49ad06c6..41009a81 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,12 +3,33 @@ import logo from "./logo.png";
 import "./App.css";
 
 class App extends React.Component {
+  constructor(props) {
+    super(props);
+    //initialise component state to contain "date" attribute with current date and time
+    //extends keyword here causes App class to inherit from React.Component
+    //constructor() function sets up the App class with initial arguments called "props"
+    //super keyword causes the App class to update the props argument in React.Component
+    this.state = { date: new Date() };
+  }
+
+  componentDidMount() {
+    this.timerId = setInterval(() => {
+      this.setState({
+        date: new Date(),
+      });
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timerId);
+  }
+
   render() {
     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          <p>{new Date().toString()}</p>
+          <p>{this.state.date.toString()}</p>
         </header>
       </div>
     );
diff --git a/src/index.js b/src/index.js
index dd458f6c..a64e7d56 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,16 +4,4 @@ import "./index.css";
 import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
-//root.render(<App />);
-
-const tick = () => {
-  const element = (
-    <div>
-      Hello World!
-      <h1>It is {new Date().toLocaleDateString()}.</h1>
-    </div>
-  );
-  root.render(element);
-};
-
-setInterval(tick);
+root.render(<App />);

From 07f994db9133b4dca71b50c5fdb322d9a7cd75de Mon Sep 17 00:00:00 2001
From: charlesleezhaoyi <charlesleezhaoyi@gmail.com>
Date: Wed, 25 Oct 2023 20:24:09 +0800
Subject: [PATCH 3/3] First commit - Completed during lesson without commit.
 Will commit upon each change in future

---
 src/App.js   | 26 +++++---------------------
 src/Clock.js | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 21 deletions(-)
 create mode 100644 src/Clock.js

diff --git a/src/App.js b/src/App.js
index 41009a81..8003ae3f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,35 +1,19 @@
 import React from "react";
 import logo from "./logo.png";
 import "./App.css";
+import Clock from "../src/Clock";
 
 class App extends React.Component {
-  constructor(props) {
-    super(props);
-    //initialise component state to contain "date" attribute with current date and time
-    //extends keyword here causes App class to inherit from React.Component
-    //constructor() function sets up the App class with initial arguments called "props"
-    //super keyword causes the App class to update the props argument in React.Component
-    this.state = { date: new Date() };
-  }
-
-  componentDidMount() {
-    this.timerId = setInterval(() => {
-      this.setState({
-        date: new Date(),
-      });
-    }, 1000);
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.timerId);
-  }
+  Clock;
 
   render() {
     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          <p>{this.state.date.toString()}</p>
+          <Clock timeZone="Europe/Stockholm" />
+          <Clock timeZone="America/Los_Angeles" />
+          <Clock timeZone="Asia/Singapore" />
         </header>
       </div>
     );
diff --git a/src/Clock.js b/src/Clock.js
new file mode 100644
index 00000000..3ad545ac
--- /dev/null
+++ b/src/Clock.js
@@ -0,0 +1,34 @@
+import React from "react";
+import logo from "./logo.png";
+import "./App.css";
+
+class Clock extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { date: new Date() };
+  }
+
+  componentDidMount() {
+    this.timerId = setInterval(() => {
+      this.setState({
+        date: new Date(),
+      });
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timerId);
+  }
+
+  render() {
+    return (
+      <p>
+        {`${this.props.timeZone}: ${this.state.date.toLocaleString("en-GB", {
+          timeZone: this.props.timeZone,
+        })}`}
+      </p>
+    );
+  }
+}
+
+export default Clock;