diff --git a/Clock/yashwanthvarma18/README.md b/Clock/yashwanthvarma18/README.md new file mode 100644 index 000000000..8b2f2608e --- /dev/null +++ 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]. + +--- + diff --git a/Clock/yashwanthvarma18/index.html b/Clock/yashwanthvarma18/index.html new file mode 100644 index 000000000..3ee0a9f31 --- /dev/null +++ b/Clock/yashwanthvarma18/index.html @@ -0,0 +1,18 @@ + + + + + + + Digital Clock + + +
+
+
12:00:00
+
October 16, 2023
+
+
+ + + diff --git a/Clock/yashwanthvarma18/script.js b/Clock/yashwanthvarma18/script.js new file mode 100644 index 000000000..328e4972c --- /dev/null +++ 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 new file mode 100644 index 000000000..fd3a07a95 Binary files /dev/null and b/Clock/yashwanthvarma18/ss.png differ diff --git a/Clock/yashwanthvarma18/style.css b/Clock/yashwanthvarma18/style.css new file mode 100644 index 000000000..7eb7ffcfb --- /dev/null +++ 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; + } + } \ No newline at end of file