How can I fetch information from open meteo

[Nikolas Brodeur-Amigo]

I'm making a weather app and I'm trying to fetch information from open-meteo.com does someone know how to do this.

 

[VBService]

Did you try something like that?
[ code on-line ]

<style>
  * {
    box-sizing: border-box;
  }
  :root {
    --icon-color: yellow;
    --color-gradient-top-value: 55;
    --color-gradient-bottom-value: 45;
  }
  html,
  body {
    margin: 1rem;
    padding: 0;
  }
  .weather-card {
    --color-gradient-top: hsl(240, 100%, calc(var(--color-gradient-top-value) * 1%));
    --color-gradient-bottom: hsl(240, 100%, calc(var(--color-gradient-bottom-value) * 1%));
    position: relative;
    width: 250px;
    aspect-ratio: 1;
    background-image: linear-gradient(to bottom, var(--color-gradient-top) 30%, var(--color-gradient-bottom));
    border-radius: .5rem;
    outline: 5px double var(--color-gradient-top);
    outline-offset: .15rem;
  }
  .weather-card .icon {
    position: absolute;
    top: .5rem;
    left: 1rem;
    font-size: 10rem;
    color: var(--icon-color);
    z-index: 1;
  }
  .weather-card .icon i {
    text-shadow: 0px 0px 15px black;
  }
  .weather-card .city-name {
    position: absolute;
    bottom: 4.4rem;
    left: 1.6rem;
    font-size: 3.6rem;
    font-weight: bolder;
    font-family: system-ui, monospace;
    color: limegreen;
    text-shadow: 0px 0px 15px darkgreen, 0px 0px 20px black;
    z-index: 3;
  }
  .weather-card .temperature {
    position: absolute;
    bottom: .5rem;
    left: 3rem;
    font-size: 3.5rem;
    font-weight: bolder;
    font-family: system-ui, monospace;
    color: orange;
    text-shadow: 0px 0px 10px black, 0px 0px 15px darkorange;
    z-index: 5;
  }
  .weather-card .temperature sup {
    position: absolute;
    top: .05rem;
    font-size: 60%;
  }
</style>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<div class="weather-card">
  <div class="icon">
    <!-- https://icons.getbootstrap.com/?q=sun -->
    <i class="bi"></i>  
  </div>
  <div class="city-name"></div>
  <div class="temperature"><span></span><sup></sup></div>
</div>

<script>
  // https://open-meteo.com/en/docs/dwd-api
  window.onload = load;

  function load() {
    const              card__icon = document.querySelector('.weather-card .icon i');
    const          card__cityName = document.querySelector('.weather-card .city-name');
    const       card__temperature = document.querySelector('.weather-card .temperature span');
    const card__temperature_units = document.querySelector('.weather-card .temperature sup');

    const    apiUrl = 'https://api.open-meteo.com/v1/dwd-icon';
    const  cityName = 'Madrid';
    const  latitude = 40.4165;  // for city Madrid
    const longitude = -3.7026; // for city Madrid
    const currentDateTimeIso = new Date().toISOString();
    const startDate = currentDateTimeIso.slice(0, 10);
    const   endDate = currentDateTimeIso.slice(0, 10);

    const queryParams = `?latitude=${latitude}&longitude=${longitude}&hourly=temperature_2m&current_weather=true&start_date=${startDate}&end_date=${endDate}`;

    fetch(apiUrl + queryParams)
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      // console.log(data)
      setTextToCard(card__cityName, cityName);
      setTextToCard(card__temperature, data.current_weather.temperature);
      setTextToCard(card__temperature_units, data.current_weather_units.temperature);

      if (data.current_weather.temperature > 28)
        setWeatherGraphic(card__icon, 'very hot');

      if (inRange(data.current_weather.temperature, 24, 28))
        setWeatherGraphic(card__icon, 'hot');

      if (inRange(data.current_weather.temperature, 19, 23))
        setWeatherGraphic(card__icon, 'warm');

      if (data.current_weather.temperature < 19)
        setWeatherGraphic(card__icon, 'cold');
    })
    .catch(error => {
      console.error('Error:', error);
    });
  }

  function setWeatherGraphic(element, name=null) {
    clearClassList(element);

    switch (name) {
      case 'very hot':
        element.classList.add('bi-brightness-high-fill');
        document.body.style.setProperty('--color-gradient-top-value', 95);
        document.body.style.setProperty('--color-gradient-bottom-value', 65);
        break;
      case 'hot':
        element.classList.add('bi-brightness-high');
        document.body.style.setProperty('--color-gradient-top-value', 75);
        document.body.style.setProperty('--color-gradient-bottom-value', 45);  
        break;
      case 'warm':
        element.classList.add('bi-brightness-low-fill');
        document.body.style.setProperty('--color-gradient-top-value', 55);
        document.body.style.setProperty('--color-gradient-bottom-value', 35);    
        break;
      case 'cold':
      default:
        element.classList.add('bi-brightness-alt-high');
        document.body.style.setProperty('--color-gradient-top-value', 35);
        document.body.style.setProperty('--color-gradient-bottom-value', 15);      
        break;  
    }
  }

  function setTextToCard(element, text) {
    element.textContent = text;
  }

  function clearClassList(element) {
    if (element) {
      element.className = '';
      element.classList.add('bi');
    }
  }

  function inRange(value, min, max) {
    return (value >= min && value <= max);
  }
</script>