https://github.com/starknightt/analog-clock-react.js-
This project showcases a blend of classic analog design with modern digital elements.
https://github.com/starknightt/analog-clock-react.js-
analog-clock analog-design css cssanimations design react reactjs
Last synced: about 1 month ago
JSON representation
This project showcases a blend of classic analog design with modern digital elements.
- Host: GitHub
- URL: https://github.com/starknightt/analog-clock-react.js-
- Owner: StarKnightt
- Created: 2024-07-07T07:12:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-10T11:21:48.000Z (over 1 year ago)
- Last Synced: 2025-10-25T06:33:49.348Z (3 months ago)
- Topics: analog-clock, analog-design, css, cssanimations, design, react, reactjs
- Language: CSS
- Homepage: https://analogklock.vercel.app/
- Size: 140 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Clock App
A modern, interactive clock application built with React and CSS.
## 🕰️ Features
- Analog clock face with hour, minute, and second hands
- Digital time display
- Colorful hour markers
- Smooth animations
- Responsive design
## 🚀 Demo
[https://analogklock.vercel.app/]
## 🛠️ Technologies Used
- React
- CSS
- JavaScript
## 📦 Installation
To run this project locally:
```
1. Clone the repository: https://github.com/StarKnightt/Analog-Clock-React.js-.git
2. Navigate to the project directory: ` cd reactclock `
3. Install dependencies: `npm install`
4. Start the development server: `npm start`
```
5. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
## 🖼️ Screenshots
## 🧠 What I Learned
- Deepened my understanding of React hooks, particularly useEffect
- Advanced CSS techniques for creating circular layouts
- JavaScript Date object manipulation
- Combining functional and aesthetic elements in web design
## 🤝 Contributing
Contributions, issues, and feature requests are welcome! Feel free to check [issues page](add link to your issues page).
## 👨💻 Author
**StarKnightt**
- GitHub: [@StarKnightt](https://github.com/StarKnightt)
- Social media: [@SocialMedia](https://bento.me/prasenjitnayak)
## 🌟 Show your support
Give a ⭐️ if you like this project!