Show current weather information based on city using WeatherWidget.io in JavaScript
Learn how to show current weather information and forecast using WeatherWidget using JavaScript/TypeScript. WeatherWidget .io provides a free, customizable, responsive weather widget that will always match your website.
Get embed code from WeatherWidget
Enter your city and click on GET CODE.
Your code will be generated. The embed code will look like this.
<a class="weatherwidget-io" href="https://forecast7.com/en/19d0872d88/mumbai/" data-label_1="MUMBAI" data-label_2="WEATHER" data-theme="original" >MUMBAI WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>This code can be embedded on any HTML page. I’m sure it would work. But this script isn’t enough to dynamically choose a city and fetch its weather. A few tweaks need to be done. This script works based on the href value that you pass. Each City has its own URL – with place_id and city name in the URL.
Get the list of URLs for your cities from Forecast7
const values = [
{ id: "https://forecast7.com/en/37d63n122d41/san-bruno/", name: "San Bruno" },
{ id: "https://forecast7.com/en/42d28n71d42/framingham/", name: "Framingham" },
{ id: "https://forecast7.com/en/32d45n99d73/abilene/", name: "Abilene" },
{ id: "https://forecast7.com/en/40d16n74d21/howell/", name: "Howell" },
{ id: "https://forecast7.com/en/41d25n76d92/montoursville/", name: "Montoursville" },
{ id: "https://forecast7.com/en/42d36n71d06/boston/", name: "Boston" }
];
Create a dropdown for list of cities
<select (change)="onChange($event)">
<option value="" disabled>Choose your DC</option>
<option *ngFor="let v of values" [value]="v.id">{{v.name}}</option>
</select>
<div>
<a class="weatherwidget-io" href="https://forecast7.com/en/42d36n71d06/boston/" data-label_1="BOSTON" data-label_2="WEATHER" data-theme="pure" >BOSTON WEATHER</a>
</div>
Create a div for weather. We are going to change the href property for this div based on selected city and reload the weather widget. That’s the trick.
Create a new function to load weather
loadWeather(s, id) {
var js, fjs = document.getElementsByTagName(s)[0];
js = document.createElement(s);
js.id = id;
js.src = 'https://weatherwidget.io/js/widget.min.js';
fjs.parentNode.insertBefore(js, fjs);
}
Load weather on changing dropdown
public onChange(event): void {
const newVal = event.target.value;
var x = document.getElementsByClassName('weatherwidget-io');
x[0].setAttribute("href",newVal);
var dcName = this.values.filter(function(value) {
return value.id == newVal;
});
x[0].setAttribute("data-label_1",dcName[0].name);
this.loadWeather('script', 'weatherwidget-io-js');
}
You can call loadWeather function on ngOnInit when you are using TypeScript
ngOnInit() {
this.loadWeather('script', 'weatherwidget-io-js');
}
