Skip to main content

Modern Clock App with JavaScript: Analog, Digital, Timer & Stopwatch in One

Modern Clock App using JavaScript | Analog, Digital, Timer & Stopwatch

This all-in-one Clock App is a sleek and functional project built using HTML5, CSS3 (with Bootstrap 4), and Vanilla JavaScript. Whether you're a beginner looking to practice DOM manipulation or an intermediate developer refining your frontend skills, this project covers a wide range of real-world features.

🔹 Key Features:

  • Analog Clock: Real-time rotating hour, minute, and second hands with a clean and responsive layout.
  • Digital Clock: Displays the current time in HH:MM:SS format, updating every second.
  • Countdown Timer: Set predefined durations with smooth circular SVG animation, styled alerts (via SweetAlert2), and audio notifications.
  • Stopwatch: Start, pause, and reset with accurate time tracking and intuitive UI behavior.

📁 File Structure:

clock-app/
├── index.html
├── style.css
├── clock.js
├── media/
│   └── notification.wav

⚙️ How to Run:

  1. Clone or download the repository.
  2. Ensure notification.wav is present inside the media/ folder.
  3. Open index.html in your browser.
  4. Explore all four tabs: Analog ⏰, Digital 🕘, Timer ⏳, and Stopwatch ⏱️.

💡 Why Build This?

This project is a perfect opportunity to demonstrate your JavaScript skills through practical features like:

  • DOM manipulation
  • setInterval() for real-time updates
  • SVG-based circular animations
  • Event handling for user interactions
  • Audio playback and styled alerts with SweetAlert2

🔗 GitHub Repository

You can view or download the full project source code from my GitHub:

👉 View on GitHub

Comments

Post a Comment

Popular posts from this blog

How to Display Flash Messages in EJS using Node.js and Express

Displaying Flash Messages in EJS with Node.js and Express Flash messages are a great way to give users quick feedback — like "Login successful!" or "Please enter all fields!" . In this guide, you’ll learn how to implement them using: express-session connect-flash EJS templating 📦 Step 1: Install Required Packages npm install express express-session connect-flash ejs ⚙️ Step 2: Setup Express App and Middleware const express = require('express'); const session = require('express-session'); const flash = require('connect-flash'); const app = express(); // Set view engine app.set('view engine', 'ejs'); // Middleware app.use(express.urlencoded({ extended: true })); app.use(session({ secret: 'yourSecretKey', resave: false, saveUninitialized: true })); app.use(flash()); // Make flash messages available to all views app.use((req, res, next) => { res.lo...
Post a Comment
Read more

Realtime Device Tracker using Node.js, Socket.IO & Leaflet

Realtime Device Tracker using Node.js, Socket.IO & Leaflet In this tutorial, you’ll learn how to build a realtime location tracking application that uses the browser’s GPS, Socket.IO for live communication, and Leaflet.js to display users on a map. 🚀 Project Overview Backend: Node.js, Express.js, Socket.IO Frontend: HTML, Leaflet.js, Socket.IO client Features: Live GPS tracking, multi-user map, disconnect cleanup 📁 Folder Structure project-root/ ├── app.js ├── package.json ├── src/ │ ├── public/ │ │ ├── css/ │ │ │ └── style.css │ │ └── js/ │ │ └── script.js │ ├── routes/ │ │ └── routers.js │ ├── socket/ │ │ └── socketHandler.js │ └── views/ │ └── index.ejs 🧠 How It Works Each user shares their location using the browser's navigator.geolocation API. Location is sent to the server via Socket.IO . The server broadcasts each user’s position to all clien...
Post a Comment
Read more

How to Use L5-Swagger for API Documentation in Laravel

Integrating Swagger in Laravel: Annotations, JSON, and YAML What is Swagger? Swagger (OpenAPI) is a powerful tool for generating interactive API documentation. It helps developers understand and test your API easily. ✅ Step-by-Step Guide to Setup L5-Swagger 1. Install L5-Swagger Package composer require "darkaonline/l5-swagger" 2. Publish Config & View Files This command publishes the config file to config/l5-swagger.php : php artisan vendor:publish --provider "L5Swagger\L5SwaggerServiceProvider" 3. Configure Swagger (Optional) Edit the file config/l5-swagger.php to update: API Title Base Path Directories to scan for annotations 4. Add Swagger Annotations Add these before your controller class: /** * @OA\Info( * version="1.0.0", * title="Your API Title", * description=...
Post a Comment
Read more