1+
2+ //selecting all the elements to manipulate
3+ const dayElement = document . querySelector ( '.day' ) ;
4+ const monthElement = document . querySelector ( '.month' ) ;
5+ const dateElement = document . querySelector ( '.date' ) ;
6+ const yearElement = document . querySelector ( '.year' ) ;
7+ const hoursElement = document . querySelector ( '.hours' ) ;
8+ const minutesElement = document . querySelector ( '.minutes' ) ;
9+ const secondsElement = document . querySelector ( '.seconds' ) ;
10+ const periodElement = document . querySelector ( '.period' ) ;
11+ const timezoneSelectElement = document . querySelector ( '#timezone-select' ) ;
12+
13+ // List of timezones
14+ const timezones = [
15+ { name : 'India' , offset : '+0530' } ,
16+ { name : 'New York' , offset : '-0400' } ,
17+ { name : 'London' , offset : '+0100' } ,
18+ { name : 'Tokyo' , offset : '+0900' } ,
19+ { name : 'Sydney' , offset : '+1000' } ,
20+ { name : 'Paris' , offset : '+0200' } ,
21+ { name : 'Berlin' , offset : '+0200' } ,
22+ { name : 'Moscow' , offset : '+0300' } ,
23+ { name : 'Los Angeles' , offset : '-0700' } ,
24+ { name : 'Chicago' , offset : '-0500' } ,
25+ { name : 'Denver' , offset : '-0600' } ,
26+ { name : 'Phoenix' , offset : '-0700' } ,
27+ { name : 'Toronto' , offset : '-0400' } ,
28+ { name : 'Vancouver' , offset : '-0700' } ,
29+ { name : 'Mexico City' , offset : '-0500' } ,
30+ { name : 'Sao Paulo' , offset : '-0300' } ,
31+ { name : 'Buenos Aires' , offset : '-0300' } ,
32+ { name : 'Dubai' , offset : '+0400' } ,
33+ { name : 'Beijing' , offset : '+0800' } ,
34+ { name : 'Jakarta' , offset : '+0700' }
35+ // Add more timezones here
36+ ] ;
37+
38+ // Function to update the world clock with current date and time
39+ function updateClock ( ) {
40+ const now = new Date ( ) ;
41+
42+ // Get current date
43+ const day = now . toLocaleString ( 'en-US' , { weekday : 'long' } ) ;
44+ const month = now . toLocaleString ( 'en-US' , { month : 'long' } ) ;
45+ const date = now . getDate ( ) ;
46+ const year = now . getFullYear ( ) ;
47+
48+ // Get current time
49+ let hours = now . getHours ( ) ;
50+ const minutes = now . getMinutes ( ) ;
51+ const seconds = now . getSeconds ( ) ;
52+ const period = hours >= 12 ? 'PM' : 'AM' ;
53+
54+ // Adjust hours to 12-hour format
55+ hours = hours % 12 || 12 ;
56+
57+ // Update DOM elements with current values
58+ dayElement . textContent = day ;
59+ monthElement . textContent = month ;
60+ dateElement . textContent = date ;
61+ yearElement . textContent = year ;
62+ hoursElement . textContent = hours . toString ( ) . padStart ( 2 , '0' ) ;
63+ minutesElement . textContent = minutes . toString ( ) . padStart ( 2 , '0' ) ;
64+ secondsElement . textContent = seconds . toString ( ) . padStart ( 2 , '0' ) ;
65+ periodElement . textContent = period ;
66+
67+ // Schedule the next update
68+ setTimeout ( updateClock , 1000 ) ;
69+ }
70+
71+ // Populate timezone select options
72+ for ( const timezone of timezones ) {
73+ const option = document . createElement ( 'option' ) ;
74+ option . value = timezone . offset ;
75+ option . textContent = timezone . name ;
76+ timezoneSelectElement . appendChild ( option ) ;
77+ }
78+
79+ // Add event listener to handle timezone change
80+ timezoneSelectElement . addEventListener ( 'change' , ( event ) => {
81+ const offset = event . target . value ;
82+ const currentTime = new Date ( ) . getTime ( ) ;
83+ const targetTime = currentTime + ( parseInt ( offset ) * 3600000 ) ; // Offset in milliseconds
84+ const targetDate = new Date ( targetTime ) ;
85+ const timezone = timezones . find ( tz => tz . offset === offset ) ;
86+
87+ // Update DOM elements with target values
88+ dayElement . textContent = targetDate . toLocaleString ( 'en-US' , { weekday : 'long' } ) ;
89+ monthElement . textContent = targetDate . toLocaleString ( 'en-US' , { month : 'long' } ) ;
90+ dateElement . textContent = targetDate . getDate ( ) ;
91+ yearElement . textContent = targetDate . getFullYear ( ) ;
92+ hoursElement . textContent = targetDate . getHours ( ) . toString ( ) . padStart ( 2 , '0' ) ;
93+ minutesElement . textContent = targetDate . getMinutes ( ) . toString ( ) . padStart ( 2 , '0' ) ;
94+ secondsElement . textContent = targetDate . getSeconds ( ) . toString ( ) . padStart ( 2 , '0' ) ;
95+ periodElement . textContent = targetDate . getHours ( ) >= 12 ? 'PM' : 'AM' ;
96+
97+ // Display selected timezone
98+ if ( timezone ) {
99+ console . log ( `Selected timezone: ${ timezone . name } ) ;
100+ }
101+ } ) ;
102+
103+ // Start the clock
104+ updateClock ( ) ;
0 commit comments