From 56fcdfbf3e7091984b75c7e70bac06d9d47131a0 Mon Sep 17 00:00:00 2001 From: amandeep singh parihar Date: Sat, 21 Oct 2023 11:12:31 +0530 Subject: [PATCH] digital clock --- .../amandeep sigh parihar/index.html | 22 +++++++ Digital clock/amandeep sigh parihar/index.js | 46 ++++++++++++++ Digital clock/amandeep sigh parihar/style.css | 61 +++++++++++++++++++ 3 files changed, 129 insertions(+) create mode 100644 Digital clock/amandeep sigh parihar/index.html create mode 100644 Digital clock/amandeep sigh parihar/index.js create mode 100644 Digital clock/amandeep sigh parihar/style.css diff --git a/Digital clock/amandeep sigh parihar/index.html b/Digital clock/amandeep sigh parihar/index.html new file mode 100644 index 000000000..6bd09c3cf --- /dev/null +++ b/Digital clock/amandeep sigh parihar/index.html @@ -0,0 +1,22 @@ + + + + + + Digital Clock + + + + +
+

+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/Digital clock/amandeep sigh parihar/index.js b/Digital clock/amandeep sigh parihar/index.js new file mode 100644 index 000000000..1fa4d5492 --- /dev/null +++ b/Digital clock/amandeep sigh parihar/index.js @@ -0,0 +1,46 @@ +setInterval(currentTime, 1000); + +function currentTime() +{ + let time = new Date(); // creating object of Date class + let dayName=time.getDay(); + let month=time.getMonth(); + let year=time.getFullYear(); + let date=time.getDate(); + let hour = time.getHours(); + let min = time.getMinutes(); + let sec = time.getSeconds(); + + var am_pm = "AM"; + if(hour==12) + am_pm = "PM"; + if (hour > 12) { + hour -= 12; + am_pm = "PM"; + } + if (hour == 0) { + hour = 12; + am_pm = "AM"; + } + + hour = hour < 10 ? "0" + hour : hour; + min = min < 10 ? "0" + min : min; + sec = sec < 10 ? "0" + sec : sec; + + //value of current time + let currentTime = hour + ":" + min + ":" + sec +" "+ am_pm; + + // value of present day(Day, Month, Year) + var months=["January","February","March","April","May","June","July","August","September","October","November","December"]; + var week=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; + + var presentDay=week[dayName]+", "+months[month]+" "+date+", "+year; + + const clock = document.getElementById("time"); + const dayIntro=document.getElementById("dayName"); + + clock.innerHTML = currentTime; + dayIntro.innerHTML = presentDay; +} + +currentTime(); //calling currentTime() function to initiate the process \ No newline at end of file diff --git a/Digital clock/amandeep sigh parihar/style.css b/Digital clock/amandeep sigh parihar/style.css new file mode 100644 index 000000000..fea8adf99 --- /dev/null +++ b/Digital clock/amandeep sigh parihar/style.css @@ -0,0 +1,61 @@ +/* Google font */ +@import url('https://fonts.googleapis.com/css?family=Orbitron'); + +*{ + margin: 0; + padding: 0; + + } + html,body{ + display: grid; + place-items: center; + + } + #dayIntro +{ + font-size: 40px; + font-weight: 600; + letter-spacing: 3px; + border: 7px solid rgb(17,129,134); + border-radius: 10px; + margin: 20px; + font-family: 'Times New Roman', Times, serif; + padding: 15px; + background: linear-gradient(180deg, #a8b9d3,rgb(173, 227, 229)); +} + .container{ + height: 120px; + width: 550px; + position: relative; + background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0); + border-radius: 10px; + cursor: default; + + } + .container .dispClock, + .container { + position: absolute; + top: 28%; + left: 50%; + transform: translate(-50%, -50%); + } + .container .dispClock{ + top: 50%; + height: 105px; + width: 535px; + background: linear-gradient(147deg, #000000 0%, #2c3e50 74%); + border-radius: 6px; + text-align: center; + } + .dispClock #time{ + line-height: 85px; + color: #fff; + font-size: 70px; + font-weight: 600; + letter-spacing: 1px; + font-family: 'Orbitron', sans-serif; + background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + + } \ No newline at end of file