Skip to content

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');
  }
See also  Swap two array elements in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.