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.
Instructor – Uzochukwu Eddie Odozi
A software developer who has interest in web and game development. Eddie have a bachelors in Mathematics and an M.Sc. in Computer Engineering from Tallinn University of Technology.
Course Curriculum
| Add Index Page | |||
| Introduction | FREE | 00:02:00 | |
| Web App Structure | FREE | 00:03:00 | |
| Create Project | FREE | 00:05:00 | |
| Add Bootstrap Navbar to Index Page | 00:10:00 | ||
| Add Styles to Navbar | 00:07:00 | ||
| Add Weather App Logo | 00:06:00 | ||
| Add Background Image to Index Page | 00:07:00 | ||
| Style Text on Background Image | FREE | 00:05:00 | |
| Current Weather | |||
| Section Intro | 00:02:00 | ||
| Current Weather HTML Page | 00:09:00 | ||
| Style Bootstrap Jumbotron | 00:07:00 | ||
| API Description | FREE | 00:03:00 | |
| Introduction to Open Weather Map API | 00:15:00 | ||
| Current Weather Ajax Request | 00:14:00 | ||
| Display Current Weather Data | 00:13:00 | ||
| Add Units To Results | 00:08:00 | ||
| Style Error Message | 00:06:00 | ||
| Add Footer | 00:06:00 | ||
| Style Current Weather Data Result Tag | 00:11:00 | ||
| Reduce Footer Margin | 00:04:00 | ||
| Display Current Weather Icon | 00:06:00 | ||
| Conclusion | 00:02:00 | ||
| Forecast Weather | |||
| Section Intro | FREE | 00:03:00 | |
| Forecast Weather HTML Page | 00:06:00 | ||
| Description of Open Weather Map Forecast API | 00:12:00 | ||
| Weather Forecast Results Table | 00:06:00 | ||
| Weather Forecast Ajax Request | 00:08:00 | ||
| Dynamically Add Forecast Results to Table Data | 00:14:00 | ||
| Display Weather Forecast Icons | 00:08:00 | ||
| Display City Name and Country Code | 00:07:00 | ||
| Add CSS Styles To Table | 00:05:00 | ||
| Increase Height of Container Div | 00:02:00 | ||
| Weather Forecast Update (NEW) – Part 1 | 00:09:00 | ||
| Weather Forecast Update (NEW) – Part 2 | 00:10:00 | ||
| Conclusion | FREE | 00:01:00 | |
| Index Page Styling and Text Animation | |||
| Add More Text to Index Page | 00:10:00 | ||
| Style Text and Columns | 00:09:00 | ||
| Add Footer to Index Page | 00:03:00 | ||
| Text Animations | 00:13:00 | ||
| Conclusion | 00:06:00 | ||
