Deleted past commits

Jomon-J · Aug 11, 2024 · 48399f2 · 48399f2
commit 48399f2
Show file tree

Hide file tree

Showing 5 changed files with 303 additions and 0 deletions.
diff --git a/Preview.png b/Preview.png
diff --git a/README.md b/README.md
@@ -0,0 +1,49 @@
+## *Digital Clock*
+
+   <img src="https://github.com/Jomonh/Digital-Clock/blob/main/Preview.png?raw=true" alt="Project Screenshot" width="500"/>
+
+### 🔗 *Demo Site*
+   - Check out the live demo of this project: [Demo Site](https://jomonh.github.io/Digital-Clock)
+
+###  *Key Features*
+   - Responsive Design
+   - clean UI
+   - Real-Time Updates
+   - Date and Day of the Week
+
+###  *Technologies Used*
+   - html
+   - css
+   - JavaScript
+
+##  Getting Started
+
+To get started with this project, you have two options:
+
+### 1. *Clone the Repository*
+   - Use the following link to clone the repository to your local machine:
+
+     ```bash
+     git clone https://github.com/Jomonh/Digital-Clock.git
+
+
+   - Once cloned, navigate to the project directory:
+
+     ```bash
+     cd Digital-Clock
+     
+
+### 2. *Fork the Repository*
+   - If you prefer, you can directly *fork* this repository.
+   - Click the *Fork* button at the top-right of this page.
+   - After forking, clone the repository from your account:
+
+     ```bash
+     git clone https://github.com/your-username/your-forked-repository.git
+
+
+### 🌟 *Don’t Forget to Star!*
+   - If you find this project useful, please consider giving it a star ⭐. It helps others discover it too!
+
+###  *License*
+   - This project is licensed under the MIT License - see the [LICENSE](https://opensource.org/license/MIT) file for details.
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!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>
+    <link rel="stylesheet" href="style.css">
+
+
+</head>
+<body>
+    <div class="containerr">
+        <div class="container">
+          <div class="clock">
+            <span id="hrs">00</span>
+            <span>:</span>
+            <span id="min">00</span>
+            <span>:</span>
+            <span id="sec">00</span>
+          </div>
+        </div>
+
+        <div class="date">
+          <div class="top">
+            <p id="date">01</p>
+            <p id="day">Sunday</p>
+            <p id="month">January</p>
+            <p id="year">2020</p>
+          </div>
+        </div>
+    </div>
+</body>
+
+<script src="./script.js"></script>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,49 @@
+let hrs = document.getElementById("hrs");
+      let min = document.getElementById("min");
+      let sec = document.getElementById("sec");
+
+      setInterval(() => {
+        let currentTime = new Date();
+        hrs.innerHTML =
+          (currentTime.getHours() < 10 ? "0" : "") + currentTime.getHours();
+        min.innerHTML =
+          (currentTime.getMinutes() < 10 ? "0" : "") + currentTime.getMinutes();
+        sec.innerHTML =
+          (currentTime.getSeconds() < 10 ? "0" : "") + currentTime.getSeconds();
+      }, 1000);
+
+      const date = document.getElementById("date");
+      const day = document.getElementById("day");
+      const month = document.getElementById("month");
+      const year = document.getElementById("year");
+
+      const today = new Date();
+
+      const weekDays = [
+        "Sunday ,",
+        "Monday ,",
+        "Tuesday ,",
+        "Wednesday ,",
+        "Thursday ,",
+        "Friday ,",
+        "Saturday ,",
+      ];
+      const allMonths = [
+        " January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+      ];
+
+      date.innerHTML = (today.getDate() < 10 ? "0" : " ") + today.getDate();
+      day.innerHTML = weekDays[today.getDay()];
+      month.innerHTML = allMonths[today.getMonth()];
+      year.innerHTML = today.getFullYear();
diff --git a/style.css b/style.css
@@ -0,0 +1,169 @@
+*{
+  margin: 0;
+  padding: 0;
+  font-family: 'Poppins',sans-serif;
+  box-sizing: border-box;
+}
+.containerr{
+  width: 100%;
+  min-height: 100vh;
+  background-color: #000;
+  color: #ffffff;
+}
+.container{
+  width: 800px;
+  height: 180px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+}
+.clock{
+  width: 100%;
+  height: 100%;
+  background: rgba(234, 0, 255, 0.252);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(70px);
+}
+ .container::before{
+  content: '';
+  width: 180px;
+  height: 180px;
+  background: #f41b75;
+  border-radius: 5px;
+  position: absolute;
+  left: -50px;
+  top: -50px;
+  z-index: -1;
+}
+.container::after{
+  content: '';
+  width: 180px;
+  height: 180px;
+  background: #419aff;
+  border-radius: 50%;
+  position: absolute;
+  right: -50px;
+  bottom: -50px;
+  z-index: -1;
+}
+.clock span{
+  font-size: 80px;
+  width: 110px;
+  display: inline-block;
+  text-align: center;
+  position: relative;
+}
+.clock span::after{
+  font-size: 16px;
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+#hrs::after{
+  content: 'HOURS';
+}
+#min::after{
+  content: 'MINS';
+}
+#sec::after{
+  content: 'SEC';
+}
+
+/* Date */
+
+.date{
+  width: 100%;
+  height: 10vh;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.top{
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  top: 100%;
+  background: rgba(234, 0, 255, 0.252);
+  padding: 10px 20px;
+  border-radius: 5px;
+  backdrop-filter: blur(80px);
+}
+@media only screen and (max-width:1200px){
+  .container{
+    width: 500px;
+    height: 140px;
+  }
+  .container::before{
+    width: 140px;
+    height: 140px;
+    margin-left: 15px;
+  }
+  .container::after{
+    width: 140px;
+    height: 140px;
+    margin-left: 15px;
+  }
+
+}
+@media only screen and (max-width:600px){
+  .container{
+    width: 300px;
+    height: 120px;
+  }
+  .container::before{
+    width: 120px;
+    height: 120px;
+    margin-left: 15px;
+  }
+  .container::after{
+    width: 120px;
+    height: 120px;
+    margin-right: 15px;
+  }
+  .clock span{
+    font-size: 55px;
+    width: 50px;
+  }
+  .clock span::after{
+    font-size: 12px;
+    left: 70%;
+  }
+
+
+}
+
+@media only screen and (max-width:450px){
+  .container{
+    width: 250px;
+    height: 100px;
+  }
+  .container::before{
+    width: 100px;
+    height: 100px;
+    margin-left: 15px;
+  }
+  .container::after{
+    width: 100px;
+    height: 100px;
+    margin-right: 15px;
+  }
+  .clock span{
+  font-size: 35px;
+    width: 50px;
+  }
+  .clock span::after{
+    font-size: 10px;
+    left: 60%;
+  }
+
+
+}
+
+