4.4 out of 5
4.4
120 reviews on Udemy

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
Instructor:
Uzochukwu Eddie Odozi
10,690 students enrolled
English [Auto-generated]
At the end of the course, you will be able to know how to use Ajax to make API calls.
Learn about the open weather map API.
Learn how to get specific data from a JSON response.
Get current weather information from open weather map API
Get weather forecast information from open weather map API.
Use text animation plugin to animate text.
Style pages and tables with css.

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.

Add Index Page

1
Introduction

Welcome 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

Current Weather

1
Section Intro

Section Introduction

2
Current Weather HTML Page

Add the html page to display current weather data

3
Style Bootstrap Jumbotron

Add css styles to jumbotron on current html page

4
API Description

Brief description of API

5
Introduction to Open Weather Map API

Introduction and description of open weather map API

6
Current Weather Ajax Request

Jquery Ajax request for current weather data

7
Display Current Weather Data

Display results for current weather data 

8
Add Units To Results

Add respective units to weather data

9
Style Error Message

Add bootstrap alert class to error message

10
Add Footer

Add page footer to current html page

11
Style Current Weather Data Result Tag

Add css styles to the result div for current weather data

12
Reduce Footer Margin

Reduce margin top from footer

13
Display Current Weather Icon

Add and display weather icons for current weather data

14
Conclusion

Section conclusion

Forecast Weather

1
Section Intro

Section Introduction

2
Forecast Weather HTML Page

Add weather forecast html page

3
Description of Open Weather Map Forecast API

Description of open weather map for weather forecast

4
Weather Forecast Results Table

Add weather forecast results table head

5
Weather Forecast Ajax Request

Jquery Ajax request for weather forecast

6
Dynamically Add Forecast Results to Table Data

Add forecast results to table data

7
Display Weather Forecast Icons

Display weather forecast icons in result table

8
Display City Name and Country Code

Display city name and country code on results page

9
Add CSS Styles To Table

Add css styles to results table

10
Increase Height of Container Div

Increase height of div with class container in the forecast html page

11
Weather Forecast Update (NEW) - Part 1
12
Weather Forecast Update (NEW) - Part 2
13
Conclusion

Section conclusion

Index Page Styling and Text Animation

1
Add More Text to Index Page

Add more text to index page

2
Style Text and Columns

Add css styles to index page

3
Add Footer to Index Page

Add footer to index page

4
Text Animations

Use jquery typed.js plugin to animate text

5
Conclusion

project conclusion

You can view and review the lecture materials indefinitely, like an on-demand channel.
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!
4.4
4.4 out of 5
120 Ratings

Detailed Rating

Stars 5
54
Stars 4
38
Stars 3
19
Stars 2
4
Stars 1
5
4347957ed2c081d4196d8958144b4219
30-Day Money-Back Guarantee

Includes

5 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion