wmantly/mp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Leo
2024-01-22 16:35:06 +08:00
parent 7dceee0b79
commit 409e647646
7 changed files with 152 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
consumerWebsite/public/js/learnmore.js
View File

@ -1,28 +1,60 @@
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%";
// Replace the following with actual data retrieval based on the region
const aqi = "15";
const temperature = "25°C";
const humidity = "60%";
const pm25 = "10";
const pm10 = "20";
const so2 = "5";
const o3 = "35";
const co = "0.5";
const no2 = "15";
infoContainer.innerHTML = `
<div class="additional-info-box">
<h3>Additional Information - ${region}</h3>
<button id="downloadCsvButton">Download CSV</button>
<div class="info-item">
<span class="info-label">Air Quality Index:</span>
<span class="info-value">${aqi}</span>
</div>
<div class="info-item">
<span class="info-label">Temperature:</span>
<span class="info-value">${temperature}</span>
</div>
<div class="info-item">
<span class="info-label">Humidity:</span>
<span class="info-value">${humidity}</span>
</div>
<div class="info-item">
<span class="info-label">PM2.5:</span>
<span class="info-value">${pm25}</span>
</div>
<div class="info-item">
<span class="info-label">PM10:</span>
<span class="info-value">${pm10}</span>
</div>
<div class="info-item">
<span class="info-label">SO2:</span>
<span class="info-value">${so2}</span>
</div>
<div class="info-item">
<span class="info-label">O3:</span>
<span class="info-value">${o3}</span>
</div>
<div class="info-item">
<span class="info-label">CO:</span>
<span class="info-value">${co}</span>
</div>
<div class="info-item">
<span class="info-label">NO2:</span>
<span class="info-value">${no2}</span>
</div>
</div>
`;
infoContainer.innerHTML = `
<div class="additional-info-box">
<h3>Additional Information - ${region}</h3>
<div class="info-item">
<span class="info-label">Air Quality Index:</span>
<span class="info-value">${aqi}</span>
</div>
<div class="info-item">
<span class="info-label">Temperature:</span>
<span class="info-value">${temperature}</span>
</div>
<div class="info-item">
<span class="info-label">Humidity:</span>
<span class="info-value">${humidity}</span>
</div>
</div>
`;
// Remove the 'active' class from all info-box elements
const infoBoxes = document.querySelectorAll('.info-box');