Skip to content

Commit c2617a2

Browse files
Divyanshu9822Divyanshu9822
committed
Enhanced UI and Fixed functionalities
1 parent 502f2ca commit c2617a2

4 files changed

Lines changed: 361 additions & 250 deletions

File tree

‎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)