JavaScript Air Quality App

Name: JavaScript Air Quality App
Rating: 4.7 (17 reviews)

Improve your JavaScript skills

Last updated 8/2023

English

English [Auto],

What you'll learn

2 sections • 9 lectures • 56m total length

Introduction0:39
Create an air quality app that shows the air quality index for your location, displays the city name and a pollution scale with a pointer, using the IQ Air API.
Project presentation and API key2:46
Download the starter files, review the source code, and learn how to obtain a free API key to paste into main.js for the JavaScript air quality app.

Coding of the HTML5:49
Set up the html structure for the air quality app, including a header with an h1, a data table, an app container with a loader, and a six-section scale.
Styling the app part 111:18
Style the JavaScript air quality app with a header and container using box-sizing border-box, 100vh min height, inter font, and a loader with opacity, visibility transitions, and autosave toggle.
Styling the app part 211:48
Style the JavaScript air quality app by hiding the loader, centering the emoji logo, and building a responsive pollution scale with color bands and calculated bar widths.
Making the API call6:44
Make an async API call to fetch air quality data for the nearest city, parse the JSON, and map the AQI to a pollution scale object for display.
Populating the UI5:34
Bind city name, pollution info, and AQI to DOM elements and update the header with an active class and background, while showing and then hiding the loader during data load.
Pointer placement5:25
Place the pointer on the pollution scale by computing translateX from the AQI value over 501, using the location pointer’s width and -50% offset, and verify calculations with logs.
Handle errors6:55
Master error handling in fetch requests by using try-catch, validating response data, and throwing descriptive errors for client and server HTTP statuses, while updating UI loader and messaging.

Hello everyone and welcome to this JavaScript - Web Development course.

We are going to code together an application to display the level of pollution of your location in JavaScript.

We'll code everything from A to Z, from basic HTML structure, to CSS styling, ending with JavaScript functionalities.

Knowing how to manipulate data in JavaScript is crucial, so we'll use the fetch() method to send HTTP requests to retrieve data.

The API we'll be using is called IQair, and good news, it's free.

This kind of project is perfect for you to improve your web development skills, you can see a lot of key concepts there.

As usual, the source code will be provided, as well as the starting code.

Depending on your level, you can try to create this project on your own, on your side, or follow the entire course while coding with me.

It's up to you to do what you want with it afterwards, as a memory aid or using it in future projects.

The only forbidden thing is to redo a course / tutorial based on the same source code, that's obvious.

As a prerequisite, simple knowledge of HTML-CSS-JS is a plus, but I explain each line of code in detail.

See you on the other side to start coding.