WX - World Clock Assignment

src/App.css

@@ -37,3 +37,29 @@
 .read-the-docs {
   color: #888;
 }
+
+.table-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.table-cell {
+  padding: 10px; /* Add padding to cells */
+  width: 150px;
+  justify-content: center;
+  align-items: center;
+}
+
+.table-time {
+  padding: 10px; /* Add padding to cells */
+  width: 300px;
+  align-items: center;
+  justify-content: center;
+}
+.table-cell:last-child {
+  padding: 10px; /* Add padding to cells */
+  width: 300px;
+  align-items: center;
+  justify-content: center;
+}

src/App.jsx

@@ -1,20 +1,76 @@
 import logo from "/logo.png";
 import "./App.css";
+import { useState } from "react";
+import { useEffect } from "react";
+import Clock from "./Clock";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
 
-function App() {
+export default function App() {
   return (
-    <>
-      <div>
-        <img src={logo} className="logo" alt="Rocket logo" />
-      </div>
+    <div>
+      <img src={logo} className="logo" alt="Rocket logo" />
       <h1>World Clock</h1>
       <div className="card">
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
+        {/* This feels violative of the DIY principle, but idk how to make it into a component */}
+        <Container>
+          <Row className="table-row">
+            <Col className="table-col">City</Col>
+            <Col className="table-time">Clock</Col>
+          </Row>
+          <Row className="table-row">
+            <Col className="table-col">
+              <p>Asia/Seoul</p>
+            </Col>
+            <Col className="table-time">
+              <p>
+                <Clock timeZone="Asia/Seoul" />
+              </p>
+            </Col>
+          </Row>
+          <Row className="table-row">
+            <Col className="table-col">
+              <p>Asia/Singapore</p>
+            </Col>
+            <Col className="table-time">
+              <p>
+                <Clock timeZone="Asia/Singapore" />
+              </p>
+            </Col>
+          </Row>
+          <Row className="table-row">
+            <Col className="table-col">
+              <p>Europe/London</p>
+            </Col>
+            <Col className="table-time">
+              <p>
+                <Clock timeZone="Europe/London" />
+              </p>
+            </Col>
+          </Row>
+        </Container>
       </div>
-    </>
+    </div>
   );
 }
 
-export default App;
+// This works too but the boxes are not aligned
+// <div className="card">
+//     <Container>
+//       <Row>
+//         <Col>City</Col>
+//         <Col>Clock</Col>
+//         </Row>
+//           <Clock timeZone="Asia/Seoul" />
+//         </Row>
+//         <Row>
+//           <Clock timeZone="Asia/Singapore" />
+//         </Row>
+//         <Row>
+//           <Clock timeZone="Europe/London" />
+//         </Row>
+//       </Row>
+//     </Container>
+//   </div>
+// </div>

src/Clock.jsx

@@ -0,0 +1,25 @@
+import { useState } from "react";
+import { useEffect } from "react";
+
+// Clock function
+export default function Clock(props) {
+  // useState allows you to add state to functional components. It essentially allows you to store and update data.
+  const [date, setDate] = useState(new Date());
+  // useEffect tells the clock to move by second. useEffect is used to perform side effects in a component.
+  useEffect(() => {
+    const timeId = setInterval(() => {
+      setDate(new Date());
+    }, 1000);
+    return () => {
+      clearInterval(timeId);
+    };
+  });
+
+  return (
+    // Add time zone label to make it clearer which time zone each clock is rendering.
+    <>
+      {/* {props.timeZone} */}
+      <p>{date.toLocaleString("en-GB", { timeZone: `${props.timeZone}` })}</p>
+    </>
+  );
+}

src/main.jsx

@@ -1,5 +1,6 @@
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
 import "./index.css";
+// import "bootstrap/dist/css/bootstrap.min.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(<App />);