document.addEventListener("DOMContentLoaded", function () { function updateAdditionalInfo(region) { const infoContainer = document.getElementById("additional-info"); // Replace the following with actual data retrieval based on the region const aqi = "15"; const temperature = "25°C"; const humidity = "60%"; const so2 = "5"; const o3 = "35"; const co = "0.5"; const no2 = "15"; infoContainer.innerHTML = `

Additional Information - ${region}

Air Quality Index: ${aqi}
Temperature: ${temperature}
Humidity: ${humidity}
SO2: ${so2}
O3: ${o3}
CO: ${co}
NO2: ${no2}
`; } const defaultRegion = "North"; const defaultBox = document.getElementById(defaultRegion.toLowerCase()); defaultBox.classList.add('active'); const defaultAqi = "--"; // Replace with actual data retrieval updateAdditionalInfo(defaultRegion, defaultAqi); // Event listeners for each region's info-box document.getElementById("north").addEventListener("click", function () { const northAqi = "--"; // Replace with actual data retrieval updateAdditionalInfo("North", northAqi); }); document.getElementById("south").addEventListener("click", function () { const southAqi = "--"; updateAdditionalInfo("South", southAqi); }); document.getElementById("east").addEventListener("click", function () { const eastAqi = "--"; updateAdditionalInfo("East", eastAqi); }); document.getElementById("west").addEventListener("click", function () { const westAqi = "--"; updateAdditionalInfo("West", westAqi); }); document.getElementById("central").addEventListener("click", function () { const centralAqi = "--"; updateAdditionalInfo("Central", centralAqi); }); }); // Event listeners for each region's info-box document.getElementById("north").addEventListener("click", function () { updateAdditionalInfo("North"); }); document.getElementById("south").addEventListener("click", function () { updateAdditionalInfo("South"); }); document.getElementById("east").addEventListener("click", function () { updateAdditionalInfo("East"); }); document.getElementById("west").addEventListener("click", function () { updateAdditionalInfo("West"); }); document.getElementById("central").addEventListener("click", function () { updateAdditionalInfo("Central"); });