PTBC8_Lester Lim

package.json

@@ -1,13 +1,19 @@
 {
   "name": "world-clock-bootcamp",
+  "homepage": "https://llesterja.github.io/world-clock-bootcamp",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^5.3.0",
+    "gh-pages": "^5.0.0",
     "react": "^18.1.0",
+    "react-bootstrap": "^2.8.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build"
   },

src/App.js

@@ -1,16 +1,42 @@
 import React from "react";
-import logo from "./logo.png";
+import logo from "./onepiececlock.png";
 import "./App.css";
+import Clock from "./components/Clock.js";
+import { Button } from "react-bootstrap";
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Background from "./zoro-background.jpg"
 
 class App extends React.Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
+        <header className="App-header" style={{backgroundImage:`url(${Background})`,backgroundSize:'cover'}}>
           <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
+          <h1 style={{backgroundColor:"rgba(92,128,92,0.8)"}}> Gear 5 Clock</h1>
+
+          <Button variant="primary">To implement background Switch Button</Button>
+
+          <div> </div>
+          <Container>
+            <Row className="border-top-0 border-white" style={{backgroundColor:"rgba(92,128,92,0.8)"}}> 
+              <Col>City</Col>
+              <Col>Clock</Col>
+            </Row>
+            <Row >
+              <Col className="border border-white " style={{backgroundColor:"rgba(116, 128, 116,0.8)"}}>Singapore</Col>
+              <Col className="border border-white " style={{backgroundColor:"rgba(116, 128, 116,0.8)"}}><Clock timeZone="Asia/Singapore" /></Col>
+            </Row>
+            <Row >
+              <Col className="border border-white " style={{backgroundColor:"rgba(116, 128, 116,0.8)"}}>Hong Kong</Col>
+              <Col className="border border-white " style={{backgroundColor:"rgba(116, 128, 116,0.8)"}}><Clock timeZone="Asia/Hong_Kong" /></Col>
+            </Row>
+            <Row >
+              <Col className="border border-white" style={{backgroundColor:"rgba(116, 128, 116,0.8)"}}>New York</Col>
+              <Col className="border border-white" style={{backgroundColor:"rgba(116, 128, 116,0.8)"}}><Clock timeZone="America/New_York" /></Col>
+            </Row>
+          </Container>
         </header>
       </div>
     );

src/components/Clock.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+class Clock extends React.Component{
+  constructor(props) {
+    super(props);
+    // Initialise component state to contain "date" attribute with current date and time
+    this.state = { date: new Date() };
+    };
+
+  componentDidMount() {
+    // Set date value in state every second to current date and time
+    // Save setInterval timer ID in class variable for teardown in another class method
+    this.timerId = setInterval(() => {
+      this.setState({
+        date: new Date(),
+      });
+    }, 1000);
+  };
+
+  componentWillUnmount() {
+    // Teardown setInterval timer with timer ID saved as class variable
+    clearInterval(this.timerId);
+  };
+
+  render(){
+    return(
+      <p>{this.state.date.toLocaleString('en-GB',{timeZone: this.props.timeZone})}</p>
+    )
+  }
+
+}
+  export default Clock;

src/index.js

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