Build A Weather App With Ajax Using Open Weather Map API
Use Open Weather Map API to build a web app that can be used to get current weather and forecast weather data
- Description
- Curriculum
- FAQ
- Reviews
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.
Features:
- Make API calls with Ajax.
- Open weather map API description.
- Get current weather information.
- Get weather forecast information.
- Use jquery plugin to animate text.
Current Weather
-
1
IntroductionWelcome message
-
2
Web App Structure
Description of structure of application.
-
3
Create Project
Create project and add index page
-
4
Add Bootstrap Navbar to Index Page
Add bootstrap navbar to index page
-
5
Add Styles to Navbar
Add css styles to bootstrap navbar
-
6
Add Weather App Logo
Add and style the weather app logo
-
7
Add Background Image to Index Page
Add background image to the index page
-
8
Style Text on Background Image
Add css styles to text on background image
Forecast Weather
-
9
Section Intro
Section Introduction
-
10
Current Weather HTML Page
Add the html page to display current weather data
-
11
Style Bootstrap Jumbotron
Add css styles to jumbotron on current html page
-
12
API Description
Brief description of API
-
13
Introduction to Open Weather Map API
Introduction and description of open weather map API
-
14
Current Weather Ajax Request
Jquery Ajax request for current weather data
-
15
Display Current Weather Data
Display results for current weather data
-
16
Add Units To Results
Add respective units to weather data
-
17
Style Error Message
Add bootstrap alert class to error message
-
18
Add Footer
Add page footer to current html page
-
19
Style Current Weather Data Result Tag
Add css styles to the result div for current weather data
-
20
Reduce Footer Margin
Reduce margin top from footer
-
21
Display Current Weather Icon
Add and display weather icons for current weather data
-
22
Conclusion
Section conclusion
Index Page Styling and Text Animation
-
23
Section Intro
Section Introduction
-
24
Forecast Weather HTML Page
Add weather forecast html page
-
25
Description of Open Weather Map Forecast API
Description of open weather map for weather forecast
-
26
Weather Forecast Results Table
Add weather forecast results table head
-
27
Weather Forecast Ajax Request
Jquery Ajax request for weather forecast
-
28
Dynamically Add Forecast Results to Table Data
Add forecast results to table data
-
29
Display Weather Forecast Icons
Display weather forecast icons in result table
-
30
Display City Name and Country Code
Display city name and country code on results page
-
31
Add CSS Styles To Table
Add css styles to results table
-
32
Increase Height of Container Div
Increase height of div with class container in the forecast html page
-
33
Weather Forecast Update (NEW) - Part 1
-
34
Weather Forecast Update (NEW) - Part 2
-
35
Conclusion
Section conclusion
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
Stars 5
57
Stars 4
40
Stars 3
20
Stars 2
4
Stars 1
6
Course details
Video
5 hours
Certificate of Completion
Popular courses
Social Network