Build A Weather App With Ajax Using Open Weather Map API

  • Course provided by Udemy
  • Study type: Online
  • Starts: Anytime
  • Price: See latest price on Udemy
Udemy

Course 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 this course is for:

  • This course is for anyone who wants to learn how to use APIs to build web applications.

Instructor

Software Developer
  • 4.2 Instructor Rating
  • 1,585 Reviews
  • 54,114 Students
  • 12 Courses

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 Angular, Ionic, Unity as well as nodejs. I enjoy coding a lot.

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

Expected Outcomes

  1. 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. Course content 4 sections • 40 lectures • 4h 31m total length Expand all sections Add Index Page 8 lectures • 43min Introduction Preview 01:14 Web App Structure Preview 03:06 Create Project Preview 04:59 Add Bootstrap Navbar to Index Page 09:29 Add Styles to Navbar 06:37 Add Weather App Logo 05:11 Add Background Image to Index Page 07:11 Style Text on Background Image 05:08 Current Weather 14 lectures • 1hr 42min Section Intro Preview 02:08 Current Weather HTML Page 09:00 Style Bootstrap Jumbotron 06:29 API Description 03:08 Introduction to Open Weather Map API 15:17 Current Weather Ajax Request 13:27 Display Current Weather Data 12:29 Add Units To Results 07:17 Style Error Message 05:50 Add Footer 05:22 Style Current Weather Data Result Tag 10:29 Reduce Footer Margin 03:25 Display Current Weather Icon 06:01 Conclusion 02:03 Forecast Weather 13 lectures • 1hr 28min Section Intro Preview 02:46 Forecast Weather HTML Page 05:43 Description of Open Weather Map Forecast API 12:24 Weather Forecast Results Table 05:54 Weather Forecast Ajax Request 07:26 Dynamically Add Forecast Results to Table Data 13:40 Display Weather Forecast Icons 07:27 Display City Name and Country Code 06:59 Add CSS Styles To Table 04:08 Increase Height of Container Div 02:11 Weather Forecast Update (NEW) - Part 1 08:36 Weather Forecast Update (NEW) - Part 2 09:41 Conclusion 00:51 Index Page Styling and Text Animation 5 lectures • 39min Add More Text to Index Page 09:22 Style Text and Columns 08:07 Add Footer to Index Page 02:23 Text Animations 13:03 Conclusion 05:50 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 this course is for: This course is for anyone who wants to learn how to use APIs to build web applications. Show more Show less Instructor Uzochukwu Eddie Odozi Software Developer 4.2 Instructor Rating 1,585 Reviews 54,114 Students 12 Courses 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 Angular, Ionic, Unity as well as nodejs. I enjoy coding a lot. I have had many success and failures in web development and all those has contributed to where I am today. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6778408b5f1cf407',m:'46bed901a25f5f99b64343eaea34296af83366b5-1627749455-1800-AZ5iwaczVCW2rUR62M2tXugcv5AtUsdkOXGR1nTAFSoa9tXOKNNVqYlTbPREf4dA8w7vdntJyJs8pHTw51Y7w/RVr4o/sl19ECLiht1gJMYfDJRgeKsAKzOZpgXKWQh50H/2jypTiN2Bsls21SxhRtX7SxG7EOqA2sOQiHG+8K9qYxxSPgPzpGWSoDOwIh5tgt5RCKq37d1B9DM8w1dSpwM=',s:[0x97c07d9c21,0xb3b12540b3],}})();
  2. 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. Course content 4 sections • 40 lectures • 4h 31m total length Expand all sections Add Index Page 8 lectures • 43min Introduction Preview 01:14 Web App Structure Preview 03:06 Create Project Preview 04:59 Add Bootstrap Navbar to Index Page 09:29 Add Styles to Navbar 06:37 Add Weather App Logo 05:11 Add Background Image to Index Page 07:11 Style Text on Background Image 05:08 Current Weather 14 lectures • 1hr 42min Section Intro Preview 02:08 Current Weather HTML Page 09:00 Style Bootstrap Jumbotron 06:29 API Description 03:08 Introduction to Open Weather Map API 15:17 Current Weather Ajax Request 13:27 Display Current Weather Data 12:29 Add Units To Results 07:17 Style Error Message 05:50 Add Footer 05:22 Style Current Weather Data Result Tag 10:29 Reduce Footer Margin 03:25 Display Current Weather Icon 06:01 Conclusion 02:03 Forecast Weather 13 lectures • 1hr 28min Section Intro Preview 02:46 Forecast Weather HTML Page 05:43 Description of Open Weather Map Forecast API 12:24 Weather Forecast Results Table 05:54 Weather Forecast Ajax Request 07:26 Dynamically Add Forecast Results to Table Data 13:40 Display Weather Forecast Icons 07:27 Display City Name and Country Code 06:59 Add CSS Styles To Table 04:08 Increase Height of Container Div 02:11 Weather Forecast Update (NEW) - Part 1 08:36 Weather Forecast Update (NEW) - Part 2 09:41 Conclusion 00:51 Index Page Styling and Text Animation 5 lectures • 39min Add More Text to Index Page 09:22 Style Text and Columns 08:07 Add Footer to Index Page 02:23 Text Animations 13:03 Conclusion 05:50 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 this course is for: This course is for anyone who wants to learn how to use APIs to build web applications. Show more Show less Instructor Uzochukwu Eddie Odozi Software Developer 4.2 Instructor Rating 1,585 Reviews 54,114 Students 12 Courses 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 Angular, Ionic, Unity as well as nodejs. I enjoy coding a lot. I have had many success and failures in web development and all those has contributed to where I am today. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6778408b5f1cf407',m:'46bed901a25f5f99b64343eaea34296af83366b5-1627749455-1800-AZ5iwaczVCW2rUR62M2tXugcv5AtUsdkOXGR1nTAFSoa9tXOKNNVqYlTbPREf4dA8w7vdntJyJs8pHTw51Y7w/RVr4o/sl19ECLiht1gJMYfDJRgeKsAKzOZpgXKWQh50H/2jypTiN2Bsls21SxhRtX7SxG7EOqA2sOQiHG+8K9qYxxSPgPzpGWSoDOwIh5tgt5RCKq37d1B9DM8w1dSpwM=',s:[0x97c07d9c21,0xb3b12540b3],}})();
  3. 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. Course content 4 sections • 40 lectures • 4h 31m total length Expand all sections Add Index Page 8 lectures • 43min Introduction Preview 01:14 Web App Structure Preview 03:06 Create Project Preview 04:59 Add Bootstrap Navbar to Index Page 09:29 Add Styles to Navbar 06:37 Add Weather App Logo 05:11 Add Background Image to Index Page 07:11 Style Text on Background Image 05:08 Current Weather 14 lectures • 1hr 42min Section Intro Preview 02:08 Current Weather HTML Page 09:00 Style Bootstrap Jumbotron 06:29 API Description 03:08 Introduction to Open Weather Map API 15:17 Current Weather Ajax Request 13:27 Display Current Weather Data 12:29 Add Units To Results 07:17 Style Error Message 05:50 Add Footer 05:22 Style Current Weather Data Result Tag 10:29 Reduce Footer Margin 03:25 Display Current Weather Icon 06:01 Conclusion 02:03 Forecast Weather 13 lectures • 1hr 28min Section Intro Preview 02:46 Forecast Weather HTML Page 05:43 Description of Open Weather Map Forecast API 12:24 Weather Forecast Results Table 05:54 Weather Forecast Ajax Request 07:26 Dynamically Add Forecast Results to Table Data 13:40 Display Weather Forecast Icons 07:27 Display City Name and Country Code 06:59 Add CSS Styles To Table 04:08 Increase Height of Container Div 02:11 Weather Forecast Update (NEW) - Part 1 08:36 Weather Forecast Update (NEW) - Part 2 09:41 Conclusion 00:51 Index Page Styling and Text Animation 5 lectures • 39min Add More Text to Index Page 09:22 Style Text and Columns 08:07 Add Footer to Index Page 02:23 Text Animations 13:03 Conclusion 05:50 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 this course is for: This course is for anyone who wants to learn how to use APIs to build web applications. Show more Show less Instructor Uzochukwu Eddie Odozi Software Developer 4.2 Instructor Rating 1,585 Reviews 54,114 Students 12 Courses 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 Angular, Ionic, Unity as well as nodejs. I enjoy coding a lot. I have had many success and failures in web development and all those has contributed to where I am today. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6778408b5f1cf407',m:'46bed901a25f5f99b64343eaea34296af83366b5-1627749455-1800-AZ5iwaczVCW2rUR62M2tXugcv5AtUsdkOXGR1nTAFSoa9tXOKNNVqYlTbPREf4dA8w7vdntJyJs8pHTw51Y7w/RVr4o/sl19ECLiht1gJMYfDJRgeKsAKzOZpgXKWQh50H/2jypTiN2Bsls21SxhRtX7SxG7EOqA2sOQiHG+8K9qYxxSPgPzpGWSoDOwIh5tgt5RCKq37d1B9DM8w1dSpwM=',s:[0x97c07d9c21,0xb3b12540b3],}})();
  4. 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. Course content 4 sections • 40 lectures • 4h 31m total length Expand all sections Add Index Page 8 lectures • 43min Introduction Preview 01:14 Web App Structure Preview 03:06 Create Project Preview 04:59 Add Bootstrap Navbar to Index Page 09:29 Add Styles to Navbar 06:37 Add Weather App Logo 05:11 Add Background Image to Index Page 07:11 Style Text on Background Image 05:08 Current Weather 14 lectures • 1hr 42min Section Intro Preview 02:08 Current Weather HTML Page 09:00 Style Bootstrap Jumbotron 06:29 API Description 03:08 Introduction to Open Weather Map API 15:17 Current Weather Ajax Request 13:27 Display Current Weather Data 12:29 Add Units To Results 07:17 Style Error Message 05:50 Add Footer 05:22 Style Current Weather Data Result Tag 10:29 Reduce Footer Margin 03:25 Display Current Weather Icon 06:01 Conclusion 02:03 Forecast Weather 13 lectures • 1hr 28min Section Intro Preview 02:46 Forecast Weather HTML Page 05:43 Description of Open Weather Map Forecast API 12:24 Weather Forecast Results Table 05:54 Weather Forecast Ajax Request 07:26 Dynamically Add Forecast Results to Table Data 13:40 Display Weather Forecast Icons 07:27 Display City Name and Country Code 06:59 Add CSS Styles To Table 04:08 Increase Height of Container Div 02:11 Weather Forecast Update (NEW) - Part 1 08:36 Weather Forecast Update (NEW) - Part 2 09:41 Conclusion 00:51 Index Page Styling and Text Animation 5 lectures • 39min Add More Text to Index Page 09:22 Style Text and Columns 08:07 Add Footer to Index Page 02:23 Text Animations 13:03 Conclusion 05:50 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 this course is for: This course is for anyone who wants to learn how to use APIs to build web applications. Show more Show less Instructor Uzochukwu Eddie Odozi Software Developer 4.2 Instructor Rating 1,585 Reviews 54,114 Students 12 Courses 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 Angular, Ionic, Unity as well as nodejs. I enjoy coding a lot. I have had many success and failures in web development and all those has contributed to where I am today. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6778408b5f1cf407',m:'46bed901a25f5f99b64343eaea34296af83366b5-1627749455-1800-AZ5iwaczVCW2rUR62M2tXugcv5AtUsdkOXGR1nTAFSoa9tXOKNNVqYlTbPREf4dA8w7vdntJyJs8pHTw51Y7w/RVr4o/sl19ECLiht1gJMYfDJRgeKsAKzOZpgXKWQh50H/2jypTiN2Bsls21SxhRtX7SxG7EOqA2sOQiHG+8K9qYxxSPgPzpGWSoDOwIh5tgt5RCKq37d1B9DM8w1dSpwM=',s:[0x97c07d9c21,0xb3b12540b3],}})();
  5. Get weather forecast information from open weather map API. Use text animation plugin to animate text. Style pages and tables with css. Course content 4 sections • 40 lectures • 4h 31m total length Expand all sections Add Index Page 8 lectures • 43min Introduction Preview 01:14 Web App Structure Preview 03:06 Create Project Preview 04:59 Add Bootstrap Navbar to Index Page 09:29 Add Styles to Navbar 06:37 Add Weather App Logo 05:11 Add Background Image to Index Page 07:11 Style Text on Background Image 05:08 Current Weather 14 lectures • 1hr 42min Section Intro Preview 02:08 Current Weather HTML Page 09:00 Style Bootstrap Jumbotron 06:29 API Description 03:08 Introduction to Open Weather Map API 15:17 Current Weather Ajax Request 13:27 Display Current Weather Data 12:29 Add Units To Results 07:17 Style Error Message 05:50 Add Footer 05:22 Style Current Weather Data Result Tag 10:29 Reduce Footer Margin 03:25 Display Current Weather Icon 06:01 Conclusion 02:03 Forecast Weather 13 lectures • 1hr 28min Section Intro Preview 02:46 Forecast Weather HTML Page 05:43 Description of Open Weather Map Forecast API 12:24 Weather Forecast Results Table 05:54 Weather Forecast Ajax Request 07:26 Dynamically Add Forecast Results to Table Data 13:40 Display Weather Forecast Icons 07:27 Display City Name and Country Code 06:59 Add CSS Styles To Table 04:08 Increase Height of Container Div 02:11 Weather Forecast Update (NEW) - Part 1 08:36 Weather Forecast Update (NEW) - Part 2 09:41 Conclusion 00:51 Index Page Styling and Text Animation 5 lectures • 39min Add More Text to Index Page 09:22 Style Text and Columns 08:07 Add Footer to Index Page 02:23 Text Animations 13:03 Conclusion 05:50 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 this course is for: This course is for anyone who wants to learn how to use APIs to build web applications. Show more Show less Instructor Uzochukwu Eddie Odozi Software Developer 4.2 Instructor Rating 1,585 Reviews 54,114 Students 12 Courses 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 Angular, Ionic, Unity as well as nodejs. I enjoy coding a lot. I have had many success and failures in web development and all those has contributed to where I am today. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6778408b5f1cf407',m:'46bed901a25f5f99b64343eaea34296af83366b5-1627749455-1800-AZ5iwaczVCW2rUR62M2tXugcv5AtUsdkOXGR1nTAFSoa9tXOKNNVqYlTbPREf4dA8w7vdntJyJs8pHTw51Y7w/RVr4o/sl19ECLiht1gJMYfDJRgeKsAKzOZpgXKWQh50H/2jypTiN2Bsls21SxhRtX7SxG7EOqA2sOQiHG+8K9qYxxSPgPzpGWSoDOwIh5tgt5RCKq37d1B9DM8w1dSpwM=',s:[0x97c07d9c21,0xb3b12540b3],}})();
  6. Use text animation plugin to animate text. Style pages and tables with css. Course content 4 sections • 40 lectures • 4h 31m total length Expand all sections Add Index Page 8 lectures • 43min Introduction Preview 01:14 Web App Structure Preview 03:06 Create Project Preview 04:59 Add Bootstrap Navbar to Index Page 09:29 Add Styles to Navbar 06:37 Add Weather App Logo 05:11 Add Background Image to Index Page 07:11 Style Text on Background Image 05:08 Current Weather 14 lectures • 1hr 42min Section Intro Preview 02:08 Current Weather HTML Page 09:00 Style Bootstrap Jumbotron 06:29 API Description 03:08 Introduction to Open Weather Map API 15:17 Current Weather Ajax Request 13:27 Display Current Weather Data 12:29 Add Units To Results 07:17 Style Error Message 05:50 Add Footer 05:22 Style Current Weather Data Result Tag 10:29 Reduce Footer Margin 03:25 Display Current Weather Icon 06:01 Conclusion 02:03 Forecast Weather 13 lectures • 1hr 28min Section Intro Preview 02:46 Forecast Weather HTML Page 05:43 Description of Open Weather Map Forecast API 12:24 Weather Forecast Results Table 05:54 Weather Forecast Ajax Request 07:26 Dynamically Add Forecast Results to Table Data 13:40 Display Weather Forecast Icons 07:27 Display City Name and Country Code 06:59 Add CSS Styles To Table 04:08 Increase Height of Container Div 02:11 Weather Forecast Update (NEW) - Part 1 08:36 Weather Forecast Update (NEW) - Part 2 09:41 Conclusion 00:51 Index Page Styling and Text Animation 5 lectures • 39min Add More Text to Index Page 09:22 Style Text and Columns 08:07 Add Footer to Index Page 02:23 Text Animations 13:03 Conclusion 05:50 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 this course is for: This course is for anyone who wants to learn how to use APIs to build web applications. Show more Show less Instructor Uzochukwu Eddie Odozi Software Developer 4.2 Instructor Rating 1,585 Reviews 54,114 Students 12 Courses 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 Angular, Ionic, Unity as well as nodejs. I enjoy coding a lot. I have had many success and failures in web development and all those has contributed to where I am today. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6778408b5f1cf407',m:'46bed901a25f5f99b64343eaea34296af83366b5-1627749455-1800-AZ5iwaczVCW2rUR62M2tXugcv5AtUsdkOXGR1nTAFSoa9tXOKNNVqYlTbPREf4dA8w7vdntJyJs8pHTw51Y7w/RVr4o/sl19ECLiht1gJMYfDJRgeKsAKzOZpgXKWQh50H/2jypTiN2Bsls21SxhRtX7SxG7EOqA2sOQiHG+8K9qYxxSPgPzpGWSoDOwIh5tgt5RCKq37d1B9DM8w1dSpwM=',s:[0x97c07d9c21,0xb3b12540b3],}})();
  7. Style pages and tables with css. Course content 4 sections • 40 lectures • 4h 31m total length Expand all sections Add Index Page 8 lectures • 43min Introduction Preview 01:14 Web App Structure Preview 03:06 Create Project Preview 04:59 Add Bootstrap Navbar to Index Page 09:29 Add Styles to Navbar 06:37 Add Weather App Logo 05:11 Add Background Image to Index Page 07:11 Style Text on Background Image 05:08 Current Weather 14 lectures • 1hr 42min Section Intro Preview 02:08 Current Weather HTML Page 09:00 Style Bootstrap Jumbotron 06:29 API Description 03:08 Introduction to Open Weather Map API 15:17 Current Weather Ajax Request 13:27 Display Current Weather Data 12:29 Add Units To Results 07:17 Style Error Message 05:50 Add Footer 05:22 Style Current Weather Data Result Tag 10:29 Reduce Footer Margin 03:25 Display Current Weather Icon 06:01 Conclusion 02:03 Forecast Weather 13 lectures • 1hr 28min Section Intro Preview 02:46 Forecast Weather HTML Page 05:43 Description of Open Weather Map Forecast API 12:24 Weather Forecast Results Table 05:54 Weather Forecast Ajax Request 07:26 Dynamically Add Forecast Results to Table Data 13:40 Display Weather Forecast Icons 07:27 Display City Name and Country Code 06:59 Add CSS Styles To Table 04:08 Increase Height of Container Div 02:11 Weather Forecast Update (NEW) - Part 1 08:36 Weather Forecast Update (NEW) - Part 2 09:41 Conclusion 00:51 Index Page Styling and Text Animation 5 lectures • 39min Add More Text to Index Page 09:22 Style Text and Columns 08:07 Add Footer to Index Page 02:23 Text Animations 13:03 Conclusion 05:50 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 this course is for: This course is for anyone who wants to learn how to use APIs to build web applications. Show more Show less Instructor Uzochukwu Eddie Odozi Software Developer 4.2 Instructor Rating 1,585 Reviews 54,114 Students 12 Courses 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 Angular, Ionic, Unity as well as nodejs. I enjoy coding a lot. I have had many success and failures in web development and all those has contributed to where I am today. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6778408b5f1cf407',m:'46bed901a25f5f99b64343eaea34296af83366b5-1627749455-1800-AZ5iwaczVCW2rUR62M2tXugcv5AtUsdkOXGR1nTAFSoa9tXOKNNVqYlTbPREf4dA8w7vdntJyJs8pHTw51Y7w/RVr4o/sl19ECLiht1gJMYfDJRgeKsAKzOZpgXKWQh50H/2jypTiN2Bsls21SxhRtX7SxG7EOqA2sOQiHG+8K9qYxxSPgPzpGWSoDOwIh5tgt5RCKq37d1B9DM8w1dSpwM=',s:[0x97c07d9c21,0xb3b12540b3],}})();