world clock

public/world-clocks-vector-436373.jpg:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://www.google.com/
+HostUrl=https://cdn4.vectorstock.com/i/1000x1000/63/73/world-clocks-vector-436373.jpg

src/App.css

@@ -3,7 +3,8 @@
 }
 
 .App-logo {
-  height: 40vmin;
+  height: 30vmin;
+  width: 40vmin;
   pointer-events: none;
 }
 
@@ -14,6 +15,6 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  font-size: calc(5px + 1vmin);
   color: white;
 }

src/App.js

@@ -1,20 +1,26 @@
 import React from "react";
-import logo from "./logo.png";
+import logo from "./clock.jpg";
 import "./App.css";
+import Clock from "./clock";
 
 class App extends React.Component {
+  // call clearInterval  tear down the tier
+
   render() {
     return (
       <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>
+          <h1>Coordinated Universal Time</h1>
+          {/* Render date value that is stored in state */}
+          <Clock timeZone={"Asia/Singapore"} />
+          <Clock timeZone={"UTC"} />
+          {[1, 1, 1, 1, 1].map(() => (
+            <Clock timeZone={"UTC"} />
+          ))}
         </header>
       </div>
     );
   }
 }
-
 export default App;

src/clock.js

@@ -0,0 +1,44 @@
+import React from "react";
+
+class Clock extends React.Component {
+  constructor(props) {
+    super(props);
+    this.timeZone = props.timeZone;
+    // Initialise component state to contain "date" attribute with current date and time
+    this.state = { date: new Date() };
+    console.log(props.timeZone);
+  }
+
+  componentDidMount() {
+    // Set date value in state every second to current date and time
+    // Save setInterval timer ID in class variable for teardown in another class method
+    function updateDate() {
+      this.setState({date: new Date()})
+      console.log("hi")
+    }
+    setInterval(updateDate, 10000);
+
+    this.timerId = setInterval(() => {
+      // callback function
+      this.setState({
+        date: new Date(),
+      });
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    // Teardown setInterval timer with timer ID saved as class variable
+    clearInterval(this.timerId);
+  }
+
+  render() {
+    return (
+      // Render date value that is stored in state
+      <p>
+        {this.state.date.toLocaleString("en-GB", { timeZone: this.timeZone })}
+      </p>
+    );
+  }
+}
+
+export default Clock;

src/container.js

@@ -0,0 +1,21 @@
+// import Container from "react-bootstrap/Container";
+// import Row from "react-bootstrap/Row";
+// import Col from "react-bootstrap/Col";
+
+
+// function container() {
+//   return (
+//     <Container>
+//       <Row>
+//         <Col>1 of 2</Col>
+//         <Col>2 of 2</Col>
+//       </Row>
+//       <Row>
+//         <Col>1 of 3</Col>
+//         <Col>2 of 3</Col>
+//       </Row>
+//     </Container>
+//   );
+// }
+
+// export default container;

src/index.js

@@ -3,5 +3,7 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 
+
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
+