World Clock

src/App.css

@@ -37,3 +37,63 @@
 .read-the-docs {
   color: #888;
 }
+
+.clock-circle {
+  width: 200px;
+  height: 200px;
+  border: 8px solid #333;
+  border-radius: 50%;
+  position: relative;
+  background: #fff;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.clock-hands {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: left;
+}
+
+.hour-hand {
+  width: 60px;
+  height: 4px;
+  background: #333;
+}
+
+.minute-hand {
+  width: 80px;
+  height: 3px;
+  background: #666;
+}
+
+.second-hand {
+  width: 90px;
+  height: 2px;
+  background: #ff0000;
+}
+
+.clock-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.timezone-label {
+  margin-top: 10px;
+  text-align: center;
+}
+
+h3 {
+  margin-top: 230px;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 80vh;
+}

src/App.jsx

@@ -1,17 +1,22 @@
-import logo from "/logo.png";
+import { useState } from "react";
 import "./App.css";
+import HelloWorld from "./HelloWorld";
+import Clock from "./Clock";
 
 function App() {
+  const [count, setCount] = useState(0);
+
   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>
+      <HelloWorld />
+      <button onClick={() => setCount((count) => count + 1)}>
+        count is {count}
+      </button>
+
+      <div className="container">
+        <Clock timeZone="Europe/Paris" />
+        <Clock timeZone="Europe/London" />
+        <Clock timeZone="Singapore" />
       </div>
     </>
   );

src/Clock.jsx

@@ -0,0 +1,57 @@
+import { useState, useEffect } from "react";
+
+function Clock({ timeZone }) {
+  const [time, setTime] = useState(new Date());
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const hours = parseInt(
+    time.toLocaleTimeString("en-US", {
+      hour: "numeric",
+      hour12: false,
+      timeZone,
+    }),
+    10
+  );
+  const minutes = parseInt(
+    time.toLocaleTimeString("en-US", { minute: "numeric", timeZone }),
+    10
+  );
+  const seconds = parseInt(
+    time.toLocaleTimeString("en-US", { second: "numeric", timeZone }),
+    10
+  );
+
+  const hourDegrees = (hours % 12) * 30 + minutes * 0.5;
+  const minuteDegrees = minutes * 6;
+  const secondDegrees = seconds * 6;
+
+  return (
+    <div className="clock-container">
+      <div className="clock-circle">
+        <div
+          className="clock-hands hour-hand"
+          style={{ transform: `rotate(${hourDegrees}deg)` }}
+        ></div>
+        <div
+          className="clock-hands minute-hand"
+          style={{ transform: `rotate(${minuteDegrees}deg)` }}
+        ></div>
+        <div
+          className="clock-hands second-hand"
+          style={{ transform: `rotate(${secondDegrees}deg)` }}
+        ></div>
+      </div>
+      <h3 className="timezone-label">
+        {timeZone} - {hours}:{minutes}:{seconds}
+      </h3>
+    </div>
+  );
+}
+
+export default Clock;

src/HelloWorld.jsx

@@ -0,0 +1,12 @@
+
+import React from 'react';
+
+function HelloWorld() {
+  return (
+    <div>
+      <h1>Hello World !</h1>
+    </div>
+  );
+}
+
+export default HelloWorld;