Add files via upload

Update js project analog clock
Siddharthmarko · Oct 12, 2023 · 1228ab7 · 1228ab7
1 parent 8ec5396
commit 1228ab7
Show file tree

Hide file tree

Showing 3 changed files with 252 additions and 0 deletions.
diff --git a/Analog clock/index.html b/Analog clock/index.html
@@ -0,0 +1,41 @@
+<!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>Analog Clock</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="javascript.js" defer></script>
+</head>
+
+<body>
+    <section>
+        <div class="analogCont">
+            <div class="clock">
+                <div class="hand second" id="second"></div>
+                <div class="hand minute" id="minute"></div>
+                <div class="hand hour" id="hour"></div>
+            </div>
+        </div>
+        <div class="digitalCont">
+            <div class="topCont">
+                <div class="timeCont">
+                    <p class="time" id="time">12:12:12</p>
+                </div>
+                <div class="icon">
+                    <div class="menu">
+                        <div class="dot"></div>
+                    </div>
+                </div>
+
+            </div>
+            <div class="bottomCont">
+                <p id="date">Wed,March</p>
+            </div>
+        </div>
+    </section>
+</body>
+
+</html>
diff --git a/Analog clock/javascript.js b/Analog clock/javascript.js
@@ -0,0 +1,76 @@
+const secondEl = document.getElementById("second");
+const minuteEl = document.getElementById("minute");
+const hourEl = document.getElementById("hour");
+
+// Digital
+
+const timeEl = document.getElementById("time");
+const dateEl = document.getElementById("date");
+
+// Analog
+
+function setTime() {
+    const date = new Date();
+    const second = (date.getSeconds() / 60) * 360;
+    const minute = (second + date.getMinutes() / 60) * 360;
+    const hour = (minute + date.getHours() / 12) * 360;
+    setClock(second, minute, hour);
+}
+
+function setClock(second, minute, hour) {
+    secondEl.style.transform = `rotate(${second}deg)`;
+    minuteEl.style.transform = `rotate(${minute}deg)`;
+    hourEl.style.transform = `rotate(${hour}deg)`;
+
+    if (second > 350) {
+        secondEl.style.transition = `none`;
+    } else if (second > 6) {
+        secondEl.style.transition = `.3s ease`;
+    }
+}
+
+// Digital Clock
+
+const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+
+const days = ["Sun", "Mon", "Tue", "We", "Thu", "Fri", "Sat"];
+
+function setTime2() {
+    const date = new Date();
+    const second = date.getSeconds();
+    const minute = date.getMinutes();
+    const hour = date.getHours();
+
+    const secondText = second <= 9 ? `0${second}` : `${second}`;
+    const minuteText = minute <= 9 ? `0${minute}` : `${minute}`;
+
+    const hourConvert12 = hour > 12 ? hour - 12 : hour;
+
+    const hourText =
+        hourConvert12 <= 9 ? `0${hourConvert12}` : `${hourConvert12}`;
+
+    timeEl.innerHTML = `${hourText}:${minuteText}:${secondText}`;
+}
+
+const date = new Date();
+const month = months[date.getMonth()];
+const day = days[date.getDay()];
+dateEl.innerHTML = `${day}, ${month}`;
+
+setInterval(() => {
+    setTime();
+    setTime2();
+}, 1000);
diff --git a/Analog clock/style.css b/Analog clock/style.css
@@ -0,0 +1,135 @@
+:root {
+  --black: #272727;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  background-color: var(--black);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+body section {
+  display: flex;
+}
+body section .analogCont .clock {
+  height: 250px;
+  width: 250px;
+  border: 4px solid snow;
+  border-radius: 50%;
+  position: relative;
+}
+.hand {
+  height: 100px;
+  width: 3px;
+  background-color: #fff;
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  border-radius: 99px;
+  transform-origin: bottom;
+}
+.hand.hour {
+  height: 70px;
+  background-color: #f4f4f4;
+}
+.hand.minute {
+  height: 95px;
+}
+.hand.second {
+  background: red;
+  transition: 0.3 ease;
+}
+body section .analogCont .clock::after {
+  content: "";
+  height: 15px;
+  width: 15px;
+  position: absolute;
+  background-color: #fff;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+/* Digital Clock */
+
+body section .digitalCont {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  color: #fff;
+  margin-left: 1rem;
+  margin-top: 2rem;
+}
+body section .digitalCont .topCont {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+body section .digitalCont .time {
+  font-size: 3rem;
+  font-weight: bolder;
+}
+body section .digitalCont .bottomCont p {
+  font-size: 1.2rem;
+  margin-left: 1rem;
+}
+body section .digitalCont .topCont .icon {
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  margin-left: 0.8rem;
+}
+body section .digitalCont .topCont .icon:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+body section .digitalCont .topCont .icon.active {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+body section .digitalCont .topCont .icon .menu {
+  height: 3px;
+  width: 3px;
+  background-color: #fff;
+  position: relative;
+  display: flex;
+  transform: rotate(90deg);
+}
+body section .digitalCont .topCont .icon .menu::after,
+body section .digitalCont .topCont .icon .menu::before {
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+}
+body section .digitalCont .topCont .icon .menu::after {
+  top: -8px;
+}
+body section .digitalCont .topCont .icon .menu::before {
+  bottom: -8px;
+}
+
+@media (max-width: 600px) {
+  section {
+    flex-direction: column;
+  }
+  body section .digitalCont {
+    margin-left: 0% !important;
+    text-align: center !important;
+    position: relative;
+  }
+  body section .digitalCont .topCont .icon {
+    position: absolute;
+    right: -20px;
+  }
+}