world-clock - esther #ftbc14

package.json

@@ -10,7 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "bootstrap": "^5.3.2",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.9.1",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {

src/App.jsx

@@ -1,18 +1,16 @@
 import logo from "/logo.png";
 import "./App.css";
+import WorldClock from "./WorldClock";
+
+// const country = ["Asia/Singapore", "Asia/Tokyo", "Europe/Zurich"];
 
 function App() {
   return (
     <>
       <div>
         <img src={logo} className="logo" alt="Rocket logo" />
       </div>
-      <h1>World Clock</h1>
-      <div className="card">
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
+      <WorldClock />
     </>
   );
 }

src/Clock.jsx

@@ -0,0 +1,18 @@
+// import logo from "/logo.png";
+import { useState, useEffect } from "react";
+
+export default function Clock(props) {
+  const [date, setDate] = useState(new Date());
+
+  useEffect(() => {
+    setInterval(() => {
+      setDate(new Date());
+    }, 1000);
+  });
+
+  return (
+    <>
+      <p>{date.toLocaleString("en-GB", { timeZone: `${props.timeZone}` })}</p>
+    </>
+  );
+}

src/WorldClock.jsx

@@ -0,0 +1,24 @@
+import Clock from "./Clock";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import { clockData } from "./clockData";
+
+function WorldClock() {
+  const listItems = clockData.map((data, index) => (
+    <Row key={index}>
+      <Col>{data.city}</Col>
+      <Col>
+        <Clock timeZone={data.time} />
+      </Col>
+    </Row>
+  ));
+
+  return (
+    <>
+      <h1> World Clock</h1>
+      <Container>{listItems}</Container>
+    </>
+  );
+}
+export default WorldClock;

src/clockData.jsx

@@ -0,0 +1,16 @@
+export const clockData = [
+  {
+    city: "Singapore",
+    time: "Asia/Singapore",
+  },
+  {
+    city: "Tokyo",
+    time: "Asia/Tokyo",
+  },
+  {
+    city: "Zurich",
+    time: "Europe/Zurich",
+  },
+];
+
+//add more if needed.

src/index.css

@@ -27,7 +27,7 @@ body {
   margin: 0;
   display: flex;
   place-items: center;
-  min-width: 320px;
+  min-width: 700 px;
   min-height: 100vh;
 }
 

src/main.jsx

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