Merge pull request #421 from dhrumishah/digital_clock

Ayushparikh-code · web-flow · commit 5a8b9dc31e80 · 2024-09-17T08:11:52.000+05:30
Added Project
diff --git a/Digital Clock/digitalClock.css b/Digital Clock/digitalClock.css
@@ -0,0 +1,70 @@
+* {
+  margin: 0;
+  font-family: "Chakra Petch", sans-serif;
+}
+html,
+body {
+  display: grid;
+  height: 100%;
+  place-items: center;
+  background-color: #000;
+}
+.clock,
+.date {
+  height: 300px;
+  width: 1000px;
+  background: linear-gradient(
+    135deg,
+    #f1c0e8,
+    #c77dff,
+    #b6ccfe,
+    #b9fbc0,
+    #fbf8cc
+  );
+  -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 225, 0.75);
+  -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 225, 0.75);
+  box-shadow: 0px 0px 15px 5px rgba(255, 255, 225, 0.75);
+  border-radius: 15px;
+  animation: animate 1.5s linear infinite;
+}
+.display,
+.layout {
+  padding: 20px;
+  border-radius: 15px;
+  width: 800px;
+}
+.clock .display,
+.date .layout {
+  position: absolute;
+  top: 18%;
+  left: 8%;
+  background-color: #1b1b1b;
+  z-index: 999;
+  height: 140px;
+  text-align: center;
+}
+.clock .display #time,
+.date .layout #period {
+  line-height: 140px;
+  color: #fff;
+  font-size: 6em;
+  letter-spacing: 0.1em;
+  background: linear-gradient(
+    135deg,
+    #f1c0e8,
+    #c77dff,
+    #b6ccfe,
+    #b9fbc0,
+    #fbf8cc
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: animate 1.5s linear infinite;
+}
+
+@keyframes animate {
+  100% {
+    filter: hue-rotate(360deg);
+  }
+}
diff --git a/Digital Clock/digitalClock.html b/Digital Clock/digitalClock.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" />
+    <link rel="stylesheet" href="digitalClock.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bangers&family=Chakra+Petch:wght@600&family=Lato:wght@300&family=Montserrat:ital,wght@1,200&family=Mouse+Memoirs&family=Plus+Jakarta+Sans:wght@200&family=Poppins:wght@200;300;600;700&family=Satisfy&display=swap"
+      rel="stylesheet"
+    />
+    <title>Digital Clock</title>
+  </head>
+  <body>
+    <div class="clock">
+      <div class="display">
+        <div id="time"></div>
+      </div>
+    </div>
+    <br />
+    <br />
+    <div class="date">
+      <div class="layout">
+        <div id="period"></div>
+      </div>
+    </div>
+
+    <script type="text/javascript" src="digitalClock.js"></script>
+  </body>
+</html>
diff --git a/Digital Clock/digitalClock.js b/Digital Clock/digitalClock.js
@@ -0,0 +1,49 @@
+function startTime() {
+  var today = new Date();
+  var hr = today.getHours();
+  var min = today.getMinutes();
+  var sec = today.getSeconds();
+  var session = "AM";
+  if (hr > 12) {
+    session = "PM";
+  }
+
+  hr = checkTime(hr);
+  min = checkTime(min);
+  sec = checkTime(sec);
+  document.getElementById("time").innerHTML =
+    hr + ":" + min + ":" + sec + " " + session;
+
+  var months = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "April",
+    "May",
+    "June",
+    "July",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+  var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  var curWeekDay = days[today.getDay()];
+  var curDay = today.getDate();
+  var curMonth = months[today.getMonth()];
+  var curYear = today.getFullYear();
+  var date = curWeekDay + "," + curDay + "" + curMonth + " " + curYear;
+  document.getElementById("period").innerHTML = date;
+
+  var time = setTimeout(function () {
+    startTime();
+  }, 500);
+}
+function checkTime(i) {
+  if (i < 10) {
+    i = "0" + i;
+  }
+  return i;
+}
+startTime();
diff --git a/Digital Clock/ref-img.jpg b/Digital Clock/ref-img.jpg
