Build A Weather App With Ajax Using Open Weather Map API
API stands for Application Programming Interface. API is basically a way for programmers to communicate with certain applications. The use of APIs in building applications is becoming increasingly popular.
In this course, we will build a complete weather app using the open weather map API. Open weather map API is simple, clear and free to use. Open weather map API provides current weather data, weather forecast data as well as historical weather data.
With our application, we will make API calls by city name to the open weather map API using Ajax to get response in JSON format.
The weather app will be used to:
- Get current weather information like temperature, pressure, humidity, wind speed, wind direction etc.
- Get weather forecast information of any city by city name and number of days.
- Make API calls with Ajax.
- Open weather map API description.
- Get current weather information.
- Get weather forecast information.
- Use jquery plugin to animate text.
Add Index Page
Description of structure of application.
Create project and add index page
Add bootstrap navbar to index page
Add css styles to bootstrap navbar
Add and style the weather app logo
Add background image to the index page
Add css styles to text on background image
Add the html page to display current weather data
Add css styles to jumbotron on current html page
Brief description of API
Introduction and description of open weather map API
Jquery Ajax request for current weather data
Display results for current weather data
Add respective units to weather data
Add bootstrap alert class to error message
Add page footer to current html page
Add css styles to the result div for current weather data
Reduce margin top from footer
Add and display weather icons for current weather data
Add weather forecast html page
Description of open weather map for weather forecast
Add weather forecast results table head
Jquery Ajax request for weather forecast
Add forecast results to table data
Display weather forecast icons in result table
Display city name and country code on results page
Add css styles to results table
Increase height of div with class container in the forecast html page
Index Page Styling and Text Animation
Add more text to index page
Add css styles to index page
Add footer to index page
Use jquery typed.js plugin to animate text