Skip to content

Commit a666b77

Browse files
pehlivanovicparis-cloudpehlivanovicparis-cloud
committed
Add digital clock displaying current time in multiple time zones
1 parent 48da723 commit a666b77

1 file changed

Lines changed: 344 additions & 0 deletions

File tree

‎timezone-clock.html‎

Lines changed: 344 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,344 @@
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+
<title>World Digital Clock - Multiple Time Zones</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17+
min-height: 100vh;
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
padding: 20px;
22+
}
23+
24+
.container {
25+
max-width: 1200px;
26+
width: 100%;
27+
}
28+
29+
.header {
30+
text-align: center;
31+
color: white;
32+
margin-bottom: 50px;
33+
}
34+
35+
.header h1 {
36+
font-size: 2.5em;
37+
margin-bottom: 10px;
38+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
39+
}
40+
41+
.header p {
42+
font-size: 1.1em;
43+
opacity: 0.9;
44+
}
45+
46+
.clocks-grid {
47+
display: grid;
48+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
49+
gap: 30px;
50+
margin-bottom: 30px;
51+
}
52+
53+
.clock-card {
54+
background: white;
55+
border-radius: 15px;
56+
padding: 30px;
57+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
58+
text-align: center;
59+
transition: transform 0.3s ease, box-shadow 0.3s ease;
60+
}
61+
62+
.clock-card:hover {
63+
transform: translateY(-5px);
64+
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
65+
}
66+
67+
.timezone-name {
68+
font-size: 1.3em;
69+
font-weight: bold;
70+
color: #667eea;
71+
margin-bottom: 15px;
72+
text-transform: uppercase;
73+
letter-spacing: 1px;
74+
}
75+
76+
.time-display {
77+
font-size: 3em;
78+
font-weight: bold;
79+
color: #333;
80+
font-family: 'Courier New', monospace;
81+
margin: 20px 0;
82+
letter-spacing: 2px;
83+
}
84+
85+
.date-display {
86+
font-size: 0.95em;
87+
color: #666;
88+
margin-top: 15px;
89+
border-top: 1px solid #eee;
90+
padding-top: 15px;
91+
}
92+
93+
.utc-offset {
94+
font-size: 0.85em;
95+
color: #999;
96+
margin-top: 10px;
97+
font-style: italic;
98+
}
99+
100+
.controls {
101+
text-align: center;
102+
margin-top: 30px;
103+
}
104+
105+
.btn {
106+
background: white;
107+
color: #667eea;
108+
border: 2px solid white;
109+
padding: 12px 30px;
110+
margin: 0 10px;
111+
border-radius: 25px;
112+
font-size: 1em;
113+
font-weight: bold;
114+
cursor: pointer;
115+
transition: all 0.3s ease;
116+
}
117+
118+
.btn:hover {
119+
background: transparent;
120+
color: white;
121+
}
122+
123+
.format-toggle {
124+
display: flex;
125+
justify-content: center;
126+
gap: 10px;
127+
margin-bottom: 30px;
128+
}
129+
130+
.format-btn {
131+
background: rgba(255, 255, 255, 0.2);
132+
color: white;
133+
border: 2px solid white;
134+
padding: 10px 20px;
135+
border-radius: 20px;
136+
cursor: pointer;
137+
font-size: 0.95em;
138+
transition: all 0.3s ease;
139+
}
140+
141+
.format-btn.active {
142+
background: white;
143+
color: #667eea;
144+
}
145+
146+
@media (max-width: 768px) {
147+
.header h1 {
148+
font-size: 1.8em;
149+
}
150+
151+
.time-display {
152+
font-size: 2em;
153+
}
154+
155+
.clocks-grid {
156+
grid-template-columns: 1fr;
157+
gap: 20px;
158+
}
159+
}
160+
</style>
161+
</head>
162+
<body>
163+
<div class="container">
164+
<div class="header">
165+
<h1>🌍 World Digital Clock</h1>
166+
<p>Current time across different time zones</p>
167+
</div>
168+
169+
<div class="format-toggle">
170+
<button class="format-btn active" onclick="setFormat('12h')">12-Hour</button>
171+
<button class="format-btn" onclick="setFormat('24h')">24-Hour</button>
172+
</div>
173+
174+
<div class="clocks-grid" id="clocksGrid"></div>
175+
176+
<div class="controls">
177+
<button class="btn" onclick="addTimezone()">+ Add Time Zone</button>
178+
<button class="btn" onclick="resetTimezones()">Reset to Default</button>
179+
</div>
180+
</div>
181+
182+
<script>
183+
// Default time zones to display
184+
const defaultTimezones = [
185+
{ name: 'New York', timezone: 'America/New_York' },
186+
{ name: 'London', timezone: 'Europe/London' },
187+
{ name: 'Tokyo', timezone: 'Asia/Tokyo' },
188+
{ name: 'Sydney', timezone: 'Australia/Sydney' },
189+
{ name: 'Dubai', timezone: 'Asia/Dubai' },
190+
{ name: 'São Paulo', timezone: 'America/Sao_Paulo' }
191+
];
192+
193+
let timezones = [...defaultTimezones];
194+
let timeFormat = '12h';
195+
196+
// Available time zones for adding
197+
const availableTimezones = [
198+
{ name: 'New York', timezone: 'America/New_York' },
199+
{ name: 'Los Angeles', timezone: 'America/Los_Angeles' },
200+
{ name: 'London', timezone: 'Europe/London' },
201+
{ name: 'Paris', timezone: 'Europe/Paris' },
202+
{ name: 'Tokyo', timezone: 'Asia/Tokyo' },
203+
{ name: 'Sydney', timezone: 'Australia/Sydney' },
204+
{ name: 'Dubai', timezone: 'Asia/Dubai' },
205+
{ name: 'Mumbai', timezone: 'Asia/Kolkata' },
206+
{ name: 'Beijing', timezone: 'Asia/Shanghai' },
207+
{ name: 'São Paulo', timezone: 'America/Sao_Paulo' },
208+
{ name: 'Moscow', timezone: 'Europe/Moscow' },
209+
{ name: 'Bangkok', timezone: 'Asia/Bangkok' },
210+
{ name: 'Singapore', timezone: 'Asia/Singapore' },
211+
{ name: 'Hong Kong', timezone: 'Asia/Hong_Kong' },
212+
{ name: 'Istanbul', timezone: 'Europe/Istanbul' },
213+
{ name: 'Mexico City', timezone: 'America/Mexico_City' },
214+
{ name: 'Toronto', timezone: 'America/Toronto' },
215+
{ name: 'UTC', timezone: 'UTC' }
216+
];
217+
218+
function formatTime(date, format) {
219+
let hours = date.getHours();
220+
const minutes = String(date.getMinutes()).padStart(2, '0');
221+
const seconds = String(date.getSeconds()).padStart(2, '0');
222+
223+
if (format === '12h') {
224+
const ampm = hours >= 12 ? 'PM' : 'AM';
225+
hours = hours % 12;
226+
hours = hours ? hours : 12;
227+
hours = String(hours).padStart(2, '0');
228+
return `${hours}:${minutes}:${seconds} ${ampm}`;
229+
} else {
230+
hours = String(hours).padStart(2, '0');
231+
return `${hours}:${minutes}:${seconds}`;
232+
}
233+
}
234+
235+
function formatDate(date) {
236+
const options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };
237+
return date.toLocaleDateString('en-US', options);
238+
}
239+
240+
function getUTCOffset(timezone) {
241+
const date = new Date();
242+
const formatter = new Intl.DateTimeFormat('en-US', {
243+
timeZone: timezone,
244+
hour12: false,
245+
hour: '2-digit',
246+
minute: '2-digit'
247+
});
248+
249+
const tzTime = new Date(formatter.format(date));
250+
const offset = date.getTime() - tzTime.getTime();
251+
const offsetHours = Math.floor(offset / (1000 * 60 * 60));
252+
const offsetMinutes = Math.floor((offset % (1000 * 60 * 60)) / (1000 * 60));
253+
254+
const sign = offsetHours >= 0 ? '+' : '-';
255+
const absHours = Math.abs(offsetHours);
256+
const absMinutes = Math.abs(offsetMinutes);
257+
258+
return `UTC ${sign}${String(absHours).padStart(2, '0')}:${String(absMinutes).padStart(2, '0')}`;
259+
}
260+
261+
function getTimeInTimezone(timezone) {
262+
const date = new Date();
263+
const utcDate = new Date(date.toLocaleString('en-US', { timeZone: 'UTC' }));
264+
const tzDate = new Date(date.toLocaleString('en-US', { timeZone: timezone }));
265+
const offset = tzDate - utcDate;
266+
return new Date(date.getTime() + offset);
267+
}
268+
269+
function renderClocks() {
270+
const grid = document.getElementById('clocksGrid');
271+
grid.innerHTML = '';
272+
273+
timezones.forEach((tz, index) => {
274+
const timeInTz = getTimeInTimezone(tz.timezone);
275+
const time = formatTime(timeInTz, timeFormat);
276+
const date = formatDate(timeInTz);
277+
const offset = getUTCOffset(tz.timezone);
278+
279+
const card = document.createElement('div');
280+
card.className = 'clock-card';
281+
card.innerHTML = `
282+
<div class="timezone-name">${tz.name}</div>
283+
<div class="time-display">${time}</div>
284+
<div class="date-display">${date}</div>
285+
<div class="utc-offset">${offset}</div>
286+
${timezones.length > 1 ? `<button onclick="removeTimezone(${index})" style="margin-top: 15px; background: #ff6b6b; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer;">Remove</button>` : ''}
287+
`;
288+
grid.appendChild(card);
289+
});
290+
}
291+
292+
function setFormat(format) {
293+
timeFormat = format;
294+
document.querySelectorAll('.format-btn').forEach(btn => btn.classList.remove('active'));
295+
event.target.classList.add('active');
296+
renderClocks();
297+
}
298+
299+
function addTimezone() {
300+
const availableNames = availableTimezones.map(tz => tz.name);
301+
const currentNames = timezones.map(tz => tz.name);
302+
const notAdded = availableTimezones.filter(tz => !currentNames.includes(tz.name));
303+
304+
if (notAdded.length === 0) {
305+
alert('All available time zones are already added!');
306+
return;
307+
}
308+
309+
const name = prompt(
310+
'Enter time zone name:\n\n' +
311+
notAdded.map((tz, i) => `${i + 1}. ${tz.name}`).join('\n')
312+
);
313+
314+
if (name) {
315+
const found = availableTimezones.find(tz => tz.name.toLowerCase() === name.toLowerCase());
316+
if (found && !timezones.find(t => t.name === found.name)) {
317+
timezones.push(found);
318+
renderClocks();
319+
} else {
320+
alert('Time zone not found or already added!');
321+
}
322+
}
323+
}
324+
325+
function removeTimezone(index) {
326+
if (timezones.length > 1) {
327+
timezones.splice(index, 1);
328+
renderClocks();
329+
}
330+
}
331+
332+
function resetTimezones() {
333+
timezones = [...defaultTimezones];
334+
renderClocks();
335+
}
336+
337+
// Initial render
338+
renderClocks();
339+
340+
// Update clocks every second
341+
setInterval(renderClocks, 1000);
342+
</script>
343+
</body>
344+
</html>

0 commit comments

Comments
 (0)