ADDED DIGITAL CLOCK

harshil1973 · Oct 9, 2022 · 8e1125e · 8e1125e
1 parent ddfebdf
commit 8e1125e
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 0 deletions.
diff --git a/DIGITAL CLOCK/README.md b/DIGITAL CLOCK/README.md
@@ -0,0 +1,14 @@
+# DIGITAL CLOCK
+This is a very basic Digital Clock developed in HTML, CSS and JavaScript.
+In this project I have used basic Date Object in JavaScript.
+
+Making it a brilliant project for revisiting the basics. For all beginners, this project surely is a bliss.
+
+## Snapshot
+<img
+  src="/DIGITAL CLOCK/screenshot/ss-1.png"
+  alt="Digital Clock"
+  title="Digital Clock"
+  style="display: inline-block; margin: 0 auto; max-width: 300px">
+
+# [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/built-by-developers.svg)](https://forthebadge.com)
diff --git a/DIGITAL CLOCK/background.jpg b/DIGITAL CLOCK/background.jpg
diff --git a/DIGITAL CLOCK/index.html b/DIGITAL CLOCK/index.html
@@ -0,0 +1,32 @@
+<!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>DIGITAL CLOCK</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+    <h2>Digital Clock</h2>
+    <div class = "clock">
+        <div>
+            <span id = "hour">00</span>
+            <span class = "text">Hours</span>
+        </div>
+        <div>
+            <span id = "minutes">00</span>
+            <span class = "text">Minutes</span>
+        </div>
+        <div>
+            <span id = "seconds">00</span>
+            <span class = "text">Seconds</span>
+        </div>
+        <div>
+            <span id = "ampm">AM</span>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/DIGITAL CLOCK/screenshot/ss-1.png b/DIGITAL CLOCK/screenshot/ss-1.png
diff --git a/DIGITAL CLOCK/script.js b/DIGITAL CLOCK/script.js
@@ -0,0 +1,30 @@
+const hourE1 = document.getElementById("hour")
+const minutesE1 = document.getElementById("minutes")
+const secondsE1 = document.getElementById("seconds")
+const ampmE1 = document.getElementById("ampm")
+
+function updateclock(){
+    let h = new Date().getHours();
+    let m = new Date().getMinutes();
+    let s = new Date().getSeconds();
+    let ampm = "AM";
+
+    if(h > 12){
+        h = h - 12;
+        ampm = "PM";
+    }
+
+    h = h < 10 ? "0" + h : h;
+    m = m < 10 ? "0" + m : m;
+    s = s < 10 ? "0" + s : s;
+
+    hourE1.innerText = h;
+    minutesE1.innerText = m;
+    secondsE1.innerText = s;
+    ampmE1.innerText = ampm;
+    setTimeout(()=>{
+        updateclock()
+    },1000)
+}
+
+updateclock();
diff --git a/DIGITAL CLOCK/style.css b/DIGITAL CLOCK/style.css
@@ -0,0 +1,63 @@
+body{
+    margin : 0;
+    font-family: sans-serif;
+    display : flex;
+    flex-direction : column;
+    align-items : center;
+    height : 100vh;
+    justify-content: center;
+    background : url("https://images.unsplash.com/photo-1461301214746-1e109215d6d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80");
+    background-size: cover;
+    overflow: hidden;
+}
+
+h2{
+    text-transform: uppercase;
+    letter-spacing: 4px;
+    font-size: 24px;
+    text-align:center;
+    color: white;
+}
+
+.clock{
+    display : flex;
+
+}
+
+.clock div{
+    margin : 5px;
+    position: relative;
+}
+
+.clock span{
+    width : 100px;
+    height : 80px;
+    background-color: rgba(0, 0, 0, 0.444);
+    opacity : 80%;
+    color : rgb(255, 249, 249);
+    display : flex;
+    justify-content: center;
+    align-items:center;
+    font-size:50px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.clock .text{
+    height : 30px;
+    font-size : 10px;
+    text-transform : uppercase;
+    letter-spacing : 2px;
+    background:rgba(238, 243, 241, 0.298);
+    color : rgb(253, 255, 255);
+    opacity : 0.9;
+}
+
+.clock #ampm{
+    bottom:0;
+    position : absolute;
+    width: 50px;
+    height : 30px;
+    font-size : 20px;
+    background-color: rgba(238, 243, 241, 0.298);
+    color: rgb(253, 255, 255);
+}