This is a guide on how to make a weather widget on your page like the one on my sidebar! Display the current weather on your page! :D
We will be using javascript and a weather API. Please note, this method won't keep your location private.
I'm including the addition of custom icons, but you can keep it text only with this method if you like!
On the page you want to include the weather widget, be sure to include these bits of code:
This is where the widget will appear. We will change the contents of this tag with javascript.
Next we need to include the javascript that will display the current weather. For this I use a free weather API called Open Weather. You will need to make an account in order to get a key to be used in one of the scripts!
I recommend hosting this script on your personal server, but be sure to include this line at the bottom of your page, before the end of the body tag:
<script src="https://test.cinni.net/weather-master/dist/weather.min.js"></script>
This uses a weather library that will make it easier for us to use the next script that edits the actual widget - you can view my personal script here, but I will explain how it works below:
var apiKey = "YOURCODEHERE"; // your api key goes here
Weather.setApiKey( apiKey );
Weather.getCurrent( "YOURCITYHERE", function ( current ) {
document.querySelector( '#current' ).innerHTML = "" + current.conditions() + " " +
Math.round( Weather.kelvinToFahrenheit( current.temperature() ) ) + " °F";
} );
//update weather icons
window.addEventListener("load", function(e){ //load after everything else
let text = document.getElementById("currentCondition").innerHTML; //gets text inside the #currentCondition ID
//image variables
var sunny = '
'
var overcast = '
'
var overcast2 = '
'
var sunnyrain = '
'
var clouds = '
'
var rain = '
'
var storm = '
'
var thunder = '
'
var snow = '
'
var snowstorm = '
'
var windy = '
'
var tornado = '
'
var dust = '
'
//set image to weather condition
var condition = text
var img = sunny //default to sunny
if (condition == 'overcast clouds'){
img = overcast2
}
if (condition == 'few clouds'){
img = overcast
}
if (condition == 'scattered clouds' || condition == 'broken clouds'){
img = clouds
}
if (condition == 'clear sky '){
img = sunny
}
if (condition == 'tornado' || condition == 'squalls' || condition == 'sand/ dust whirls'){
img = tornado
}
if (condition == 'volcanic ash' || condition == 'dust' || condition == 'sand' || condition == 'Haze' || condition == 'mist' || condition == 'fog' || condition == 'Smoke'){
img = dust
}
if (condition == 'light snow' || condition == 'snow' || condition == 'Sleet' || condition == 'Light shower sleet' || condition == 'Shower sleet' || condition == 'Light rain and snow' || condition == 'Rain and snow' || condition == 'Light shower snow' || condition == 'Shower snow'){
img = snow
}
if (condition == 'Heavy snow' || condition == 'Heavy shower snow'){
img = snowstorm
}
if (condition == 'freezing rain' || condition == 'heavy intensity shower rain' || condition == 'ragged shower rain' || condition == 'light intensity shower rain' || condition == 'shower rain' || condition == 'light intensity drizzle' || condition == 'drizzle' || condition == 'heavy intensity drizzle' || condition == 'light intensity drizzle rain' || condition == 'drizzle rain' || condition == 'heavy intensity drizzle rain' || condition == 'shower rain and drizzle' || condition == 'heavy shower rain and drizzle' || condition == 'shower drizzle'){
img = rain
}
if (condition == 'light rain' || condition == 'moderate rain' || condition == 'heavy intensity rain' || condition == 'very heavy rain' || condition == 'extreme rain'){
img = sunnyrain
}
if(condition == 'thunderstorm with light rain' || condition == 'thunderstorm with rain' || condition == 'thunderstorm with heavy rain' || condition == 'light thunderstorm'){
img = storm
}
if(condition == 'thunderstorm' || condition == 'heavy thunderstorm' || condition == 'ragged thunderstorm' || condition == 'thunderstorm with light drizzle' || condition == 'thunderstorm with drizzle' || condition == 'thunderstorm with heavy drizzle'){
img = thunder
}
//change text to the image
document.getElementById("currentCondition").innerHTML = text.replace(condition, img);
console.log(condition) //check for condition state
console.log(img) //check for image url
});
Replace the api key with the one provided to you, and replace the city with your location (Note to self: It's been forever since I did this so I forgot some details, need to double check this is how it works lol.) To use your own icons, replace the image URL with your own. Hopefully the variable names are self explanatory! (Note to reader: this section is a work in progress....)
Make sure to include the link to the second script too!