diff --git a/Clock/aditya7302/README.md b/Clock/aditya7302/README.md new file mode 100644 index 000000000..7f9c23956 --- /dev/null +++ b/Clock/aditya7302/README.md @@ -0,0 +1,3 @@ +This project is a digital clock which uses basic html, css and js to display a clock on your web browser. +It is very simple to use and setup to display it you just need to click on the html file and it will start. +![ScreenShot](image.png) \ No newline at end of file diff --git a/Clock/aditya7302/css/styles.css b/Clock/aditya7302/css/styles.css new file mode 100644 index 000000000..06127f85d --- /dev/null +++ b/Clock/aditya7302/css/styles.css @@ -0,0 +1,61 @@ +body{ + margin: 0; + font-family: sans-serif; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + justify-content: center; + background: url("https://plus.unsplash.com/premium_photo-1675368244123-082a84cf3072?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1250&q=80"); + background-repeat: no-repeat; + background-size: cover; + overflow: hidden; +} + +h2{ + text-transform: uppercase; + letter-spacing: 4px; + font-size: 14px; + text-align: center; + color: white; +} + +.clock{ + display: flex; +} + +.clock div{ + margin: 5px; + position: relative; +} + +.clock span{ + width: 100px; + height: 80px; + background: slateblue; + opacity: 0.8; + color: white; + 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: darkblue; + opacity: 0.8; +} + +.clock #ampm{ + position: absolute; + bottom: 0; + width: 60px; + height: 30px; + font-size: 20px; + background: green; +} \ No newline at end of file diff --git a/Clock/aditya7302/image.png b/Clock/aditya7302/image.png new file mode 100644 index 000000000..b624d1699 Binary files /dev/null and b/Clock/aditya7302/image.png differ diff --git a/Clock/aditya7302/index.html b/Clock/aditya7302/index.html new file mode 100644 index 000000000..1a326ed43 --- /dev/null +++ b/Clock/aditya7302/index.html @@ -0,0 +1,45 @@ + + + + + + + + + Digital Clock + + +

Digital Clock

+
+
+ + 00 + + + Hours + +
+
+ + 00 + + + Minutes + +
+
+ + 00 + + + Seconds + +
+
+ + AM + +
+
+ + \ No newline at end of file diff --git a/Clock/aditya7302/index.js b/Clock/aditya7302/index.js new file mode 100644 index 000000000..dce915161 --- /dev/null +++ b/Clock/aditya7302/index.js @@ -0,0 +1,33 @@ +"use strict"; + +const hourEl = document.getElementById("hours"); +const minuteEl = document.getElementById("minutes"); +const secondEl = document.getElementById("seconds"); +const ampmEl = document.getElementById("ampm"); + +const updateClock = () => { + let h = new Date().getHours(); + let m = new Date().getMinutes(); + let s = new Date().getSeconds(); + let ampm = "AM"; + + + if(h>12){ + h -= 12; + ampm = "PM"; + } + + h = h<10 ? "0" + h: h; + m = m<10 ? "0" + m: m; + s = s<10 ? "0" + s: s; + + hourEl.innerText = h; + minuteEl.innerText = m; + secondEl.innerText = s; + ampmEl.innerText = ampm; + setTimeout(() => { + updateClock(); + },1000) +}; + +updateClock(); \ No newline at end of file