Meteo SVG

meteo svg using openweather api

by Corentin Ballot

HTML

<div id="meteo">
  <div id="meteo_icon"></div>
  <div id="meteo_data">
    <div id="meteo_data_desc"></div>
    <div id="meteo_data_temp"></div>
  </div>
</div>



<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="700px"
   height="360px"
   viewBox="0 0 70.132445 36.805933"
   version="1.1"
   id="svg-meteo"
   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
   sodipodi:docname="meteo-201907191415.svg">
  <style
     id="style2">
   .comet{
      animation-name: comets;
      animation-iteration-count: infinite;
   }
   #comet-1{
      animation-duration: 61s;
   }
   #comet-2{
      animation-duration: 31s;
   }
   #comet-3{
      animation-duration: 19s;
   }
   #comet-4{
      animation-duration: 11s;
   }

   @keyframes comets {
      0% {
         transform: translate(500px, -381px);
         opacity: 0;
      }
      95% {
         transform: translate(500px, -381px);
         opacity: 0;
      }
      99% {
         transform: translate(0, 0);
         opacity: 1;
      }
      100% {
         transform: translate(0, 0);
         opacity: 0;
      }
   }

   .cloud {
      transform-origin: 0% 80%;
      transform-box: fill-box;
      animation-name: clouds;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      visibility: hidden;
   }

   #cloud-1 {
      animation-delay: 11s;
      animation-duration: 59s;
   }
   #cloud-2 {
      animation-delay: 11s;
      animation-duration: 97s;
   }
   #cloud-3 {
      animation-delay: 23s;
 ...

CSS

#meteo {
  display: flex;
  align-items:center;
}
#meteo_icon {
}
#meteo_data {
  display: flex;
  align-items: center;
}

JavaScript

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      function success(position) {
      	console.log('geolocation allowed');
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        getMeteo(`lat=${latitude}&lon=${longitude}`);
      },
      function error(msg) {
      	console.log('geolocation denied... using Paris,fr as default geolocation');
      	getMeteo(`q=Paris,fr`);
      },
      {maximumAge:10000, timeout:5000, enableHighAccuracy: true}
    );
} else {
    alert("Geolocation API is not supported in your browser.");
}

function getMeteo(param) {
	fetch(`https://api.openweathermap.org/data/2.5/weather?${param}&APPID=60ec6cdcfc5424c31eb64627226da17e`)
  .then(function(response) {
  		return response.json()
  })
  .then(function(json) {
      document.getElementById("svg-meteo").setAttribute("class", `${parseInt(json.dt)>parseInt(json.sys.type.sunset)?"night":"day"} ${json.weather[0].description}`);
      document.getElementById("meteo_icon").innerHTML=`<img src="http://openweathermap.org/img/wn/${json.weather[0].icon}.png">`;
      document.getElementById("meteo_data_desc").innerHTML=`${json.weather[0].main}, ${Math.round(json.main.temp-273.15)}°C`;
  })
  .catch(function(error) {
    	console.log('Il y a eu un problème avec l\'opération fetch: ' + error.message);
  });
}