Ken's world clock

package.json

@@ -2,12 +2,18 @@
   "name": "world-clock-bootcamp",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://kenleeyx.github.io/world-clock-bootcamp",
   "dependencies": {
+    "bootstrap": "^5.3.1",
+    "gh-pages": "^6.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.css

@@ -17,3 +17,4 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
+

src/App.js

@@ -1,16 +1,17 @@
 import React from "react";
 import logo from "./logo.png";
 import "./App.css";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import WorldClock from "./WorldClock.js";
 
 class App extends React.Component {
   render() {
+    const timeZones = ['Asia/Singapore', 'America/Los_Angeles', 'Europe/London'];
     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>
+          <WorldClock clockData = {timeZones}/>
         </header>
       </div>
     );

src/Clock.js

@@ -0,0 +1,33 @@
+import React from "react";
+
+export default 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 {zone} = this.props
+    return (
+      <div>
+        <p>{this.state.date.toLocaleString('en-GB', {timeZone: zone})}</p>
+      </div>
+    );
+  }
+}

src/WorldClock.js

@@ -0,0 +1,32 @@
+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';
+
+export default class WorldClock extends React.Component {
+  constructor(props) { //figure out how to add clockdata prop into here - array of timezone strings
+    super(props);
+  }
+
+  render() {
+    const {clockData} = this.props;
+    const clocks = clockData.map((timeZone)=>
+        <Row key = {timeZone.toString()}>
+            <Col>{timeZone}</Col>
+            <Col><Clock zone={timeZone}/></Col>
+        </Row>
+    );
+    return (
+        <div>
+            <Container>
+              <Row>
+                <Col>City</Col>
+                <Col>Clock</Col>
+              </Row>
+              {clocks}
+            </Container>
+        </div>
+      );
+  }
+}

src/index.js

@@ -5,3 +5,15 @@ import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
+
+// function tick() {
+//     const element = (
+//       <div>
+//         <h1>Hello, world!</h1>
+//         <h2>It is {new Date().toLocaleTimeString()}.</h2>
+//       </div>
+//     );
+//     root.render(element);
+//   }
+
+//   setInterval(tick, 1000);