thinkswell · PBJI · Oct 16, 2023 · Oct 16, 2023 · Oct 16, 2023 · Oct 16, 2023
diff --git a/Clock/yashwanthvarma18/README.md b/Clock/yashwanthvarma18/README.md
@@ -0,0 +1,28 @@
+# Digital Clock Project
+
+A simple and professional digital clock created using HTML, CSS, and JavaScript. This clock not only displays the current time but also includes the date, month name, and year. It has a sleek design with smooth animations and a glassy, translucent background.
+
+![Digital Clock Screenshot](ss.png)
+
+## Features
+
+- Real-time display of hours, minutes, and seconds.
+- Date, month name, and year information.
+- Professional styling with a glassy appearance.
+- Smooth animations for a polished look.
+
+## How to Use
+
+To use the digital clock, simply open the provided live demo link in your web browser. The clock will automatically display the current time and date.
+
+## Contributing
+
+Contributions are welcome! If you'd like to enhance this project or fix any issues, please feel free to create a pull request.
+
+
+## Contact
+
+If you have any questions or feedback, please don't hesitate to reach out at [gsaiyashwanth18@gmail.com].
+
+---
+<!-- _This project was created by [Yashwanth Varma]._ -->
diff --git a/Clock/yashwanthvarma18/index.html b/Clock/yashwanthvarma18/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Digital Clock</title>
+</head>
+<body>
+    <div class="clock-container">
+        <div class="clock">
+            <div class="time" id="time">12:00:00</div>
+            <div class="date" id="date">October 16, 2023</div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Clock/yashwanthvarma18/script.js b/Clock/yashwanthvarma18/script.js
@@ -0,0 +1,83 @@
+var hoursContainer = document.querySelector('.hours')
+var minutesContainer = document.querySelector('.minutes')
+var secondsContainer = document.querySelector('.seconds')
+var dateElement = document.querySelector('.date')
+var monthElement = document.querySelector('.month')
+var yearElement = document.querySelector('.year')
+var tickElements = Array.from(document.querySelectorAll('.tick'))
+
+var last = new Date(0)
+last.setUTCHours(-1)
+
+var tickState = true
+
+function updateTime() {
+  var now = new Date();
+
+  var lastHours = last.getUTCHours().toString();
+  var nowHours = now.getUTCHours().toString();
+  if (lastHours !== nowHours) {
+    updateContainer(hoursContainer, nowHours);
+  }
+
+  var lastMinutes = last.getMinutes().toString();
+  var nowMinutes = now.getMinutes().toString();
+  if (lastMinutes !== nowMinutes) {
+    updateContainer(minutesContainer, nowMinutes);
+  }
+
+  var lastSeconds = last.getSeconds().toString();
+  var nowSeconds = now.getSeconds().toString();
+  if (lastSeconds !== nowSeconds) {
+    updateContainer(secondsContainer, nowSeconds);
+  }
+
+  var day = now.getUTCDate().toString();
+  var month = now.toLocaleDateString('en-US', { month: 'long' });
+  var year = now.getUTCFullYear().toString();
+
+  dateElement.textContent = day;
+  monthElement.textContent = month;
+  yearElement.textContent = year;
+
+  last = now;
+}
+
+function tick() {
+  tickElements.forEach(t => t.classList.toggle('tick-hidden'));
+}
+
+function updateContainer(container, newTime) {
+  var time = newTime.split('');
+
+  if (time.length === 1) {
+    time.unshift('0');
+  }
+
+  var first = container.firstElementChild;
+  if (first.lastElementChild.textContent !== time[0]) {
+    updateNumber(first, time[0]);
+  }
+
+  var last = container.lastElementChild;
+  if (last.lastElementChild.textContent !== time[1]) {
+    updateNumber(last, time[1]);
+  }
+}
+
+function updateNumber(element, number) {
+  var second = element.lastElementChild.cloneNode(true);
+  second.textContent = number;
+
+  element.appendChild(second);
+  element.classList.add('move');
+
+  setTimeout(function () {
+    element.classList.remove('move');
+  }, 990);
+  setTimeout(function () {
+    element.removeChild(element.firstElementChild);
+  }, 990);
+}
+
+setInterval(updateTime, 100);
diff --git a/Clock/yashwanthvarma18/ss.png b/Clock/yashwanthvarma18/ss.png
diff --git a/Clock/yashwanthvarma18/style.css b/Clock/yashwanthvarma18/style.css
@@ -0,0 +1,66 @@
+body {
+    font-family: 'digital-7', sans-serif;
+    background-image: url('https://images6.alphacoders.com/133/1330235.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+    color: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.clock-container {
+    background-color: rgba(0, 0, 0, 0.3); /* Grayish background with 50% opacity */
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    box-shadow: 0 0 10px rgba(237, 236, 236, 0.7);
+    backdrop-filter: blur(5px); /* Apply a blur effect */
+}
+
+
+
+.clock {
+    text-align: center;
+    font-size: 3em;
+}
+
+.time {
+    font-size: 3em;
+    font-family: 'digital-7', sans-serif;
+}
+
+.date {
+    font-size: 1.5em;
+    font-family: 'digital-7', sans-serif;
+}
+
+
+  .top {
+    clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
+    animation: rotateFade 2s infinite alternate linear;
+  }
+
+  .bottom {
+    clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);
+    color: transparent;
+    background: -webkit-linear-gradient(177deg, black 53%, var(--text-color) 65%);
+    background: linear-gradient(177deg, black 53%, var(--text-color) 65%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    transform: translateX(-0.02em);
+    animation: rotateFade 2s infinite alternate linear;
+  }
+
+  @keyframes rotateFade {
+    0% {
+      transform: rotate(0deg) scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: rotate(5deg) scale(0.9);
+      opacity: 0.7;
+    }
+  }