World Clock

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.css

@@ -37,3 +37,10 @@
 .read-the-docs {
   color: #888;
 }
+
+.col {
+  border: 1px solid #000000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/App.jsx

@@ -1,20 +1,45 @@
 import logo from "/logo.png";
 import "./App.css";
+import Clock from "./components/Clock";
+import Food from "./components/Food"
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
 
 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>
+
+      <Container>
+        <Row>
+          <Col xs>Country</Col>
+          <Col xs>Time Zone</Col>
+        </Row>
+        <Row>
+          <Col xs>Singapore</Col>
+          <Col xs>
+            <Clock title="Singapore" />
+          </Col>
+        </Row>
+        <Row>
+          <Col xs>Los Angeles</Col>
+          <Col xs>
+            <Clock title="Los Angeles" />
+          </Col>
+        </Row>
+        <Row>
+          <Col xs>London</Col>
+          <Col xs>
+            <Clock title="London" />
+          </Col>
+        </Row>
+      </Container>
     </>
   );
 }
 
-export default App;
+export default App;

src/components/Clock.jsx

@@ -0,0 +1,53 @@
+import React, {useState, useEffect} from 'react'
+import {Button} from 'react-bootstrap'
+
+function Clock(props) {
+
+  const timezones = ["America/Los_Angeles", "Europe/London", "Asia/Singapore"];
+
+  let timezone = "";
+  if (props.title == "Singapore") {
+    timezone = timezones[2];
+  } else if (props.title == "London"){
+    timezone = timezones[1];
+  } else if ((props.title == "Los Angeles")) {
+    timezone = timezones[0];
+  }
+
+  const [clock, setClock] = useState(new Date().toLocaleString('en-GB', { timeZone: timezone}));
+  const [showClock, setShowClock] = useState(true);
+
+
+  const clockstyle = {
+    color: "black",
+    fontWeight: "bold",
+  };
+
+  useEffect(() => {
+    const tick = () => {
+      setClock(new Date().toLocaleString("en-GB", {timeZone: timezone}));
+    };
+
+    const timer = setInterval(tick, 1000);
+
+    return () => {
+      clearInterval(timer);
+    }
+  });
+
+  return (
+    <>
+      <div className="clocks" style={clockstyle}>
+        {showClock ? clock : <h6>Clock Hidden</h6>}
+      </div>
+      <Button variant="primary" onClick={() => setShowClock(true)}> 
+        Show Clock
+      </Button>
+      <Button variant="danger" onClick={() => setShowClock(false)}>
+        Hide Clock
+      </Button>
+    </>
+  );
+}
+
+export default Clock

src/components/Food.jsx

@@ -0,0 +1,25 @@
+import React, {useEffect, useState} from 'react'
+import {Button} from 'react-bootstrap'
+
+function Food() {
+  const [favFood, setFavFood] = useState("Fries"); 
+  const [showFood, setShowFood] = useState(true)
+
+  useEffect(() => {
+    console.log("Component Mounted")
+
+    return () => {
+      console.log("Component Unmounted")
+    }
+  },[])
+
+  return (
+    <div>
+      <br></br>
+      {showFood? <h6>{favFood}</h6> : <h6>No Food Shown</h6>}
+      <Button variant="danger" onClick={() => setShowFood(!showFood)}>Click Me</Button>
+    </div>
+  )
+}
+
+export default Food

src/index.css

@@ -5,7 +5,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #333333;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -58,7 +58,7 @@ button:focus-visible {
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
-    background-color: #ffffff;
+    background-color: #5a5a5a;
   }
   a:hover {
     color: #747bff;

src/main.jsx

@@ -1,5 +1,6 @@
+import "bootstrap/dist/css/bootstrap.min.css";
 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 />);