Air Quality Dashboard
0
...
Main Pollutants (µg/m³)
Health Recommendations
Air Quality Forecast
${data.current.pm25}
PM10
${data.current.pm10}
O3
${data.current.o3}
NO2
${data.current.no2}
SO2
${data.current.so2}
CO
${data.current.co}
${f.day}
${f.aqi}
${forecastAqiInfo.category}
`;
forecastGrid.appendChild(card);
});
}
// --- EVENT LISTENERS & NAVIGATION ---
function switchTab(tabId) {
activeTabIndex = parseInt(tabId);
document.querySelectorAll('.aq-tab-button').forEach(btn => btn.classList.toggle('active', btn.dataset.tab === tabId));
document.querySelectorAll('.aq-tab-pane').forEach(pane => pane.classList.toggle('active', pane.id === `tab-pane-${tabId}`));
updateNavButtons();
}
function updateNavButtons() {
document.getElementById('prev-btn').disabled = activeTabIndex === 0;
document.getElementById('next-btn').disabled = activeTabIndex === 1;
}
function attachEventListeners() {
citySelectEl.addEventListener('change', (e) => render(e.target.value));
document.querySelectorAll('.aq-tab-button').forEach(button => button.addEventListener('click', (e) => switchTab(e.currentTarget.dataset.tab)));
document.getElementById('prev-btn').addEventListener('click', () => switchTab('0'));
document.getElementById('next-btn').addEventListener('click', () => switchTab('1'));
document.getElementById('download-pdf-btn').addEventListener('click', generatePdf);
}
// --- PDF GENERATION ---
function generatePdf() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const city = citySelectEl.value;
const data = airQualityData[city];
const aqiInfo = getAqiInfo(data.current.aqi);
doc.setFontSize(18);
doc.text(`Air Quality Report for ${city}`, 14, 22);
doc.setFontSize(12);
doc.text(`Current AQI: ${data.current.aqi} (${aqiInfo.category})`, 14, 35);
doc.text("Health Recommendation: " + aqiInfo.message, 14, 45, { maxWidth: 180 });
doc.autoTable({
startY: 60,
head: [['Pollutant', 'Value (µg/m³ unless stated)']],
body: [
['PM2.5', data.current.pm25], ['PM10', data.current.pm10], ['Ozone (O3)', data.current.o3],
['Nitrogen Dioxide (NO2)', data.current.no2], ['Sulphur Dioxide (SO2)', data.current.so2], ['Carbon Monoxide (CO)', data.current.co]
]
});
doc.autoTable({
startY: doc.lastAutoTable.finalY + 10,
head: [['5-Day Forecast', 'Projected AQI']],
body: data.forecast.map(f => [f.day, f.aqi])
});
doc.save(`Air_Quality_Report_${city.replace(', ','_')}.pdf`);
}
initialize();
});