live weather ℹ️nformation 😶‍🌫️Blogger

How to easily add your own weather information to a Free Blogger website.

Signup at  www.openweathermap.org 

Upon signing up your account will generate your very own unique API key. Your API key is not to be shared anywhere and kept safe.

Then make sure your Blogger theme's layout, allows for a custom HTML/JAVA section to be added, Then enter in your API key where it says YOUR API KEY GOES HERE and save.

<div id="weather-app">

      <h1>🌐😶‍🌫️</h1>

      <form>

        <label for="city">Enter your city:</label><br />

        <input type="text" id="city" name="city" /><br />

        <button type="button" onclick="getWeather()">Get Weather</button>

      </form> 

      <div id="weather-info">

        <p id="temperature"></p>

<p id="temperatureC"></p>

        <p id="description"></p>

      </div>

    </div>

    <script>

      function getWeather() {

        var city = document.getElementById("city").value;

        var apiKey = "YOUR API KEY GOES HERE";

        var url = "https://api.openweathermap.org/data/2.5/weather?q=" + city + "&appid=" + apiKey;

        fetch(url)

          .then(response => response.json())

          .then(data => {

            console.log(data);

            var temperature = (data.main.temp * 9/5 - 459.67).toFixed(1);

            var description = data.weather[0].description;

            document.getElementById("temperature").innerHTML = temperature + "°F";

var temperatureC = (data.main.temp - 273.15).toFixed(1);

document.getElementById("temperatureC").innerHTML = temperatureC + "°C";

            document.getElementById("description").innerHTML = description;

          });

      }

    </script>

It should print out Celsius and Fahrenheit with conditions, but for free and without attribution required.