A lightweight, modern, and interactive frontend mini-project that displays a real-time web clock built with Vanilla JavaScript. This project features a sleek Glassmorphism (frosted-glass) user interface and allows users to easily pause and resume the live time with a simple click.
You can test the live version of this project here:
👉 Launch Live Demo
- Modern Glassmorphism UI: Features gorgeous frosted-glass effects, background blur, and smooth gradient transitions.
- Pure Vanilla JavaScript (Zero-dependency): Built entirely with native web technologies without using any third-party libraries or frameworks.
- Smart Pause/Resume Functionality: Allows users to freeze the time and restart it just by clicking anywhere on the clock container.
- Dynamic State Styling: Uses CSS classes to intuitively differentiate between the active and paused states of the clock.
- Standardized Time Format: Ensures double-digit formatting (
00:00:00) for hours, minutes, and seconds at all times. - Fully Responsive Design: Adapts fluidly to all desktop, tablet, and mobile displays.
یک مینیپروژه فرانتاند سبک، مدرن و تعاملی برای نمایش ساعت آنی و زنده وب با جاوا اسکریپت خالص (Vanilla JS). این پروژه با طراحی شیک و شیشهای (Glassmorphism) توسعه یافته و قابلیت متوقف کردن و راهاندازی مجدد زمان را با یک کلیک ساده به کاربر میدهد.
برای مشاهده و تست آنلاین این پروژه میتوانید روی لینک زیر کلیک کنید:
👉 مشاهده دمو زنده پروژه
- طراحی مدرن Glassmorphism: استفاده از جلوههای شیشهای، تاری پسزمینه (Backdrop Blur) و گرادینتهای چشمنواز زیبا.
- جاوا اسکریپت خالص (Zero-dependency): بدون استفاده از هیچگونه کتابخانه جانبی یا فریمورک.
- قابلیت هوشمند Pause/Resume: امکان متوقف کردن زمان و استارت مجدد آن تنها با کلیک روی باکس ساعت.
- تغییر استایل داینامیک: استفاده از کلاسهای CSS برای متمایز کردن حالت فعال و غیرفعال ساعت.
- فرمت استاندارد زمان: نمایش دورقمی ساعت، دقیقه و ثانیه (فرمت
00:00:00) به صورت کاملاً دقیق. - کاملاً ریسپانسیو: هماهنگی کامل ساختار صفحه با مرورگرهای دسکتاپ، تبلت و موبایل.
- HTML5 (Semantic structure)
- CSS3 (Global variables, Backdrop-filter blur, CSS animations, optimized web fonts)
- Vanilla JavaScript (Native Date object, structured intervals, dynamic DOM class manipulation)
The project is completely static. To run it, simply clone the repository and open index.html in your browser.
├── index.html # HTML Structure & CSS Styles
└── JsClock.js # Main JavaScript Clock Controller
⭐️ *If you found this dashboard layout useful, please give this repository a star!
⭐️ *اگر این مخزن برای شما مفید بود، لطفا با دادن ستاره از آن حمایت کنید!