04.05.2024, 14:53
Hallo ihr Lieben, ich habe mal eine frage und zwar habe ich eine AQI Partikel Anzeige und will nun wenn es ab 100 ist das es dann eine Meldung gibt wie kann ich das realisiern?
Am besten wäre es mir das es als modales Popup anzeigt.
Ich danke euch jetzt schon mal für eure hilfe.
Am besten wäre es mir das es als modales Popup anzeigt.
Code:
const currentAqi = document.getElementById("current-aqi");
const indicator = document.getElementById("indicator");
// API key
const key = "a442b81f-81f2-42a6-a08a-ac4796a8d4cb";
// Geolocation coordinates
let latitude;
let longitude;
// Function to update geolocation
function updateGeolocation(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
}
// Check if geolocation is available
function checkGeolocation() {
if ("geolocation" in navigator) {
// Get the current geolocation
navigator.geolocation.getCurrentPosition(updateGeolocation);
} else {
console.log("Geolocation is not available.");
}
}
// Fetch data from the API
function fetchData() {
const apiUrl = `https://api.airvisual.com/v2/nearest_city?lat=${latitude}&lon=${longitude}&key=${key}`;
// Fetch data from the API
fetch(apiUrl).then(handleResponse).then(processData).catch(handleError);
}
// Handle response from API
function handleResponse(response) {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json(); // Parse the response as JSON
}
// Process data and update values
function processData(data) {
const calculateValue = (aqi) => (aqi / 500) * 350 + 5;
let aqi = 0;
let result = calculateValue(aqi);
let intervalId;
// Update AQI values and rotation
function updateValues() {
console.log(`AQI: ${aqi}, DEG: ${result}`);
// Update the AQI display using SVG code
currentAqi.innerHTML = `${aqi}<br>`;
// Update the rotation of the indicator
indicator.style.rotate = `${result}deg`;
// Increment AQI and calculate corresponding rotation
aqi += 1;
result = calculateValue(aqi);
// Check if the target AQI has been reached
if (aqi > data.data.current.pollution.aqius) {
clearInterval(intervalId);
}
}
// Set interval for updating values
intervalId = setInterval(updateValues, 100);
}
// Handle errors during data fetching
function handleError(error) {
console.error("Fetch error:", error);
}
// Initiate data retrieval and updates
function initializeApp() {
checkGeolocation();
fetchData();
}
// Call the initializeApp function
initializeApp();Code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - AQI Particle Matter 2.5 (Current Location)</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./particle/style.css">
<meta http-equiv="refresh" content="1800">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="bg">
<div id="meter">
<h1 id="current-aqi">---</h1>
<p>
<!--PM (Particle Matter) SVG-->
<svg height="15px" viewBox="0 0 315 359" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="PM">
<circle id="Ellipse 1" cx="158" cy="27" r="27" />
<circle id="Ellipse 2" cx="222" cy="68" r="27" />
<circle id="Ellipse 3" cx="288" cy="109" r="27" />
<circle id="Ellipse 4" cx="92" cy="67" r="27" />
<circle id="Ellipse 5" cx="27" cy="109" r="27" />
<circle id="Ellipse 6" cx="92.5" cy="141.5" r="26.5" />
<circle id="Ellipse 7" cx="157" cy="101" r="27" />
<circle id="Ellipse 8" cx="157.5" cy="174.5" r="26.5" />
<circle id="Ellipse 9" cx="223" cy="142" r="26" />
<circle id="Ellipse 10" cx="27" cy="178" r="21" />
<circle id="Ellipse 11" cx="92" cy="210" r="21" />
<circle id="Ellipse 12" cx="157" cy="243" r="21" />
<circle id="Ellipse 13" cx="223" cy="210" r="21" />
<circle id="Ellipse 14" cx="288" cy="178" r="21" />
<circle id="Ellipse 15" cx="288" cy="236" r="16" />
<circle id="Ellipse 16" cx="223" cy="268" r="16" />
<circle id="Ellipse 17" cx="157" cy="301" r="16" />
<circle id="Ellipse 18" cx="92" cy="268" r="16" />
<circle id="Ellipse 19" cx="27" cy="236" r="16" />
<circle id="Ellipse 20" cx="27.5" cy="282.5" r="10.5" />
<circle id="Ellipse 21" cx="92.5" cy="315.5" r="10.5" />
<circle id="Ellipse 22" cx="157.5" cy="348.5" r="10.5" />
<circle id="Ellipse 23" cx="222.5" cy="315.5" r="10.5" />
<circle id="Ellipse 24" cx="288.5" cy="282.5" r="10.5" />
</g>
</svg> AQI</p>
<div id="indicator"></div>
</div>
</div>
<!-- partial -->
<script src="./particle/script.js"></script>
</body>
</html>