Alert Fenster

[heyhey83]

Ich danke dir für die hilfe, habe das ein wenig anders gelöst und es funktioniert sehr gut.

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);
    }
    // Open dialog if AQI has reached 100:
    if (aqi > 101) {
         document.getElementById("alert").showModal();
    }
      document.getElementById("close-alert").addEventListener("click", () => {
            document.getElementById("alert").close();
    });
  }
  // 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();

in der index.html

Code:

  <script>
  $( function() {
    $( "#alert" ).dialog({
      {
        effect: "blind",
        duration: 1000  
      },
      hide: {
        effect: "explode",
        duration: 1000
      }    
      
    });

    {
      parent.$( "#alert" ).dialog( "open" );
    });
  } );
  </script>

und in der haupt html

Code:

<dialog class="alert-dialog" id="alert" style="position: absolute;height: 465px;width: 845px;top: 50.3906px;left: 50px;min-height: 103.812px;max-height: none;">
         <button class="alert-button" id="close-alert">X</button>
        <link rel="stylesheet" href="circlealert/jquery-ui.css">
      <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
   <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
       <iframe src="circlealert/index.html" style="border:0px none;" name="alert" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="406px" width="810px" allowfullscreen></iframe>
   
</dialog>

Ich werde bei ein anderen Thema noch mal deine hilfe benötigen, da öffne ich aber ein neues thema.