Skip to content

Commit 0cf5565

Browse files
devmalik7devmalik7
authored
Merge pull request #28 from sanchit1804/main
Update digital_clock.html
2 parents 6693e36 + 368f880 commit 0cf5565

File tree

1 file changed

+159
-28
lines changed

1 file changed

+159
-28
lines changed

‎WebDev/DigitalClock/digital_clock.html‎

Lines changed: 159 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,63 +5,194 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Digital Clock</title>
77
<style>
8-
/* Center the clock on the page with a nice design */
98
body {
109
display: flex;
10+
flex-direction: column;
1111
justify-content: center;
1212
align-items: center;
13-
height: 100vh; /* full viewport height */
14-
background: #111; /* dark background */
15-
color: #00ffcc; /* neon green text */
13+
height: 100vh;
14+
margin: 0;
15+
background: #111;
16+
color: #4B0082;
1617
font-family: monospace, Arial, sans-serif;
17-
font-size: 3rem;
18+
transition: background 0.3s, color 0.3s;
19+
}
20+
21+
h1 {
22+
position: absolute;
23+
top: 20px;
24+
text-align: center;
25+
color: #4B0082;
26+
font-size: 2.5rem;
27+
text-shadow: 0 0 10px #4B0082;
28+
}
29+
30+
#toggleMode {
31+
position: absolute;
32+
top: 20px;
33+
right: 20px;
34+
padding: 10px 20px;
35+
border: none;
36+
border-radius: 8px;
37+
cursor: pointer;
38+
background-color: #4B0082;
39+
color: #111;
40+
font-weight: bold;
41+
transition: 0.3s;
42+
}
43+
44+
#toggleMode:hover {
45+
background-color: #00e6b8;
1846
}
1947

20-
/* Style the clock container */
2148
#clock {
22-
padding: 20px;
23-
border: 2px solid #00ffcc;
49+
padding: 20px 40px;
50+
border: 2px solid #4B0082;
2451
border-radius: 10px;
25-
box-shadow: 0 0 15px #00ffcc;
52+
box-shadow: 0 0 15px #4B0082;
53+
font-size: 3rem;
54+
text-align: center;
55+
margin-bottom: 15px;
56+
}
57+
58+
#date {
59+
font-size: 1.5rem;
60+
margin-bottom: 20px;
61+
}
62+
63+
#alarm-section {
64+
display: flex;
65+
gap: 10px;
66+
flex-wrap: wrap;
67+
justify-content: center;
68+
}
69+
70+
input, button {
71+
padding: 10px;
72+
border-radius: 5px;
73+
border: 1px solid #4B0082;
74+
background: transparent;
75+
color: #4B0082;
76+
font-size: 1rem;
77+
}
78+
79+
button#setAlarm {
80+
background-color: #4B0082;
81+
color: #111;
82+
font-weight: bold;
83+
cursor: pointer;
84+
transition: 0.3s;
85+
}
86+
87+
button#setAlarm:hover {
88+
background-color: #00e6b8;
89+
}
90+
91+
/* Light Mode */
92+
body.light-mode {
93+
background: #f5f5f5;
94+
color: #111;
95+
}
96+
97+
body.light-mode #clock {
98+
border-color: #111;
99+
box-shadow: 0 0 15px #999;
100+
}
101+
102+
body.light-mode h1 {
103+
color: #111;
104+
text-shadow: none;
105+
}
106+
107+
body.light-mode input, body.light-mode button {
108+
border-color: #111;
109+
color: #111;
110+
}
111+
112+
body.light-mode button#setAlarm {
113+
background-color: #111;
114+
color: #f5f5f5;
115+
}
116+
117+
body.light-mode #toggleMode {
118+
background-color: #111;
119+
color: #f5f5f5;
26120
}
27121
</style>
28122
</head>
29123
<body>
30-
<!-- The clock will appear inside this div -->
124+
<h1>🕒 Clock</h1>
125+
<button id="toggleMode">🌙 Dark Mode</button>
126+
31127
<div id="clock"></div>
128+
<div id="date"></div>
32129

130+
<div id="alarm-section">
131+
<input type="number" id="alarmHour" placeholder="Hour/*" min="1" max="12">
132+
<input type="number" id="alarmMinute" placeholder="Minute (0-59)" min="0" max="59">
133+
<select id="ampm">
134+
<option value="AM">AM</option>
135+
<option value="PM">PM</option>
136+
</select>
137+
<button id="setAlarm">Set Alarm</button>
138+
</div>
33139

34140
<script>
35-
// Function to update the clock every second
36-
function updateClock() {
37-
const now = new Date(); // get current date and time
141+
const clockEl = document.getElementById('clock');
142+
const dateEl = document.getElementById('date');
143+
const toggleModeBtn = document.getElementById('toggleMode');
144+
const setAlarmBtn = document.getElementById('setAlarm');
145+
let alarmTime = null;
146+
let alarmSet = false;
38147

39-
// Get hours, minutes, and seconds
148+
// Function to update time and date
149+
function updateClock() {
150+
const now = new Date();
40151
let hours = now.getHours();
41152
let minutes = now.getMinutes();
42153
let seconds = now.getSeconds();
43-
44-
// Determine AM or PM
45154
const ampm = hours >= 12 ? 'PM' : 'AM';
155+
hours = hours % 12 || 12;
46156

47-
// Convert 24-hour format to 12-hour format
48-
hours = hours % 12 || 12; // if hours = 0, set to 12
157+
const timeString = `${pad(hours)}:${pad(minutes)}:${pad(seconds)} ${ampm}`;
158+
const dateString = now.toDateString();
49159

50-
// Add leading zeros to minutes and seconds if needed
51-
minutes = minutes < 10 ? '0' + minutes : minutes;
52-
seconds = seconds < 10 ? '0' + seconds : seconds;
160+
clockEl.textContent = timeString;
161+
dateEl.textContent = dateString;
53162

54-
// Format the time string
55-
const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
163+
if (alarmSet && alarmTime === `${pad(hours)}:${pad(minutes)} ${ampm}` && seconds === 0) {
164+
alert("⏰ Alarm ringing!");
165+
alarmSet = false;
166+
}
167+
}
56168

57-
// Display the time in the clock div
58-
document.getElementById('clock').textContent = timeString;
169+
function pad(num) {
170+
return num < 10 ? '0' + num : num;
59171
}
60172

61-
// Call updateClock every 1000 milliseconds (1 second)
62-
setInterval(updateClock, 1000);
173+
// Dark/Light mode toggle
174+
toggleModeBtn.addEventListener('click', () => {
175+
document.body.classList.toggle('light-mode');
176+
toggleModeBtn.textContent =
177+
document.body.classList.contains('light-mode') ? '🌙 Dark Mode' : '☀️ Light Mode';
178+
});
179+
180+
// Set alarm
181+
setAlarmBtn.addEventListener('click', () => {
182+
const hour = document.getElementById('alarmHour').value;
183+
const minute = document.getElementById('alarmMinute').value;
184+
const ampm = document.getElementById('ampm').value;
63185

64-
// Call it once immediately to show the clock right away
186+
if (hour && minute !== '') {
187+
alarmTime = `${pad(hour)}:${pad(minute)} ${ampm}`;
188+
alarmSet = true;
189+
alert(`✅ Alarm set for ${alarmTime}`);
190+
} else {
191+
alert("⚠️ Please enter valid hour and minute!");
192+
}
193+
});
194+
195+
setInterval(updateClock, 1000);
65196
updateClock();
66197
</script>
67198
</body>

0 commit comments

Comments
 (0)