class WorldClock { constructor() { // Initialize elements this.continentSelect = document.getElementById('continent-select'); this.countrySearch = document.getElementById('country-search'); this.countrySelect = document.getElementById('country-select'); this.regionSelect = document.getElementById('region-select'); // Selected country display elements this.selectedCountry = document.getElementById('selected-country'); this.selectedTime = document.getElementById('selected-time').querySelector('span'); this.selectedDate = document.getElementById('selected-date').querySelector('span'); this.selectedTimezone = document.getElementById('selected-timezone').querySelector('span'); this.selectedRegions = document.getElementById('selected-regions'); // Local time display elements this.localTimeDisplay = document.querySelector('.navbar2_time-clock'); this.localDateDisplay = document.querySelector('.navbar2_time-date'); // Hide icons initially const timeContainer = document.getElementById('selected-time'); const sunIcon = timeContainer.querySelector('img[src*="sun.png"]'); const moonIcon = timeContainer.querySelector('img[src*="moon.png"]'); if (sunIcon) sunIcon.style.display = 'none'; if (moonIcon) moonIcon.style.display = 'none'; // Import the countries data from the example file this.countries = [ // Countries with multiple time zones { name: 'United States', continent: 'North America', timezones: [ { name: 'Eastern Time', timezone: 'America/New_York', regions: ['New York', 'Florida', 'Pennsylvania', 'Georgia', 'Massachusetts', 'New Jersey', 'North Carolina', 'Michigan', 'Virginia'] }, { name: 'Central Time', timezone: 'America/Chicago', regions: ['Illinois', 'Texas', 'Missouri', 'Wisconsin', 'Minnesota', 'Tennessee', 'Alabama', 'Louisiana'] }, { name: 'Mountain Time', timezone: 'America/Denver', regions: ['Colorado', 'Arizona', 'New Mexico', 'Utah', 'Montana', 'Wyoming', 'Idaho (partially)'] }, { name: 'Pacific Time', timezone: 'America/Los_Angeles', regions: ['California', 'Washington', 'Oregon', 'Nevada'] }, { name: 'Alaska Time', timezone: 'America/Anchorage', regions: ['Alaska'] }, { name: 'Hawaii Time', timezone: 'Pacific/Honolulu', regions: ['Hawaii'] } ] }, { name: 'Russia', continent: 'Europe', timezones: [ { name: 'Kaliningrad Time', timezone: 'Europe/Kaliningrad', regions: ['Kaliningrad Oblast'] }, { name: 'Moscow Time', timezone: 'Europe/Moscow', regions: ['Moscow', 'Saint Petersburg', 'Rostov', 'Krasnodar', 'Volgograd'] }, { name: 'Samara Time', timezone: 'Europe/Samara', regions: ['Samara Oblast', 'Udmurtia'] }, { name: 'Yekaterinburg Time', timezone: 'Asia/Yekaterinburg', regions: ['Sverdlovsk Oblast', 'Bashkortostan', 'Chelyabinsk Oblast'] }, { name: 'Omsk Time', timezone: 'Asia/Omsk', regions: ['Omsk Oblast', 'Novosibirsk Oblast'] }, { name: 'Krasnoyarsk Time', timezone: 'Asia/Krasnoyarsk', regions: ['Krasnoyarsk Krai', 'Kemerovo Oblast', 'Khakassia'] }, { name: 'Irkutsk Time', timezone: 'Asia/Irkutsk', regions: ['Irkutsk Oblast', 'Buryatia'] }, { name: 'Yakutsk Time', timezone: 'Asia/Yakutsk', regions: ['Sakha Republic (Western)'] }, { name: 'Vladivostok Time', timezone: 'Asia/Vladivostok', regions: ['Primorsky Krai', 'Khabarovsk Krai'] }, { name: 'Magadan Time', timezone: 'Asia/Magadan', regions: ['Magadan Oblast'] }, { name: 'Kamchatka Time', timezone: 'Asia/Kamchatka', regions: ['Kamchatka Krai', 'Chukotka'] } ] }, { name: 'Canada', continent: 'North America', timezones: [ { name: 'Newfoundland Time', timezone: 'America/St_Johns', regions: ['Newfoundland and Labrador'] }, { name: 'Atlantic Time', timezone: 'America/Halifax', regions: ['Nova Scotia', 'New Brunswick', 'Prince Edward Island', 'Eastern Quebec (Gaspé)'] }, { name: 'Eastern Time', timezone: 'America/Toronto', regions: ['Ontario', 'Quebec', 'Nunavut (part)'] }, { name: 'Central Time', timezone: 'America/Winnipeg', regions: ['Manitoba', 'Saskatchewan', 'Northwest Territories (part)', 'Nunavut (part)'] }, { name: 'Mountain Time', timezone: 'America/Edmonton', regions: ['Alberta', 'British Columbia (Eastern)', 'Northwest Territories (part)'] }, { name: 'Pacific Time', timezone: 'America/Vancouver', regions: ['British Columbia', 'Yukon'] } ] }, { name: 'Australia', continent: 'Oceania', timezones: [ { name: 'Eastern Time', timezone: 'Australia/Sydney', regions: ['New South Wales', 'Victoria', 'Australian Capital Territory'] }, { name: 'Central Time', timezone: 'Australia/Adelaide', regions: ['South Australia', 'Northern Territory (southeastern)'] }, { name: 'Western Time', timezone: 'Australia/Perth', regions: ['Western Australia'] }, { name: 'Queensland Time', timezone: 'Australia/Brisbane', regions: ['Queensland'] }, { name: 'Darwin Time', timezone: 'Australia/Darwin', regions: ['Northern Territory'] }, { name: 'Tasmania Time', timezone: 'Australia/Hobart', regions: ['Tasmania'] } ] }, { name: 'Brazil', continent: 'South America', timezones: [ { name: 'Brasilia Time', timezone: 'America/Sao_Paulo', regions: ['São Paulo', 'Rio de Janeiro', 'Minas Gerais', 'Espírito Santo', 'Goiás', 'Paraná', 'Santa Catarina', 'Rio Grande do Sul'] }, { name: 'Amazon Time', timezone: 'America/Manaus', regions: ['Amazonas', 'Pará', 'Roraima', 'Rondônia', 'Mato Grosso'] }, { name: 'Fernando de Noronha Time', timezone: 'America/Noronha', regions: ['Fernando de Noronha', 'Trindade'] }, { name: 'Acre Time', timezone: 'America/Rio_Branco', regions: ['Acre'] } ] }, { name: 'Indonesia', continent: 'Asia', timezones: [ { name: 'Western Indonesian Time', timezone: 'Asia/Jakarta', regions: ['Java', 'Sumatra', 'West Kalimantan', 'Central Kalimantan'] }, { name: 'Central Indonesian Time', timezone: 'Asia/Makassar', regions: ['Sulawesi', 'Bali', 'Nusa Tenggara', 'East Kalimantan', 'South Kalimantan'] }, { name: 'Eastern Indonesian Time', timezone: 'Asia/Jayapura', regions: ['Papua', 'Maluku', 'North Maluku'] } ] }, { name: 'Mexico', continent: 'North America', timezones: [ { name: 'Central Time', timezone: 'America/Mexico_City', regions: ['Mexico City', 'Veracruz', 'Oaxaca', 'Puebla', 'Guadalajara', 'Monterrey'] }, { name: 'Pacific Time', timezone: 'America/Tijuana', regions: ['Baja California', 'Tijuana'] }, { name: 'Mountain Time', timezone: 'America/Chihuahua', regions: ['Chihuahua', 'Sonora', 'Sinaloa'] } ] }, // Single timezone countries - Africa { name: 'Algeria', timezone: 'Africa/Algiers', continent: 'Africa' }, { name: 'Angola', timezone: 'Africa/Luanda', continent: 'Africa' }, { name: 'Benin', timezone: 'Africa/Porto-Novo', continent: 'Africa' }, { name: 'Botswana', timezone: 'Africa/Gaborone', continent: 'Africa' }, { name: 'Burkina Faso', timezone: 'Africa/Ouagadougou', continent: 'Africa' }, { name: 'Burundi', timezone: 'Africa/Bujumbura', continent: 'Africa' }, { name: 'Cameroon', timezone: 'Africa/Douala', continent: 'Africa' }, { name: 'Cape Verde', timezone: 'Atlantic/Cape_Verde', continent: 'Africa' }, { name: 'Central African Republic', timezone: 'Africa/Bangui', continent: 'Africa' }, { name: 'Chad', timezone: 'Africa/Ndjamena', continent: 'Africa' }, { name: 'Comoros', timezone: 'Indian/Comoro', continent: 'Africa' }, { name: 'Congo', timezone: 'Africa/Brazzaville', continent: 'Africa' }, { name: 'DR Congo', timezone: 'Africa/Kinshasa', continent: 'Africa' }, { name: 'Djibouti', timezone: 'Africa/Djibouti', continent: 'Africa' }, { name: 'Egypt', timezone: 'Africa/Cairo', continent: 'Africa' }, { name: 'Equatorial Guinea', timezone: 'Africa/Malabo', continent: 'Africa' }, { name: 'Eritrea', timezone: 'Africa/Asmara', continent: 'Africa' }, { name: 'Ethiopia', timezone: 'Africa/Addis_Ababa', continent: 'Africa' }, { name: 'Gabon', timezone: 'Africa/Libreville', continent: 'Africa' }, { name: 'Gambia', timezone: 'Africa/Banjul', continent: 'Africa' }, { name: 'Ghana', timezone: 'Africa/Accra', continent: 'Africa' }, { name: 'Guinea', timezone: 'Africa/Conakry', continent: 'Africa' }, { name: 'Guinea-Bissau', timezone: 'Africa/Bissau', continent: 'Africa' }, { name: 'Ivory Coast', timezone: 'Africa/Abidjan', continent: 'Africa' }, { name: 'Kenya', timezone: 'Africa/Nairobi', continent: 'Africa' }, { name: 'Lesotho', timezone: 'Africa/Maseru', continent: 'Africa' }, { name: 'Liberia', timezone: 'Africa/Monrovia', continent: 'Africa' }, { name: 'Libya', timezone: 'Africa/Tripoli', continent: 'Africa' }, { name: 'Madagascar', timezone: 'Indian/Antananarivo', continent: 'Africa' }, { name: 'Malawi', timezone: 'Africa/Blantyre', continent: 'Africa' }, { name: 'Mali', timezone: 'Africa/Bamako', continent: 'Africa' }, { name: 'Mauritania', timezone: 'Africa/Nouakchott', continent: 'Africa' }, { name: 'Mauritius', timezone: 'Indian/Mauritius', continent: 'Africa' }, { name: 'Morocco', timezone: 'Africa/Casablanca', continent: 'Africa' }, { name: 'Mozambique', timezone: 'Africa/Maputo', continent: 'Africa' }, { name: 'Namibia', timezone: 'Africa/Windhoek', continent: 'Africa' }, { name: 'Niger', timezone: 'Africa/Niamey', continent: 'Africa' }, { name: 'Nigeria', timezone: 'Africa/Lagos', continent: 'Africa' }, { name: 'Rwanda', timezone: 'Africa/Kigali', continent: 'Africa' }, { name: 'Sao Tome and Principe', timezone: 'Africa/Sao_Tome', continent: 'Africa' }, { name: 'Senegal', timezone: 'Africa/Dakar', continent: 'Africa' }, { name: 'Seychelles', timezone: 'Indian/Mahe', continent: 'Africa' }, { name: 'Sierra Leone', timezone: 'Africa/Freetown', continent: 'Africa' }, { name: 'Somalia', timezone: 'Africa/Mogadishu', continent: 'Africa' }, { name: 'South Africa', timezone: 'Africa/Johannesburg', continent: 'Africa' }, { name: 'South Sudan', timezone: 'Africa/Juba', continent: 'Africa' }, { name: 'Sudan', timezone: 'Africa/Khartoum', continent: 'Africa' }, { name: 'Swaziland', timezone: 'Africa/Mbabane', continent: 'Africa' }, { name: 'Tanzania', timezone: 'Africa/Dar_es_Salaam', continent: 'Africa' }, { name: 'Togo', timezone: 'Africa/Lome', continent: 'Africa' }, { name: 'Tunisia', timezone: 'Africa/Tunis', continent: 'Africa' }, { name: 'Uganda', timezone: 'Africa/Kampala', continent: 'Africa' }, { name: 'Zambia', timezone: 'Africa/Lusaka', continent: 'Africa' }, { name: 'Zimbabwe', timezone: 'Africa/Harare', continent: 'Africa' }, // Single timezone countries - Asia { name: 'Afghanistan', timezone: 'Asia/Kabul', continent: 'Asia' }, { name: 'Armenia', timezone: 'Asia/Yerevan', continent: 'Asia' }, { name: 'Azerbaijan', timezone: 'Asia/Baku', continent: 'Asia' }, { name: 'Bahrain', timezone: 'Asia/Bahrain', continent: 'Asia' }, { name: 'Bangladesh', timezone: 'Asia/Dhaka', continent: 'Asia' }, { name: 'Bhutan', timezone: 'Asia/Thimphu', continent: 'Asia' }, { name: 'Brunei', timezone: 'Asia/Brunei', continent: 'Asia' }, { name: 'Cambodia', timezone: 'Asia/Phnom_Penh', continent: 'Asia' }, { name: 'China', timezone: 'Asia/Shanghai', continent: 'Asia' }, { name: 'Cyprus', timezone: 'Asia/Nicosia', continent: 'Asia' }, { name: 'Georgia', timezone: 'Asia/Tbilisi', continent: 'Asia' }, { name: 'Hong Kong', timezone: 'Asia/Hong_Kong', continent: 'Asia' }, { name: 'India', timezone: 'Asia/Kolkata', continent: 'Asia' }, { name: 'Iran', timezone: 'Asia/Tehran', continent: 'Asia' }, { name: 'Iraq', timezone: 'Asia/Baghdad', continent: 'Asia' }, { name: 'Israel', timezone: 'Asia/Jerusalem', continent: 'Asia' }, { name: 'Japan', timezone: 'Asia/Tokyo', continent: 'Asia' }, { name: 'Jordan', timezone: 'Asia/Amman', continent: 'Asia' }, { name: 'Kazakhstan', timezone: 'Asia/Almaty', continent: 'Asia' }, { name: 'Kuwait', timezone: 'Asia/Kuwait', continent: 'Asia' }, { name: 'Kyrgyzstan', timezone: 'Asia/Bishkek', continent: 'Asia' }, { name: 'Laos', timezone: 'Asia/Vientiane', continent: 'Asia' }, { name: 'Lebanon', timezone: 'Asia/Beirut', continent: 'Asia' }, { name: 'Macau', timezone: 'Asia/Macau', continent: 'Asia' }, { name: 'Malaysia', timezone: 'Asia/Kuala_Lumpur', continent: 'Asia' }, { name: 'Maldives', timezone: 'Indian/Maldives', continent: 'Asia' }, { name: 'Mongolia', timezone: 'Asia/Ulaanbaatar', continent: 'Asia' }, { name: 'Myanmar', timezone: 'Asia/Yangon', continent: 'Asia' }, { name: 'Nepal', timezone: 'Asia/Kathmandu', continent: 'Asia' }, { name: 'North Korea', timezone: 'Asia/Pyongyang', continent: 'Asia' }, { name: 'Oman', timezone: 'Asia/Muscat', continent: 'Asia' }, { name: 'Pakistan', timezone: 'Asia/Karachi', continent: 'Asia' }, { name: 'Palestine', timezone: 'Asia/Gaza', continent: 'Asia' }, { name: 'Philippines', timezone: 'Asia/Manila', continent: 'Asia' }, { name: 'Qatar', timezone: 'Asia/Qatar', continent: 'Asia' }, { name: 'Saudi Arabia', timezone: 'Asia/Riyadh', continent: 'Asia' }, { name: 'Singapore', timezone: 'Asia/Singapore', continent: 'Asia' }, { name: 'South Korea', timezone: 'Asia/Seoul', continent: 'Asia' }, { name: 'Sri Lanka', timezone: 'Asia/Colombo', continent: 'Asia' }, { name: 'Syria', timezone: 'Asia/Damascus', continent: 'Asia' }, { name: 'Taiwan', timezone: 'Asia/Taipei', continent: 'Asia' }, { name: 'Tajikistan', timezone: 'Asia/Dushanbe', continent: 'Asia' }, { name: 'Thailand', timezone: 'Asia/Bangkok', continent: 'Asia' }, { name: 'Timor-Leste', timezone: 'Asia/Dili', continent: 'Asia' }, { name: 'Turkey', timezone: 'Europe/Istanbul', continent: 'Asia' }, { name: 'Turkmenistan', timezone: 'Asia/Ashgabat', continent: 'Asia' }, { name: 'United Arab Emirates', timezone: 'Asia/Dubai', continent: 'Asia' }, { name: 'Uzbekistan', timezone: 'Asia/Tashkent', continent: 'Asia' }, { name: 'Vietnam', timezone: 'Asia/Ho_Chi_Minh', continent: 'Asia' }, { name: 'Yemen', timezone: 'Asia/Aden', continent: 'Asia' }, // Single timezone countries - Europe { name: 'Albania', timezone: 'Europe/Tirane', continent: 'Europe' }, { name: 'Andorra', timezone: 'Europe/Andorra', continent: 'Europe' }, { name: 'Austria', timezone: 'Europe/Vienna', continent: 'Europe' }, { name: 'Belarus', timezone: 'Europe/Minsk', continent: 'Europe' }, { name: 'Belgium', timezone: 'Europe/Brussels', continent: 'Europe' }, { name: 'Bosnia and Herzegovina', timezone: 'Europe/Sarajevo', continent: 'Europe' }, { name: 'Bulgaria', timezone: 'Europe/Sofia', continent: 'Europe' }, { name: 'Croatia', timezone: 'Europe/Zagreb', continent: 'Europe' }, { name: 'Czech Republic', timezone: 'Europe/Prague', continent: 'Europe' }, { name: 'Denmark', timezone: 'Europe/Copenhagen', continent: 'Europe' }, { name: 'Estonia', timezone: 'Europe/Tallinn', continent: 'Europe' }, { name: 'Finland', timezone: 'Europe/Helsinki', continent: 'Europe' }, { name: 'France', timezone: 'Europe/Paris', continent: 'Europe' }, { name: 'Germany', timezone: 'Europe/Berlin', continent: 'Europe' }, { name: 'Greece', timezone: 'Europe/Athens', continent: 'Europe' }, { name: 'Hungary', timezone: 'Europe/Budapest', continent: 'Europe' }, { name: 'Iceland', timezone: 'Atlantic/Reykjavik', continent: 'Europe' }, { name: 'Ireland', timezone: 'Europe/Dublin', continent: 'Europe' }, { name: 'Italy', timezone: 'Europe/Rome', continent: 'Europe' }, { name: 'Latvia', timezone: 'Europe/Riga', continent: 'Europe' }, { name: 'Liechtenstein', timezone: 'Europe/Vaduz', continent: 'Europe' }, { name: 'Lithuania', timezone: 'Europe/Vilnius', continent: 'Europe' }, { name: 'Luxembourg', timezone: 'Europe/Luxembourg', continent: 'Europe' }, { name: 'Malta', timezone: 'Europe/Malta', continent: 'Europe' }, { name: 'Moldova', timezone: 'Europe/Chisinau', continent: 'Europe' }, { name: 'Monaco', timezone: 'Europe/Monaco', continent: 'Europe' }, { name: 'Montenegro', timezone: 'Europe/Podgorica', continent: 'Europe' }, { name: 'Netherlands', timezone: 'Europe/Amsterdam', continent: 'Europe' }, { name: 'North Macedonia', timezone: 'Europe/Skopje', continent: 'Europe' }, { name: 'Norway', timezone: 'Europe/Oslo', continent: 'Europe' }, { name: 'Poland', timezone: 'Europe/Warsaw', continent: 'Europe' }, { name: 'Portugal', timezone: 'Europe/Lisbon', continent: 'Europe' }, { name: 'Romania', timezone: 'Europe/Bucharest', continent: 'Europe' }, { name: 'San Marino', timezone: 'Europe/San_Marino', continent: 'Europe' }, { name: 'Serbia', timezone: 'Europe/Belgrade', continent: 'Europe' }, { name: 'Slovakia', timezone: 'Europe/Bratislava', continent: 'Europe' }, { name: 'Slovenia', timezone: 'Europe/Ljubljana', continent: 'Europe' }, { name: 'Spain', timezone: 'Europe/Madrid', continent: 'Europe' }, { name: 'Sweden', timezone: 'Europe/Stockholm', continent: 'Europe' }, { name: 'Switzerland', timezone: 'Europe/Zurich', continent: 'Europe' }, { name: 'Ukraine', timezone: 'Europe/Kiev', continent: 'Europe' }, { name: 'United Kingdom', timezone: 'Europe/London', continent: 'Europe' }, { name: 'Vatican City', timezone: 'Europe/Vatican', continent: 'Europe' }, // Single timezone countries - North America { name: 'Antigua and Barbuda', timezone: 'America/Antigua', continent: 'North America' }, { name: 'Bahamas', timezone: 'America/Nassau', continent: 'North America' }, { name: 'Barbados', timezone: 'America/Barbados', continent: 'North America' }, { name: 'Belize', timezone: 'America/Belize', continent: 'North America' }, { name: 'Costa Rica', timezone: 'America/Costa_Rica', continent: 'North America' }, { name: 'Cuba', timezone: 'America/Havana', continent: 'North America' }, { name: 'Dominica', timezone: 'America/Dominica', continent: 'North America' }, { name: 'Dominican Republic', timezone: 'America/Santo_Domingo', continent: 'North America' }, { name: 'El Salvador', timezone: 'America/El_Salvador', continent: 'North America' }, { name: 'Grenada', timezone: 'America/Grenada', continent: 'North America' }, { name: 'Guatemala', timezone: 'America/Guatemala', continent: 'North America' }, { name: 'Haiti', timezone: 'America/Port-au-Prince', continent: 'North America' }, { name: 'Honduras', timezone: 'America/Tegucigalpa', continent: 'North America' }, { name: 'Jamaica', timezone: 'America/Jamaica', continent: 'North America' }, { name: 'Nicaragua', timezone: 'America/Managua', continent: 'North America' }, { name: 'Panama', timezone: 'America/Panama', continent: 'North America' }, { name: 'Saint Kitts and Nevis', timezone: 'America/St_Kitts', continent: 'North America' }, { name: 'Saint Lucia', timezone: 'America/St_Lucia', continent: 'North America' }, { name: 'Saint Vincent and the Grenadines', timezone: 'America/St_Vincent', continent: 'North America' }, { name: 'Trinidad and Tobago', timezone: 'America/Port_of_Spain', continent: 'North America' }, // Single timezone countries - South America { name: 'Argentina', timezone: 'America/Argentina/Buenos_Aires', continent: 'South America' }, { name: 'Bolivia', timezone: 'America/La_Paz', continent: 'South America' }, { name: 'Chile', timezone: 'America/Santiago', continent: 'South America' }, { name: 'Colombia', timezone: 'America/Bogota', continent: 'South America' }, { name: 'Ecuador', timezone: 'America/Guayaquil', continent: 'South America' }, { name: 'Guyana', timezone: 'America/Guyana', continent: 'South America' }, { name: 'Paraguay', timezone: 'America/Asuncion', continent: 'South America' }, { name: 'Peru', timezone: 'America/Lima', continent: 'South America' }, { name: 'Suriname', timezone: 'America/Paramaribo', continent: 'South America' }, { name: 'Uruguay', timezone: 'America/Montevideo', continent: 'South America' }, { name: 'Venezuela', timezone: 'America/Caracas', continent: 'South America' }, // Single timezone countries - Oceania { name: 'Fiji', timezone: 'Pacific/Fiji', continent: 'Oceania' }, { name: 'Kiribati', timezone: 'Pacific/Tarawa', continent: 'Oceania' }, { name: 'Marshall Islands', timezone: 'Pacific/Majuro', continent: 'Oceania' }, { name: 'Micronesia', timezone: 'Pacific/Chuuk', continent: 'Oceania' }, { name: 'Nauru', timezone: 'Pacific/Nauru', continent: 'Oceania' }, { name: 'New Zealand', timezone: 'Pacific/Auckland', continent: 'Oceania' }, { name: 'Palau', timezone: 'Pacific/Palau', continent: 'Oceania' }, { name: 'Papua New Guinea', timezone: 'Pacific/Port_Moresby', continent: 'Oceania' }, { name: 'Samoa', timezone: 'Pacific/Apia', continent: 'Oceania' }, { name: 'Solomon Islands', timezone: 'Pacific/Guadalcanal', continent: 'Oceania' }, { name: 'Tonga', timezone: 'Pacific/Tongatapu', continent: 'Oceania' }, { name: 'Tuvalu', timezone: 'Pacific/Funafuti', continent: 'Oceania' }, { name: 'Vanuatu', timezone: 'Pacific/Efate', continent: 'Oceania' } ]; this.init(); } init() { this.populateContinents(); this.setupEventListeners(); this.updateLocalTime(); } populateContinents() { const continents = [...new Set(this.countries.map(country => country.continent))]; continents.sort(); this.continentSelect.innerHTML = ''; continents.forEach(continent => { const option = document.createElement('option'); option.value = continent; option.textContent = continent; this.continentSelect.appendChild(option); }); this.populateCountries(); } populateCountries() { const selectedContinent = this.continentSelect.value; const searchTerm = this.countrySearch.value.toLowerCase(); let filteredCountries = this.countries; if (selectedContinent) { filteredCountries = filteredCountries.filter(country => country.continent === selectedContinent); } this.countrySelect.innerHTML = ''; let totalOptions = 0; filteredCountries.forEach(country => { if (Array.isArray(country.timezones)) { // Country has multiple time zones const matchingTimezones = country.timezones.filter(tz => { if (!searchTerm) return true; // Check if timezone name or regions match the search term return tz.name.toLowerCase().includes(searchTerm) || tz.regions.some(region => region.toLowerCase().includes(searchTerm)); }); if (matchingTimezones.length > 0) { const optgroup = document.createElement('optgroup'); optgroup.label = country.name; matchingTimezones.forEach(tz => { const option = document.createElement('option'); option.value = tz.timezone; option.textContent = `${country.name} - ${tz.name}`; option.setAttribute('data-regions', tz.regions.join(', ')); optgroup.appendChild(option); totalOptions++; }); this.countrySelect.appendChild(optgroup); } } else { // Country has a single time zone if (!searchTerm || country.name.toLowerCase().includes(searchTerm)) { const option = document.createElement('option'); option.value = country.timezone; option.textContent = country.name; this.countrySelect.appendChild(option); totalOptions++; } } }); // If no results found, show a message if (totalOptions === 0) { const option = document.createElement('option'); option.disabled = true; option.textContent = 'No matches found'; this.countrySelect.appendChild(option); } // If only one result found, select it automatically else if (totalOptions === 1) { const firstOption = this.countrySelect.querySelector('option:not([disabled])'); if (firstOption) { firstOption.selected = true; this.updateSelectedTime(); } } } setupEventListeners() { this.continentSelect.addEventListener('change', () => { this.populateCountries(); this.clearSelection(); }); this.countrySearch.addEventListener('input', () => { this.populateCountries(); this.clearSelection(); }); this.countrySelect.addEventListener('change', () => { if (this.countrySelect.value) { this.updateSelectedTime(); } else { this.clearSelection(); } }); // Update time every second setInterval(() => { this.updateLocalTime(); if (this.countrySelect.value) { this.updateSelectedTime(); } }, 1000); } clearSelection() { this.selectedCountry.textContent = 'Select a country'; this.selectedTime.textContent = '00:00:00'; this.selectedDate.textContent = 'Loading...'; this.selectedTimezone.textContent = 'UTC'; this.selectedRegions.textContent = ''; } updateLocalTime() { const now = new Date(); const timeString = now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', second: '2-digit', hour12: true }); const dateString = now.toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' }); this.localTimeDisplay.textContent = timeString; this.localDateDisplay.textContent = dateString; } updateSelectedTime() { const selectedTimezone = this.countrySelect.value; if (!selectedTimezone) { // Hide icons if no timezone is selected const timeContainer = document.getElementById('selected-time'); const sunIcon = timeContainer.querySelector('img[src*="sun.png"]'); const moonIcon = timeContainer.querySelector('img[src*="moon.png"]'); if (sunIcon) sunIcon.style.display = 'none'; if (moonIcon) moonIcon.style.display = 'none'; return; } const now = new Date(); const timeString = now.toLocaleTimeString('en-US', { timeZone: selectedTimezone, hour: 'numeric', minute: '2-digit', second: '2-digit', hour12: true }); const dateString = now.toLocaleDateString('en-US', { timeZone: selectedTimezone, day: 'numeric', month: 'short', year: 'numeric' }); // Get the selected option's text and regions const selectedOption = this.countrySelect.options[this.countrySelect.selectedIndex]; const displayName = selectedOption.textContent; const regions = selectedOption.getAttribute('data-regions'); this.selectedCountry.textContent = displayName; this.selectedTime.textContent = timeString; this.selectedDate.textContent = dateString; this.selectedTimezone.textContent = selectedTimezone; if (regions) { this.selectedRegions.textContent = `Regions: ${regions}`; this.selectedRegions.style.display = 'block'; } else { this.selectedRegions.style.display = 'none'; } // Update sun/moon icons based on time of day const timeContainer = document.getElementById('selected-time'); const sunIcon = timeContainer.querySelector('img[src*="sun.png"]'); const moonIcon = timeContainer.querySelector('img[src*="moon.png"]'); // Get the hour in 24-hour format for the selected timezone const hour = now.toLocaleTimeString('en-US', { timeZone: selectedTimezone, hour: '2-digit', hour12: false }); // Show sun for 6 AM to 6 PM, moon for 6 PM to 6 AM const isDaytime = hour >= 6 && hour < 18; if (sunIcon) sunIcon.style.display = isDaytime ? 'inline-block' : 'none'; if (moonIcon) moonIcon.style.display = isDaytime ? 'none' : 'inline-block'; } } // Initialize the WorldClock when the DOM is loaded document.addEventListener('DOMContentLoaded', () => { new WorldClock(); });