Responsive Live Weather App Using Open Weather Api and JQuery

25
09Responsive Live Weather App Using Open Weather Api and JQuery

In this tutorial we are going to see how to create a responsive weather widget using jQuery and open weather api. It is a simple light weight jQuery plugin used to display the current weather of any city and country using open-weather-api. It provides a accurate result of weather This application is compatible with any browsers and 100% responsive.

Steps Includes:

Step 1- Create a Javasript File.
Step 2- Add text box with submit button.
Step 3- Inclue OpenWeathermap APi.

Step 1: Create a Javasript File

First, let’s create a new javascript file, we will call it “openWeather”. Remember to add Jquery. Now that you have created a JS file, let’s add it:



    
        Hack and Php Weather Widget - OpenWeathermap Api

Step 2: Add text box with submit button

Now, Let's add one input box for entering city and submit button to submit the information.

Step 3: Include Open Weather Map Api

First We have to understand how the openmweather api works. To start using it, we need a openWeathermap Url which is provided by them for free.

URL : http://api.openweathermap.org/data/2.5/find?q=cityname&mode=json

Here we will change the city name in parameter to what you are typing; we are going to use jquery ajax to send the request and received a response. The response should be an object that will contain all the data we need.