world clock assignment

src/App.css

@@ -36,4 +36,4 @@
 
 .read-the-docs {
   color: #888;
-}
+}

src/App.jsx

@@ -1,5 +1,15 @@
 import logo from "/logo.png";
 import "./App.css";
+import WorldClock from "./WorldClock";
+
+const timeZones = [
+  "Asia/Singapore",
+  "America/New_York",
+  "America/Los_Angeles",
+  "Europe/London",
+  "Asia/Tokyo",
+  "Australia/Sydney"
+];
 
 function App() {
   return (
@@ -9,12 +19,10 @@ function App() {
       </div>
       <h1>World Clock</h1>
       <div className="card">
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
+        <WorldClock clockData={timeZones} />
       </div>
     </>
   );
 }
 
-export default App;
+export default App;

src/Clock.jsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+function Clock(props)
+{
+    const [date, setDate] = useState(new Date());
+
+    useEffect(() => {
+        // useEffect implementation to execute code when the component loads
+        // Set date value in state every second to current date and time
+        // Save setInterval timerId in a variable for teardown later in the useEffect method
+        const timerId = setInterval(() => {
+        setDate(new Date());
+        }, 1000);
+
+        // useEffect implemenation to tear down the interval saved in timerId
+        return () => {
+            // Teardown setInterval timer saved within the timerId variable
+            clearInterval(timerId);
+        };
+    });
+
+    return (
+        <p>
+            {date.toLocaleString("en-GB", { timeZone: `${props.timeZone}` })}
+        </p>
+    );
+}
+
+export default Clock;

src/WorldClock.css

@@ -0,0 +1,16 @@
+.inline-text {
+    display: flex;
+    align-items: center;
+}
+
+.city {
+    width: 20vw;
+    border: solid 1px black;
+    padding: 1vw;
+}
+
+.clock {
+    width: 30vw;
+    border: solid 1px black;
+    padding: 1vw;
+}

src/WorldClock.jsx

@@ -0,0 +1,31 @@
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+import Clock from "./Clock.jsx";
+import "./WorldClock.css";
+
+function WorldClock({clockData})
+{
+    const dataRow = clockData.map((timeZone, index) => {
+        const Zone = timeZone.replace("_", " ");
+        return (
+            <Row key={index} className="mb-3 inline-text">
+                <Col className='city'><p>{Zone}</p></Col>
+                <Col className='clock'><Clock timeZone={timeZone}/></Col>
+            </Row>
+        );
+    });
+
+    return (
+        <Container>
+            <Row className="mb-3 inline-text">
+                <Col className='city'>City</Col>
+                <Col className='clock'>Clock</Col>
+            </Row>
+            {dataRow}
+        </Container>
+    );
+}
+
+export default WorldClock;

src/main.jsx

@@ -2,4 +2,4 @@ import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
 import "./index.css";
 
-ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);