JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<h1 id="temperature"></h1>
<h2 id="description"></h2>
<p id="location"></p>
<i class="wi-day-rain"></i>
<img src="" id="weather-pic"/>
<div class="text">

JavaScript

function getWeather() {
  let temperature = document.getElementById("temperature");
  let description = document.getElementById("description");
  let location = document.getElementById("location");
  let weatherpic;
  let api = "https://api.openweathermap.org/data/2.5/weather";
  let apiKey = "f146799a557e8ab658304c1b30cc3cfd";

  let latitude = 47.058700;
  let longitude = 15.457632;
  let url = //not here 
    api +
    "?lat=" +
    latitude +
    "&lon=" +
    longitude +
    "&appid=" +
    apiKey +
    "&units=imperial";


  fetch(url)
    .then(response => response.json())
    .then(data => {
      var temp = data.main.temp;
      temp = (temp - 32) * 5 / 9;
      temp = temp.toFixed(1);
      temperature.innerHTML = temp + "° C";


      temperature.innerHTML = temp; // OUTPUT
      location.innerHTML = data.name; // OUTPUT
      description.innerHTML = data.weather[0].main; //OUTPUT
      temperature.innerHTML = temp;

      document.getElementById("weather-pic").src = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png"
    });
}


getWeather();