Merge pull request #5 from GauriShirke12/digitclock

devmalik7 · web-flow · commit 1f6451c61068 · 2025-10-04T06:33:27.000+05:30
Digita-Clock project
diff --git a/DigitalClock/CONTRIBUTING.md b/DigitalClock/CONTRIBUTING.md
@@ -0,0 +1,42 @@
+# Contributing to Digital Clock
+
+Thank you for your interest in contributing! 
+This is a beginner-friendly project, so contributions are always welcome.
+
+## Ways You Can Contribute
+
+- Add new features (e.g., show date, dark/light mode, alarm function).  
+- Improve the design or styling (colors, fonts, layout).  
+- Refactor code to make it cleaner or easier to understand.  
+- Add more detailed comments or explanations for beginners.  
+- Fix bugs or errors.  
+- Make the clock **responsive** so it works well on mobile devices.  
+- Add **sound notifications or chimes** for each hour.  
+- Include **customizable themes** (users can pick colors or styles).  
+- Create **additional versions** (12-hour vs 24-hour format).    
+- Write a **step-by-step tutorial** or documentation for beginners.  
+- Add **accessibility features** (e.g., readable text, screen reader support).  
+- Optimize performance (ensure the clock runs smoothly and is lightweight).
+
+## Steps to Contribute
+1. **Fork the repository** and clone it locally.  
+2. Navigate to `JavaScript/DigitalClock/`.  
+3. Create a new branch for your feature or fix:
+   ```bash
+   git checkout -b feature-name
+
+
+## Pull Request Review Process
+
+1. **Automatic Checks**
+   - CI/CD will run tests and lints on your PR.
+   - Make sure all checks pass.
+
+2. **Review**
+   - A maintainer will review your PR for code quality, functionality, and adherence to guidelines.
+   - You may be asked to make changes—please respond promptly.
+
+3. **Merge**
+   - Once approved and all checks pass, your PR will be merged.
+   - You’ll be credited in the project’s contributors list!
+
diff --git a/DigitalClock/README.md b/DigitalClock/README.md
@@ -0,0 +1,15 @@
+# Digital Clock
+
+A beginner-friendly JavaScript project to display a live digital clock in the browser.
+
+## Features
+- Shows current time in 12-hour format with AM/PM.
+- Stylish and easy to understand.
+- Can be extended (add date, dark mode, alarms, etc.)
+
+## How to Run
+1. Open `digital_clock.html` in your browser.
+2. Clock updates automatically every second.
+
+## Contribution
+See `CONTRIBUTING.md` for how to add features or improve this project.
diff --git a/DigitalClock/digital_clock.html b/DigitalClock/digital_clock.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Digital Clock</title>
+  <style>
+    /* Center the clock on the page with a nice design */
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh; /* full viewport height */
+      background: #111; /* dark background */
+      color: #00ffcc; /* neon green text */
+      font-family: monospace, Arial, sans-serif;
+      font-size: 3rem;
+    }
+
+    /* Style the clock container */
+    #clock {
+      padding: 20px;
+      border: 2px solid #00ffcc;
+      border-radius: 10px;
+      box-shadow: 0 0 15px #00ffcc;
+    }
+  </style>
+</head>
+<body>
+   <!-- The clock will appear inside this div -->
+  <div id="clock"></div>
+
+
+  <script>
+    // Function to update the clock every second
+    function updateClock() {
+      const now = new Date(); // get current date and time
+
+      // Get hours, minutes, and seconds
+      let hours = now.getHours();
+      let minutes = now.getMinutes();
+      let seconds = now.getSeconds();
+
+      // Determine AM or PM
+      const ampm = hours >= 12 ? 'PM' : 'AM';
+
+      // Convert 24-hour format to 12-hour format
+      hours = hours % 12 || 12; // if hours = 0, set to 12
+
+      // Add leading zeros to minutes and seconds if needed
+      minutes = minutes < 10 ? '0' + minutes : minutes;
+      seconds = seconds < 10 ? '0' + seconds : seconds;
+
+      // Format the time string
+      const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
+
+      // Display the time in the clock div
+      document.getElementById('clock').textContent = timeString;
+    }
+
+    // Call updateClock every 1000 milliseconds (1 second)
+    setInterval(updateClock, 1000);
+
+    // Call it once immediately to show the clock right away
+    updateClock();
+  </script>
+</body>
+</html>
