Merge pull request #573 from GundaSudarrshan/Digital_clock_hacktoberfest

updated digital clock
pranjay-poddar · Oct 4, 2022 · b5ece01 · b5ece01
2 parents 1732b82 + 9404d64
commit b5ece01
Show file tree

Hide file tree

Showing 3 changed files with 180 additions and 0 deletions.
diff --git a/Js-Projects/Digital_Clock/clock.js b/Js-Projects/Digital_Clock/clock.js
@@ -0,0 +1,50 @@
+const clock = document.querySelector(".clock");
+const place = document.querySelector("#place");
+const date = document.querySelector("#date");
+const format_12 = document.querySelector(".format-12");
+const format_24 = document.querySelector(".format-24");
+
+const zone = "Asia/Kolkata";
+
+place.textContent = zone;
+
+function getTime(zone) {
+  const time = new Intl.DateTimeFormat("en-IN", {
+    timeZone: zone,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  }).format();
+  const data = new Intl.DateTimeFormat("en-IN", {
+    timeZone: zone,
+    day: "numeric",
+    month: "numeric",
+    year: "numeric",
+  }).format();
+  const [day, month, year] = data.split("/");
+  const [hr, min, sec] = time.replaceAll(" ", ":").split(":");
+  let hours_24 = hr; // Varaible for converting into 24 hr format
+  if (format_12.classList.contains("active")) {
+    clock.textContent =
+      `${hours_24 - 12}:${min}:${sec}` +
+      " " +
+      `${hours_24 >= 12 ? "PM" : "AM"}`;
+  } else {
+    clock.textContent =
+      `${hours_24}:${min}:${sec}` + "     " + `${hours_24 >= 12 ? "PM" : "AM"}`;
+  }
+  date.textContent = `${day}-${month}-${year}`;
+}
+
+format_12.addEventListener("click", function () {
+  format_12.classList.add("active");
+  format_24.classList.remove("active");
+});
+format_24.addEventListener("click", function () {
+  format_12.classList.remove("active");
+  format_24.classList.add("active");
+});
+
+setInterval(getTime, 0, zone);
+// getTime("Asia/Kolkata");
diff --git a/Js-Projects/Digital_Clock/index.html b/Js-Projects/Digital_Clock/index.html
@@ -0,0 +1,22 @@
+<!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 with Js using Intl API</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="container">
+      <span id="place"> Location </span>
+      <!-- <h3 id="Place">loacation/zone</h3> -->
+      <div class="clock">11:10:00 AM</div>
+      <!-- <h3 id="date">date</h3> -->
+      <span id="date"> date</span>
+      <div class="format-12 active">12hr</div>
+      <div class="format-24">24hr</div>
+    </div>
+    <script src="clock.js"></script>
+  </body>
+</html>
diff --git a/Js-Projects/Digital_Clock/styles.css b/Js-Projects/Digital_Clock/styles.css
@@ -0,0 +1,108 @@
+@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap");
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+body {
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  place-items: center;
+  /* font-family: "Orbitron"; */
+}
+.container {
+  min-width: 300px;
+  width: 40%;
+  height: 35%;
+  padding: 2rem;
+  background-color: black;
+  border-radius: 15px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+#place {
+  display: block;
+  position: absolute;
+  top: -10%;
+  left: 50%;
+  transform: translateX(-50%);
+  /* bottom: 10px; */
+  width: 70%;
+  height: 30%;
+  text-align: center;
+  /* line-height: 3; */
+  background-color: white;
+  /* border: 1px solid; */
+  border-radius: 15px;
+  font-size: larger;
+  display: grid;
+  place-items: center;
+}
+#date {
+  width: 70%;
+  height: 30%;
+  display: block;
+  position: absolute;
+  background-color: white;
+  text-align: center;
+  font-size: large;
+  line-height: 2.5;
+  bottom: -10%;
+  left: 50%;
+  transform: translate(-50%);
+  border-radius: 15px;
+  font-family: "Orbitron";
+  /* display: grid; */
+  /* place-items: top; */
+}
+.clock {
+  width: 100%;
+  text-align: center;
+  font-size: 2.5rem;
+  font-family: "Orbitron", sans-serif;
+  color: white;
+  background-color: red;
+}
+
+.format-12,
+.format-24 {
+  color: black;
+  min-width: 1.6rem;
+  line-height: 4;
+  width: 4.5rem;
+  height: 4.5rem;
+  position: absolute;
+  border: 1px solid black;
+  background-color: hsla(0, 0%, 100%, 0.697);
+  transform: translateY(-50%);
+  text-align: center;
+  border-radius: 15px 15px;
+  font-family: "Orbitron", sans-serif;
+  /* z-index: -1; */
+}
+.format-12 {
+  left: -70px;
+  top: 50%;
+  transform: tra;
+  border-bottom-left-radius: 15px;
+  margin-left: 2px;
+  /* border-right: none; */
+}
+.format-24 {
+  right: -70px;
+  top: 50%;
+  border-bottom-right-radius: 15px;
+  margin-right: 2px;
+}
+.format-12:hover,
+.format-24:hover {
+  border: 3px solid black;
+}
+.active {
+  border: 3px solid black;
+  background-color: red;
+}