adding clock js and modulised the clock component

.env

@@ -0,0 +1 @@
+NODE_PATH=node_modules

package.json

@@ -1,31 +1,37 @@
 {
-  "name": "world-clock-bootcamp",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-scripts": "5.0.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+	"name": "world-clock-bootcamp",
+	"version": "0.1.0",
+	"private": false,
+	"homepage": "https://zach7815.github.io/world-clock-bootcamp",
+	"dependencies": {
+		"gh-pages": "^5.0.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.1.0",
+		"react-draggable": "^4.4.5",
+		"react-scripts": "^5.0.1",
+		"react-youtube": "^10.1.0"
+	},
+	"scripts": {
+		"predeploy": "npm run build",
+		"deploy": "gh-pages -d build",
+		"start": "react-scripts start",
+		"build": "react-scripts build"
+	},
+	"eslintConfig": {
+		"extends": [
+			"react-app"
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
 }

src/App.css

@@ -1,19 +1,72 @@
 .App {
-  text-align: center;
+	text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+	height: 40vmin;
+	pointer-events: none;
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+}
+
+.evening {
+	background-color: #fe5547;
+}
+
+.earlyMorning {
+	background-color: #dfbeb5;
+}
+.morning {
+	background-color: #fbf083;
+}
+
+.day {
+	background-color: #77a8e2;
+	color: white;
+}
+.night {
+	background-color: #25528e;
+	color: #f5f5f5;
+}
+.timezoneContainer {
+	background: linear-gradient(
+		45deg,
+		#1f2f3d 0%,
+		#1f2f3d 50%,
+		#3c4f65 50%,
+		#3c4f65 100%
+	);
+	padding: 1.5rem;
+	border-radius: 20px;
+}
+
+.timezonesDragBox {
+	position: absolute;
+	cursor: move;
+	user-select: none;
+	z-index: 1000;
+}
+
+.video-background {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	z-index: 1;
+}
+
+.video-background > div {
+	height: 100%;
+	width: 100%;
+	z-index: -100;
+	position: absolute;
 }

src/App.js

@@ -1,20 +1,65 @@
-import React from "react";
-import logo from "./logo.png";
-import "./App.css";
+import React from 'react';
+import Draggable from 'react-draggable';
+import YouTube from 'react-youtube';
+import './App.css';
+import './Clock';
+import { Timezones } from './Timezones';
 
 class App extends React.Component {
-  render() {
-    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>
-        </header>
-      </div>
-    );
-  }
+	constructor(props) {
+		super(props);
+		// Initialise component state to contain "date" attribute with current date and time
+		this.state = { date: new Date() };
+		this.interval = null;
+		this.state = {
+			position: { x: 0, y: 0 },
+		};
+		this.state = {
+			videoId: 'BHACKCNDMW8',
+			playerOptions: {
+				width: '100%',
+				height: '100%',
+				playerVars: {
+					autoplay: 1,
+					controls: 0,
+					loop: 1,
+					mute: 1,
+					modestbranding: 1,
+					showinfo: 0,
+					width: '100%',
+					height: '100%',
+				},
+			},
+		};
+	}
+
+	componentDidMount() {
+		this.interval = setInterval(() => {
+			this.setState({ date: new Date() });
+		}, 1000);
+	}
+
+	componentWillUnmount() {
+		clearInterval(this.interval);
+	}
+
+	render() {
+		const { videoId, playerOptions } = this.state;
+		return (
+			<div className='App'>
+				<div className='video-background'>
+					<YouTube videoId={videoId} opts={playerOptions} />
+				</div>
+				<header className='App-header'>
+					<Draggable>
+						<div className='timezonesDragBox'>
+							<Timezones />
+						</div>
+					</Draggable>
+				</header>
+			</div>
+		);
+	}
 }
 
 export default App;

src/Clock.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { controlClassName } from './bgColor';
+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() };
+		this.interval = null;
+	}
+
+	componentDidMount() {
+		this.interval = setInterval(() => {
+			this.setState({ date: new Date() });
+		}, 1000);
+	}
+
+	componentWillUnmount() {
+		clearInterval(this.interval);
+	}
+
+	componentDidUpdate() {
+		const timezones = document.querySelectorAll('.timezones');
+		controlClassName(Array.from(timezones));
+	}
+
+	render() {
+		return (
+			<p>
+				<span className='timezones'>{this.props.timeZone}</span>:
+				{this.state.date.toLocaleString('en-GB', {
+					timeZone: this.props.timeZone,
+				})}
+			</p>
+		);
+	}
+}
+
+export default Clock;

src/Timezones.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import Clock from './Clock';
+const timezones = ['America/Los_Angeles', 'Europe/London', 'Asia/Singapore'];
+
+export class Timezones extends Component {
+	render() {
+		return (
+			<div id='my-draggable-element' className='timezoneContainer'>
+				{timezones.map((timezone) => {
+					return <Clock key={timezone} timeZone={timezone} />;
+				})}
+			</div>
+		);
+	}
+}

src/bgColor.js

@@ -0,0 +1,47 @@
+// Have a function determine the background colour for the timezone
+// pass the timezone string for each timezone to the function
+// if the timezone is before midday- set bg early morning color
+// grab the span for each timezone string
+
+export const controlClassName = (elements) => {
+	elements.forEach((timezone) => {
+		// Extract the timezone string from the span element
+		const timezoneName = timezone.textContent;
+
+		// Create a new Date object using the timezone string
+		const date = new Date();
+		const options = { timeZone: timezoneName, hour12: false };
+		const hours = date
+			.toLocaleString('en-US', options)
+			.split(', ')[1]
+			.split(':')[0];
+
+		console.log(hours);
+
+		// Determine the appropriate background color based on the time in the timezone
+		let className = '';
+		switch (true) {
+			case hours >= 0 && hours < 7:
+				className = 'earlyMorning';
+				break;
+			case hours >= 7 && hours < 12:
+				className = 'morning';
+				break;
+			case hours >= 12 && hours < 16:
+				className = 'day';
+				break;
+			case hours >= 16 && hours < 18:
+				className = 'day';
+				break;
+			case hours >= 18 && hours < 24:
+				className = 'night';
+				break;
+			default:
+				className = 'night'; // night
+				break;
+		}
+
+		// Set the background color of the parent element using the determined color
+		timezone.parentElement.classList.add(className);
+	});
+};

src/index.js

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