TERMINAL:npx create-react-app compassclock
App.js
import React, { useState, useEffect } from "react";
import "./App.css";
const CompassClock = () => {
const [time, setTime] = useState(new Date());
useEffect(() => {
const timer = setInterval(() => setTime(new Date()), 1000);
return () => clearInterval(timer);
}, []);
const hours = time.getHours() % 12;
const minutes = time.getMinutes();
const seconds = time.getSeconds();
return (
<div className="clock-container">
<h2>Compass Clock</h2>
<div className="time-display">{time.toLocaleTimeString()}</div>
<div className="date-display">{time.toDateString()}</div>
<div className="clock">
{/* Numbers */}
<div className="number num12">12</div>
<div className="number num3">3</div>
<div className="number num6">6</div>
<div className="number num9">9</div>
{/* Compass */}
<div className="compass north">N</div>
<div className="compass east">E</div>
<div className="compass south">S</div>
<div className="compass west">W</div>
{/* Hour hand */}
<div
className="hand hour"
style={{ transform: `rotate(${hours * 30 + minutes * 0.5}deg)` }}
/>
{/* Minute hand */}
<div
className="hand minute"
style={{ transform: `rotate(${minutes * 6}deg)` }}
/>
{/* Second hand */}
<div
className="hand second"
style={{ transform: `rotate(${seconds * 6}deg)` }}
/>
{/* Center dot */}
<div className="center-dot"></div>
</div>
</div>
);
};
export default CompassClock;
App.css
.clock-container {
text-align: center;
padding: 20px;
font-family: Arial, sans-serif;
}
.time-display {
font-size: 20px;
margin-bottom: 5px;
}
.date-display {
font-size: 16px;
margin-bottom: 20px;
color: gray;
}
.clock {
position: relative;
width: 250px;
height: 250px;
border: 3px solid black;
border-radius: 50%;
margin: 0 auto;
background: white;
}
/* Numbers */
.number {
position: absolute;
font-size: 18px;
font-weight: bold;
}
.num12 {
top: 5px;
left: 50%;
transform: translateX(-50%);
}
.num3 {
right: 5px;
top: 50%;
transform: translateY(-50%);
}
.num6 {
bottom: 5px;
left: 50%;
transform: translateX(-50%);
}
.num9 {
left: 5px;
top: 50%;
transform: translateY(-50%);
}
/* Compass directions */
.compass {
position: absolute;
font-size: 20px;
font-weight: bold;
color: red;
}
.north {
top: -25px;
left: 50%;
transform: translateX(-50%);
}
.east {
right: -25px;
top: 50%;
transform: translateY(-50%);
}
.south {
bottom: -25px;
left: 50%;
transform: translateX(-50%);
}
.west {
left: -25px;
top: 50%;
transform: translateY(-50%);
}
/* Hands */
.hand {
position: absolute;
width: 50%;
height: 2px;
background: black;
top: 50%;
left: 50%;
transform-origin: left center;
transform: rotate(0deg);
transition: all 0.05s linear;
}
.hour {
width: 35%;
height: 4px;
}
.minute {
width: 45%;
height: 3px;
background: blue;
}
.second {
width: 48%;
height: 2px;
background: red;
}
/* Center dot */
.center-dot {
position: absolute;
width: 12px;
height: 12px;
background: black;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
TERMINAL:cd compassclock
TERMINAL:npm start
Comments
Post a Comment