Complete Clock Project

deepakkumar55 · Jun 3, 2024 · 54153be · 54153be
1 parent 97d7cee
commit 54153be
Show file tree

Hide file tree

Showing 4 changed files with 254 additions and 9 deletions.
diff --git a/Basic Projects/4-clock/README.md b/Basic Projects/4-clock/README.md
@@ -1,21 +1,73 @@
-# Clock
+# Clock [Live Demo](https://deepakkumar55.github.io/ULTIMATE-JAVASCRIPT-PROJECT/Basic%20Projects/4-clock)
 
 ## Description
 
-A brief description of the clock project.
+The clock project is a simple web application that displays the current time in real-time. It provides users with a convenient way to check the time on their devices without relying on external sources.
 
 ## Features
 
-- Feature 1
-- Feature 2
-- Feature 3
+- **Real-Time Updates**: The clock updates automatically to reflect the current time.
+- **12-Hour or 24-Hour Format**: Users can choose between a 12-hour or 24-hour time format.
+- **Customizable Design**: The clock's design is customizable, allowing users to adjust its appearance to their preferences.
 
 ## Technologies Used
 
-- JavaScript
-- HTML
-- CSS
+- **JavaScript**: Handles the logic for updating the time and providing user interaction.
+- **HTML**: Defines the structure of the clock interface.
+- **CSS**: Styles the clock interface to enhance its visual appeal and user experience.
 
 ## Setup
 
-Instructions to set up and run the project.
+Follow these steps to set up and run the clock project on your local machine:
+
+1. **Clone the repository**:
+   ```bash
+   git clone https://github.com/deepakkumar55/ULTIMATE-JAVASCRIPT-PROJECT.git
+   ```
+
+2. **Navigate to the project directory**:
+   ```bash
+   cd Basic Projects/4-clock
+   ```
+
+3. **Open `index.html` in your web browser**:
+   You can open the `index.html` file directly in your web browser by double-clicking on it or by using a live server extension in your code editor (like Live Server for VSCode).
+
+## Contribution
+
+Contributions to the clock project are welcome! Follow these steps to contribute:
+
+1. **Fork the repository**: Click on the 'Fork' button at the top right corner of the repository page.
+
+2. **Clone the forked repository**:
+   ```bash
+   git clone https://github.com/deepakkumar55/ULTIMATE-JAVASCRIPT-PROJECT.git
+   ```
+
+3. **Create a new branch**: Make sure your fork is up-to-date with the latest changes.
+   ```bash
+   git checkout -b feature-yourfeature
+   ```
+
+4. **Make your changes**: Implement your new feature or bug fix.
+
+5. **Commit your changes**:
+   ```bash
+   git add .
+   git commit -m "Description of your changes"
+   ```
+
+6. **Push to your branch**:
+   ```bash
+   git push origin feature-yourfeature
+   ```
+
+7. **Open a Pull Request**: Navigate to the original repository and open a pull request from your forked repository. Provide a detailed description of your changes and any relevant information.
+
+## Get in Touch
+
+If you have any questions or need further assistance, feel free to open an issue on GitHub or contact us directly. Your contributions and feedback are highly appreciated!
+
+---
+
+Thank you for your interest in the project. Together, we can build a more robust and feature-rich application. Happy coding!
diff --git a/Basic Projects/4-clock/index.html b/Basic Projects/4-clock/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Analog Clock JavaScript</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="clock">
+            <label style="--i: 1"><span>1</span></label>
+            <label style="--i: 2"><span>2</span></label>
+            <label style="--i: 3"><span>3</span></label>
+            <label style="--i: 4"><span>4</span></label>
+            <label style="--i: 5"><span>5</span></label>
+            <label style="--i: 6"><span>6</span></label>
+            <label style="--i: 7"><span>7</span></label>
+            <label style="--i: 8"><span>8</span></label>
+            <label style="--i: 9"><span>9</span></label>
+            <label style="--i: 10"><span>10</span></label>
+            <label style="--i: 11"><span>11</span></label>
+            <label style="--i: 12"><span>12</span></label>
+
+            <div class="indicator">
+                <span class="hand hour"></span>
+                <span class="hand minute"></span>
+                <span class="hand second"></span>
+            </div>
+        </div>
+
+        <div class="mode-switch">Dark Mode</div>
+    </div>
+</body>
+<script src="script.js" ></script>
+</html>
diff --git a/Basic Projects/4-clock/script.js b/Basic Projects/4-clock/script.js
@@ -0,0 +1,32 @@
+const body = document.querySelector("body"),
+  hourHand = document.querySelector(".hour"),
+  minuteHand = document.querySelector(".minute"),
+  secondHand = document.querySelector(".second"),
+  modeSwitch = document.querySelector(".mode-switch");
+
+if (localStorage.getItem("mode") === "Dark Mode") {
+  body.classList.add("dark");
+  modeSwitch.textContent = "Light Mode";
+}
+
+modeSwitch.addEventListener("click", () => {
+  body.classList.toggle("dark");
+  const isDarkMode = body.classList.contains("dark");
+  modeSwitch.textContent = isDarkMode ? "Light Mode" : "Dark Mode";
+  localStorage.setItem("mode", isDarkMode ? "Dark Mode" : "Light Mode");
+});
+
+const updateTime = () => {
+  let date = new Date(),
+    secToDeg = (date.getSeconds() / 60) * 360,
+    minToDeg = (date.getMinutes() / 60) * 360,
+    hrToDeg = (date.getHours() / 12) * 360;
+
+  secondHand.style.transform = `rotate(${secToDeg}deg)`;
+  minuteHand.style.transform = `rotate(${minToDeg}deg)`;
+  hourHand.style.transform = `rotate(${hrToDeg}deg)`;
+};
+
+setInterval(updateTime, 1000);
+
+updateTime();
diff --git a/Basic Projects/4-clock/style.css b/Basic Projects/4-clock/style.css
@@ -0,0 +1,124 @@
+/* Import Google font - Poppins */
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+:root {
+  --primary-color: #009688; /* teal */
+  --accent-color: #FF5722; /* deep orange */
+  --white-color: #f6f7fb;
+  --black-color: #18191a;
+}
+
+body {
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  background: var(--primary-color);
+  transition: background 0.3s ease-in-out;
+}
+
+body.dark {
+  --primary-color: #242526; /* dark gray */
+  --accent-color: #FF5722; /* deep orange */
+  --white-color: #18191a;
+  --black-color: #fff;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 60px;
+}
+
+.container .clock {
+  display: flex;
+  height: 300px; /* reduced size */
+  width: 300px; /* reduced size */
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  background: var(--white-color);
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1), 0 25px 45px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.clock label {
+  position: absolute;
+  inset: 20px;
+  text-align: center;
+  transform: rotate(calc(var(--i) * (360deg / 12)));
+}
+
+.clock label span {
+  display: inline-block;
+  font-size: 24px; /* reduced size */
+  font-weight: 600;
+  color: var(--black-color);
+  transform: rotate(calc(var(--i) * (-360deg / 12)));
+}
+
+.container .indicator {
+  position: absolute;
+  height: 10px;
+  width: 10px;
+  display: flex;
+  justify-content: center;
+}
+
+.indicator::before {
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: 50%;
+  z-index: 100;
+  background: var(--black-color);
+  border: 4px solid var(--accent-color);
+}
+
+.indicator .hand {
+  position: absolute;
+  height: 120px; /* reduced size */
+  width: 4px;
+  bottom: 0;
+  border-radius: 25px;
+  transform-origin: bottom;
+  background: var(--accent-color);
+}
+
+.hand.minute {
+  height: 110px; /* reduced size */
+  width: 5px;
+  background: var(--black-color);
+}
+
+.hand.hour {
+  height: 90px; /* reduced size */
+  width: 8px;
+  background: var(--black-color);
+}
+
+.mode-switch {
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 22px;
+  font-weight: 400;
+  display: inline-block;
+  color: var(--white-color);
+  background: var(--accent-color);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: background 0.3s ease-in-out;
+}
+
+.mode-switch:hover {
+  background: #ff7043; /* lighter shade of deep orange */
+}