Skip to content

Commit 7999a10

Browse files
PBJIPBJI
authored
Merge pull request #961 from yashwanthvarma18/DigitalClock-yashwanthvarma18
Digital clock yashwanthvarma18
2 parents a235db4 + f2c4d28 commit 7999a10

File tree

5 files changed

+195
-0
lines changed

5 files changed

+195
-0
lines changed

‎Clock/yashwanthvarma18/README.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Digital Clock Project
2+
3+
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.
4+
5+
![Digital Clock Screenshot](ss.png)
6+
7+
## Features
8+
9+
- Real-time display of hours, minutes, and seconds.
10+
- Date, month name, and year information.
11+
- Professional styling with a glassy appearance.
12+
- Smooth animations for a polished look.
13+
14+
## How to Use
15+
16+
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.
17+
18+
## Contributing
19+
20+
Contributions are welcome! If you'd like to enhance this project or fix any issues, please feel free to create a pull request.
21+
22+
23+
## Contact
24+
25+
If you have any questions or feedback, please don't hesitate to reach out at [gsaiyashwanth18@gmail.com].
26+
27+
---
28+
<!-- _This project was created by [Yashwanth Varma]._ -->

‎Clock/yashwanthvarma18/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Digital Clock</title>
8+
</head>
9+
<body>
10+
<div class="clock-container">
11+
<div class="clock">
12+
<div class="time" id="time">12:00:00</div>
13+
<div class="date" id="date">October 16, 2023</div>
14+
</div>
15+
</div>
16+
<script src="script.js"></script>
17+
</body>
18+
</html>

‎Clock/yashwanthvarma18/script.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
var hoursContainer = document.querySelector('.hours')
2+
var minutesContainer = document.querySelector('.minutes')
3+
var secondsContainer = document.querySelector('.seconds')
4+
var dateElement = document.querySelector('.date')
5+
var monthElement = document.querySelector('.month')
6+
var yearElement = document.querySelector('.year')
7+
var tickElements = Array.from(document.querySelectorAll('.tick'))
8+
9+
var last = new Date(0)
10+
last.setUTCHours(-1)
11+
12+
var tickState = true
13+
14+
function updateTime() {
15+
var now = new Date();
16+
17+
var lastHours = last.getUTCHours().toString();
18+
var nowHours = now.getUTCHours().toString();
19+
if (lastHours !== nowHours) {
20+
updateContainer(hoursContainer, nowHours);
21+
}
22+
23+
var lastMinutes = last.getMinutes().toString();
24+
var nowMinutes = now.getMinutes().toString();
25+
if (lastMinutes !== nowMinutes) {
26+
updateContainer(minutesContainer, nowMinutes);
27+
}
28+
29+
var lastSeconds = last.getSeconds().toString();
30+
var nowSeconds = now.getSeconds().toString();
31+
if (lastSeconds !== nowSeconds) {
32+
updateContainer(secondsContainer, nowSeconds);
33+
}
34+
35+
var day = now.getUTCDate().toString();
36+
var month = now.toLocaleDateString('en-US', { month: 'long' });
37+
var year = now.getUTCFullYear().toString();
38+
39+
dateElement.textContent = day;
40+
monthElement.textContent = month;
41+
yearElement.textContent = year;
42+
43+
last = now;
44+
}
45+
46+
function tick() {
47+
tickElements.forEach(t => t.classList.toggle('tick-hidden'));
48+
}
49+
50+
function updateContainer(container, newTime) {
51+
var time = newTime.split('');
52+
53+
if (time.length === 1) {
54+
time.unshift('0');
55+
}
56+
57+
var first = container.firstElementChild;
58+
if (first.lastElementChild.textContent !== time[0]) {
59+
updateNumber(first, time[0]);
60+
}
61+
62+
var last = container.lastElementChild;
63+
if (last.lastElementChild.textContent !== time[1]) {
64+
updateNumber(last, time[1]);
65+
}
66+
}
67+
68+
function updateNumber(element, number) {
69+
var second = element.lastElementChild.cloneNode(true);
70+
second.textContent = number;
71+
72+
element.appendChild(second);
73+
element.classList.add('move');
74+
75+
setTimeout(function () {
76+
element.classList.remove('move');
77+
}, 990);
78+
setTimeout(function () {
79+
element.removeChild(element.firstElementChild);
80+
}, 990);
81+
}
82+
83+
setInterval(updateTime, 100);

‎Clock/yashwanthvarma18/ss.png‎

2.36 MB
Loading

‎Clock/yashwanthvarma18/style.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
body {
2+
font-family: 'digital-7', sans-serif;
3+
background-image: url('https://images6.alphacoders.com/133/1330235.png');
4+
background-size: cover;
5+
background-repeat: no-repeat;
6+
color: #ffffff;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
height: 100vh;
11+
margin: 0;
12+
}
13+
14+
.clock-container {
15+
background-color: rgba(0, 0, 0, 0.3); /* Grayish background with 50% opacity */
16+
padding: 20px;
17+
border-radius: 10px;
18+
text-align: center;
19+
box-shadow: 0 0 10px rgba(237, 236, 236, 0.7);
20+
backdrop-filter: blur(5px); /* Apply a blur effect */
21+
}
22+
23+
24+
25+
.clock {
26+
text-align: center;
27+
font-size: 3em;
28+
}
29+
30+
.time {
31+
font-size: 3em;
32+
font-family: 'digital-7', sans-serif;
33+
}
34+
35+
.date {
36+
font-size: 1.5em;
37+
font-family: 'digital-7', sans-serif;
38+
}
39+
40+
41+
.top {
42+
clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
43+
animation: rotateFade 2s infinite alternate linear;
44+
}
45+
46+
.bottom {
47+
clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);
48+
color: transparent;
49+
background: -webkit-linear-gradient(177deg, black 53%, var(--text-color) 65%);
50+
background: linear-gradient(177deg, black 53%, var(--text-color) 65%);
51+
background-clip: text;
52+
-webkit-background-clip: text;
53+
transform: translateX(-0.02em);
54+
animation: rotateFade 2s infinite alternate linear;
55+
}
56+
57+
@keyframes rotateFade {
58+
0% {
59+
transform: rotate(0deg) scale(1);
60+
opacity: 1;
61+
}
62+
100% {
63+
transform: rotate(5deg) scale(0.9);
64+
opacity: 0.7;
65+
}
66+
}

0 commit comments

Comments
 (0)