Build A Weather App With Ajax Using Open Weather Map API
4.2 (56 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
7,237 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Build A Weather App With Ajax Using Open Weather Map API to your Wishlist.

Add to Wishlist

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
4.2 (56 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
7,237 students enrolled
Last updated 2/2017
English
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 4 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
Requirements
  • Basic HTML/CSS
Description

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.
Who is the target audience?
  • This course is for anyone who wants to learn how to use APIs to build web applications.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
38 Lectures
04:13:34
+
Add Index Page
8 Lectures 42:55

Welcome message

Preview 01:14

Description of structure of application.

Preview 03:06

Create project and add index page

Preview 04:59

Add bootstrap navbar to index page

Add Bootstrap Navbar to Index Page
09:29

Add css styles to bootstrap navbar

Add Styles to Navbar
06:37

Add and style the weather app logo

Add Weather App Logo
05:11

Add background image to the index page

Add Background Image to Index Page
07:11

Add css styles to text on background image

Style Text on Background Image
05:08
+
Current Weather
14 Lectures 01:42:25

Section Introduction

Preview 02:08

Add the html page to display current weather data

Current Weather HTML Page
09:00

Add css styles to jumbotron on current html page

Style Bootstrap Jumbotron
06:29

Brief description of API

API Description
03:08

Introduction and description of open weather map API

Introduction to Open Weather Map API
15:17

Jquery Ajax request for current weather data

Current Weather Ajax Request
13:27

Display results for current weather data 

Display Current Weather Data
12:29

Add respective units to weather data

Add Units To Results
07:17

Add bootstrap alert class to error message

Style Error Message
05:50

Add page footer to current html page

Add Footer
05:22

Add css styles to the result div for current weather data

Style Current Weather Data Result Tag
10:29

Reduce margin top from footer

Reduce Footer Margin
03:25

Add and display weather icons for current weather data

Display Current Weather Icon
06:01

Section conclusion

Conclusion
02:03
+
Forecast Weather
11 Lectures 01:09:29

Section Introduction

Preview 02:46

Add weather forecast html page

Forecast Weather HTML Page
05:43

Description of open weather map for weather forecast

Description of Open Weather Map Forecast API
12:24

Add weather forecast results table head

Weather Forecast Results Table
05:54

Jquery Ajax request for weather forecast

Weather Forecast Ajax Request
07:26

Add forecast results to table data

Dynamically Add Forecast Results to Table Data
13:40

Display weather forecast icons in result table

Display Weather Forecast Icons
07:27

Display city name and country code on results page

Display City Name and Country Code
06:59

Add css styles to results table

Add CSS Styles To Table
04:08

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

Increase Height of Container Div
02:11

Section conclusion

Conclusion
00:51
+
Index Page Styling and Text Animation
5 Lectures 38:45

Add more text to index page

Add More Text to Index Page
09:22

Add css styles to index page

Style Text and Columns
08:07

Add footer to index page

Add Footer to Index Page
02:23

Use jquery typed.js plugin to animate text

Text Animations
13:03

project conclusion

Conclusion
05:50
About the Instructor
Uzochukwu Eddie Odozi
4.1 Average rating
482 Reviews
33,312 Students
5 Courses
Software Developer

Hi, i am Uzochukwu Eddie Odozi. I am a software developer who has interest in web and game development. I have a bachelors in Mathematics and an M.Sc. in Computer Engineering from Tallinn University of Technology.

I enjoy working with php, mysql, Jquery, C# as well as nodejs. I enjoying coding a lot.

I have had many success and failures in web development and all those has contributed to where I am today.