Qianling - World Clock

package.json

@@ -3,7 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^5.3.2",
     "react": "^18.1.0",
+    "react-bootstrap": "^2.9.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1"
   },

src/App.css

@@ -17,3 +17,7 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
+
+.create-space {
+  height: 40px;
+}

src/App.js

@@ -1,16 +1,41 @@
 import React from "react";
 import logo from "./logo.png";
 import "./App.css";
+import WorldClock from "./Components/WorldClock";
+import { Button } from "react-bootstrap";
 
 class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isTimezoneDisplay: true,
+    };
+  }
+
+  toggleClock = () => {
+    this.setState({
+      isTimezoneDisplay: !this.state.isTimezoneDisplay,
+    });
+  };
   render() {
+    const clockData = ["Europe/Zurich", "Canada/Yukon", "Asia/Singapore"];
+
     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>
+          <p class="create-space"></p>
+          <Button variant="primary" onClick={this.toggleClock}>
+            Toggle Timezones
+          </Button>
+          <p class="create-space"></p>
+
+          {this.state.isTimezoneDisplay ? (
+            <WorldClock clockData={[...clockData]} />
+          ) : (
+            <p>Time Zones Removed</p>
+          )}
         </header>
       </div>
     );

src/Components/Clock.js

@@ -0,0 +1,42 @@
+import React from "react";
+
+class Clock extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      date: new Date(),
+    };
+  }
+
+  tick = () => {
+    this.setState({
+      date: new Date(),
+    });
+  };
+
+  componentDidMount = () => {
+    this.timerID = setInterval(() => {
+      this.tick();
+    }, 1000);
+  };
+
+  componentWillUnmount = () => {
+    clearInterval(this.timerID);
+  };
+
+  render() {
+    const { date } = this.state;
+    return (
+      <div>
+        <p>
+          {`${date.toLocaleString("en-GB", {
+            timeZone: this.props.timeZone,
+          })}`}
+        </p>
+      </div>
+    );
+  }
+}
+
+export default Clock;

src/Components/WorldClock.js

@@ -0,0 +1,29 @@
+import React from "react";
+import Clock from "./Clock";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import "./worldClock.css";
+
+class WorldClock extends React.Component {
+  render() {
+    const timeZoneOfCountries = this.props.clockData;
+
+    return (
+      <Container>
+        {timeZoneOfCountries.map((zone, index) => (
+          <Row className="deco">
+            <Col md={6} className="deco">
+              Current time in {zone} :
+            </Col>
+            <Col md={6} className="deco" key={index}>
+              <Clock timeZone={zone} />
+            </Col>
+          </Row>
+        ))}
+      </Container>
+    );
+  }
+}
+
+export default WorldClock;

src/Components/worldClock.css

@@ -0,0 +1,3 @@
+.deco {
+  border: 2px solid white;
+}

src/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);