Responsive 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.

Multistep Validation form Semantic UI

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.


  • 1. Open Weather APi used
  • 2. Ajax based app
  • 3. Easy to use
  • 4. Awesome Design
  • 5. Google fonts used
  • 6. Supports HTML5 format
  • 7. Easy and understandable code for Web Designers & Developers
  • 8. Browser friendly(Supports Chrome, Firefox, Opera, Edge, and Safari)
  • 9. Fully responsive

Widget Displays:

  • 1. Live forecast
  • 2. City
  • 3. Geolocation
  • 4. Current Weather Icon
  • 5. Current Weather Conditions
  • 6. Current Temperature
  • 7. Wind Speed
  • 8. Humidity
  • 9. Sunrise and sunset
  • By posted on - 25th Sep 2017

    Social Oauth Login

    Personalized Map Navigation

    Online Image Compression Tool

    Image Compression


    Recent Posts