Skip to content

Commit 3ce9dc9

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1071 from Divyanshu9822/#827_AirQuality_Divyanshu9822
Updated UI, user experience and README for "Air-Quality" project
2 parents bad3d19 + 4bbe6e2 commit 3ce9dc9

5 files changed

Lines changed: 417 additions & 254 deletions

File tree

‎Projects/Air-Quality/README.md‎

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,57 @@
1-
This is the web application which is built from scratch by using Html, Css and JavaScript. In order to know the atmosphere of any particular location
2-
you just need to enter the longitude and latitude of any particular place. It can also detect these 2 coordinates automatically by enabling auto detect location.
3-
Based on the value it can tell whether the weather is good or bad.
4-
![GitHub - Google Chrome 1_25_2023 9_56_27 AM](https://user-images.githubusercontent.com/59620280/214479823-64dee5f7-2d68-46a1-b1be-735126a747ff.png)
1+
# Air-Quality
52

3+
Air-Quality is a web application that allows users to input coordinates and fetch air pollution details such as the concentration of pollutants in the air and the status of air quality based on the pollution level. The application provides a user-friendly interface and also supports retrieving data based on the user's current location if location services are enabled.
4+
5+
## Features
6+
7+
- Input latitude and longitude coordinates to fetch air pollution details.
8+
- Retrieve air pollution data including the concentration of pollutants in the air.
9+
- Display the air quality status based on the pollution level.
10+
- Support for automatic retrieval of data based on the user's current location.
11+
- Interactive modal popup to display the fetched air quality information.
12+
- Responsive design for a seamless user experience across different devices.
13+
14+
## Technologies Used
15+
16+
- HTML
17+
- CSS
18+
- JavaScript
19+
20+
## Screenshots
21+
22+
![](https://github.com/TusharKesarwani/Front-End-Projects/assets/90151736/2fc47a46-6b8d-427f-863d-33b885e01c4e)
23+
24+
![](https://github.com/TusharKesarwani/Front-End-Projects/assets/90151736/9e012867-f46d-4269-94d7-89bfa581d001)
25+
26+
27+
## Getting Started
28+
29+
To run the Air-Quality application locally, follow these steps:
30+
31+
1. **Clone the repository**:
32+
33+
```bash
34+
git clone https://github.com/TusharKesarwani/Front-End-Projects.git
35+
```
36+
37+
2. **Navigate to the project directory**:
38+
39+
```bash
40+
cd Projects
41+
cd Air-Quality
42+
```
43+
3. Open the **index.html** file in your preferred web browser or in VS Code click on **Go Live** to open with live server.
44+
45+
4. Start exploring the **Air-Quality** application by entering the desired coordinates or allowing location services to fetch air pollution details.
46+
47+
## Contributing
48+
49+
Contributions to the Air-Quality project are welcome and encouraged! If you encounter any issues or have suggestions for improvement, please raise an issue.
50+
51+
If you would like to contribute code to the project, please follow these steps:
52+
53+
1. Fork the repository.
54+
2. Create a new branch for your feature or bug fix.
55+
3. Make your changes and commit them.
56+
4. Push your changes to your forked repository.
57+
5. Submit a pull request to the main repository.

‎Projects/Air-Quality/bgImage.png‎

1.35 MB
Loading

‎Projects/Air-Quality/index.html‎

Lines changed: 76 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,88 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Atmospheric Air Quality Checker</title>
7-
<link rel="stylesheet" href="./style.css" />
8-
<link rel="preconnect" href="https://fonts.gstatic.com">
9-
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@700&family=Montserrat:wght@700&family=Poppins&display=swap" rel="stylesheet">
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Air Pollution - Checker</title>
8+
<link rel="stylesheet" href="style.css">
109
</head>
1110
<body>
12-
<div class="root">
13-
<h1 class="heading">Atmospheric Air Quality Checker</h1>
14-
<div class="location-container">
15-
<h3 class="sub-heading">Please Enter Your Location:</h3>
16-
<h4 class="">(For autometic location, kindly permit the system to access the location)</h4>
17-
<label for="error-msg" style="color: red;"></label><br />
18-
<input
19-
type="number"
20-
name="lat"
21-
placeholder="Enter Latitude Here"
22-
id="latitude"
23-
step="0.0001"
24-
class="loc-input" />
25-
26-
<input
27-
type="number"
11+
<main>
12+
<div class="container">
13+
<h2 class="header">
14+
Air Quality and Pollution Checker
15+
</h2>
16+
<div class="card">
17+
<h2>Please enter the location</h2>
18+
19+
<label for="error-msg" style="color: red;"></label><br />
20+
<input type="number"
21+
name="lat"
22+
placeholder="Enter Latitude Here"
23+
id="latitude"
24+
step="0.0001"
25+
class="loc-input" />
26+
27+
<input type="number"
2828
name="lon"
2929
placeholder="Enter Longitude Here"
3030
id="longitude"
3131
step="0.0001"
3232
class="loc-input" />
33-
<button class="search-btn">Search</button>
34-
</div>
35-
<hr>
36-
<div class="air-info">
37-
<h2 class="sub-heading">Air Quality Index at following location is:</h2>
38-
<span class="air-quality">...</span>
39-
<span class="arr">&nbsp;&rarr;&nbsp;</span>
40-
<span class="air-quality-status">...</span>
41-
<div class="component-container">
42-
<h2 class="sub-heading">
43-
Concentration of Pollutants in Air is as follows:
44-
</h2>
45-
46-
<div>
47-
<h3 class="component-names">Carbon Monoxide :-</h3>
48-
<span class="component-val" data-comp="co"></span>
49-
</div>
50-
<div>
51-
<h3 class="component-names">Nitrogen Monoxide :-</h3>
52-
<span class="component-val" data-comp="no"></span>
53-
</div>
54-
<div>
55-
<h3 class="component-names">Nitrogen Dioxide :-</h3>
56-
<span class="component-val" data-comp="no2"></span>
57-
</div>
58-
<div>
59-
<h3 class="component-names">Ozone :-</h3>
60-
<span class="component-val" data-comp="o3"></span>
61-
</div>
62-
<div>
63-
<h3 class="component-names">Sulphur Dioxide :-</h3>
64-
<span class="component-val" data-comp="so2"></span>
65-
</div>
66-
<div>
67-
<h3 class="component-names">Fine Particles Matter :-</h3>
68-
<span class="component-val" data-comp="pm2_5"></span>
69-
</div>
70-
<div>
71-
<h3 class="component-names">Coarse Particulate Matter :-</h3>
72-
<span class="component-val" data-comp="pm10"></span>
73-
</div>
74-
<div>
75-
<h3 class="component-names">Ammonia :-</h3>
76-
<span class="component-val" data-comp="nh3"></span>
77-
</div>
78-
<!-- micrograms per cubic meter of air (μg/m3) -->
79-
</div>
80-
</div>
81-
<hr>
82-
<h2 class="sub-heading">Self Analyze here and follow the Prevantion Measures:</h2>
83-
<br>
84-
<h3>Know more about Air Quality Index (AQI) <b><a href="https://en.wikipedia.org/wiki/Air_quality_index">Here!</a></b></h3><br>
85-
<h3>For people with "GOOD" Air Quality Index (AQI) <b><a href="https://www3.epa.gov/region1/airquality/reducepollution.html">Here!</a></b></h3><br>
86-
<h3>For people with "FAIR" Air Quality Index (AQI) <b><a href="https://www3.epa.gov/region1/airquality/reducepollution.html">Here!</a></b></h3><br>
87-
<h3>For people with "MODERATE" Quality Index (AQI) <b><a href="https://www3.epa.gov/region1/airquality/reducepollution.html">Here!</a></b></h3><br>
88-
<h3>For people with "POOR" Air Quality Index (AQI) <b><a href="https://www3.epa.gov/region1/airquality/reducepollution.html">Here!</a></b></h3><br>
89-
<h3>For people with "VERY POOR" Air Quality Index (AQI) <b><a href="https://www.airnow.gov/aqi/aqi-basics/extremely-high-levels-of-pm25/">Here!</a></b></h3><br>
90-
91-
<hr>
92-
<h2 class="sub-heading">Visit following websites for more Information on Air Quality Index (AQI):</h2>
93-
<br>
94-
<h3><b><a href="https://waqi.info/">World's Air Pollution: Real-time Air Quality Index </a></b></h3><br>
95-
<h3><b><a href="https://www.airnow.gov/aqi/aqi-basics/">Air Quality Index (AQI) Basics</a></b></h3><br>
9633

97-
<hr>
98-
99-
</div>
100-
<script src="./script.js" defer></script>
34+
<button class="search-btn">Search</button>
35+
</div>
36+
</div>
37+
38+
<div id="myModal" class="modal">
39+
<div class="modal-container">
40+
<div class="modal-content">
41+
<span class="close">&times;</span>
42+
<h2 class="sub-heading">Air Quality Index is <span class="air-quality">...</span>
43+
<span class="air-quality-status">...</span>
44+
</h2>
45+
46+
<div class="component-container">
47+
<h2 class="sub-heading">Concentration of Pollutants in the air</h2>
48+
<div>
49+
<h3 class="component-names">Carbon Monoxide:</h3>
50+
<span class="component-val" data-comp="co"></span>
51+
</div>
52+
<div>
53+
<h3 class="component-names">Nitrogen Monoxide:</h3>
54+
<span class="component-val" data-comp="no"></span>
55+
</div>
56+
<div>
57+
<h3 class="component-names">Nitrogen Dioxide:</h3>
58+
<span class="component-val" data-comp="no2"></span>
59+
</div>
60+
<div>
61+
<h3 class="component-names">Ozone:</h3>
62+
<span class="component-val" data-comp="o3"></span>
63+
</div>
64+
<div>
65+
<h3 class="component-names">Sulphur Dioxide:</h3>
66+
<span class="component-val" data-comp="so2"></span>
67+
</div>
68+
<div>
69+
<h3 class="component-names">Fine Particles Matter:</h3>
70+
<span class="component-val" data-comp="pm2_5"></span>
71+
</div>
72+
<div>
73+
<h3 class="component-names">Coarse Particulate Matter:</h3>
74+
<span class="component-val" data-comp="pm10"></span>
75+
</div>
76+
<div>
77+
<h3 class="component-names">Ammonia:</h3>
78+
<span class="component-val" data-comp="nh3"></span>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</main>
86+
<script src="script.js"></script>
10187
</body>
102-
</html>
88+
</html>

0 commit comments

Comments
 (0)