Digital Clock — Cyberpunk Neon LED Chronometer

A modern, responsive digital chronometer web application built with pure Vanilla JavaScript, semantic HTML5, and CSS3. Featuring an authentic retro-futuristic LED aesthetic with Orbitron typography, multi-layered neon glow diffusion, 12-hour AM/PM formatting, full calendar date synchronization, and CRT scanline overlay.

---

Preview

Live Demo: syedabsar99.github.io/digital-clock

---

Overview

Designed and developed by Syed Noor Ul Absar, this project showcases clean, dependency-free frontend engineering by transforming native JavaScript Date primitives into a high-impact, cyber-industrial digital chronometer.

The interface simulates physical hardware LED displays with a dark bezel container, layered drop shadows, subtle CRT monitor scanline textures, and intense radial neon illumination.

---

Key Features

• Real-Time Clock Engine — Accurate 1,000ms heartbeat interval loop synchronously querying the native JavaScript Date API for continuous real-time accuracy.
• 12-Hour Cycle Conversion with AM/PM — Formats 24-hour cycle time into standard 12-hour readability with dynamic AM/PM state tracking and midnight/noon edge-case normalization (0 hours mapped to 12).
• Two-Digit Zero Padding — Automatically prefixes single-digit hours, minutes, and seconds with leading zeroes (01–09) to prevent horizontal layout shift or display jittering.
• Calendar Date Synchronization — Extracts and formats current day of the week, calendar date, full month name, and four-digit year using optimized array mapping.
• Cyberpunk LED Aesthetics — Rendered with Google Fonts Orbitron, radial background gradient, multi-tier text-shadow glow effects, and a repeating linear-gradient CRT scanline overlay.
• Fluid Viewport Responsiveness — Styled using CSS clamp() and responsive media queries to scale smoothly from small smartphones (<=600px) up to widescreen monitors.
• Zero External Dependencies — Built with 100% native Web standards—no bundlers, frameworks, or runtime libraries required.

---

Tech Stack

Layer	Technologies	Details
Structure	Semantic HTML5	Semantic <main> wrapper, Google Fonts preconnect, clean DOM hierarchy
Styling	Modern CSS3	Radial gradients, CRT scanlines, multi-tier text-shadows, CSS clamp(), media queries
Logic	Vanilla JavaScript (ES6+)	Native Date object manipulation, time formatting, calendar array indexing, setInterval
Hosting	GitHub Pages	Zero-configuration CDN hosting with HTTPS

---

Project Structure

digital-clock/
├── index.html        # Semantic clock markup and web font links
├── style.css         # LED glow effects, scanline textures, and responsive layout
├── script.js         # Real-time clock engine and calendar date formatting
├── preview.png       # High-resolution live application preview
├── .gitignore        # Standard ignore rules for OS and editor artifacts
├── LICENSE           # MIT License (Syed Noor Ul Absar)
└── README.md         # Professional project documentation

---

Getting Started

Local Setup

To run this project locally without any dependencies:

1. Clone the repository:

   git clone https://github.com/syedabsar99/digital-clock.git

2. Navigate into the project directory:

   cd digital-clock

3. Open index.html in your browser:

   • Double-click index.html or open it using VS Code Live Server / your preferred browser.

---

Author

Syed Noor Ul Absar

• Portfolio: syedabsar99.github.io/portfolio
• GitHub: @syedabsar99
• LinkedIn: Syed Noor Ul Absar

---

License

This project is licensed under the MIT License — see the LICENSE file for details.