Skip to content

Commit 577033f

Browse files
lagan-devlagan-dev
authored
Merge branch 'TusharKesarwani:main' into improve-analog-clock
2 parents 65e230d + 5a6aa06 commit 577033f

249 files changed

Lines changed: 7107 additions & 1684 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎CONTRIBUTING.md‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,48 @@
1-
While on one hand our repository is a good place for beginners to contribute something useful to open source, on the other hand it is also a good place for experienced people to contribute something useful to open source. We welcome contributions from everyone. However some people tend to spam the repository with irrelevant pull requests and get one PR for SWoC 3.0 and other such open source events. We do not want that to happen. So we have a few guidelines that we would like you to follow. In case we find your PR not relevant or spam, we will mark it as invalid and it will not be counted towards SWoC 3.0.
1+
<h1 align="center">Contributors Guide⚡ </h1>
2+
<h3 align="center">Welcome to our open-source project! 😍<br> We appreciate your interest in contributing.😊 <br>This guide will help you get started with the project and make your first contribution.</h3>
3+
4+
5+
6+
<h1 align="center">Creating first Pull Request 🌟</h1>
7+
8+
---
9+
1. Fork this repository.
10+
2. Clone the forked repository.
11+
```css
12+
git clone https://github.com/<your-github-username>/Front-End-Projects.git
13+
```
14+
15+
3. Navigate to the project directory.
16+
```py
17+
cd Front-End-Projects
18+
```
19+
4. Create a new branch.
20+
```css
21+
git checkout -b <your_branch_name>
22+
```
23+
5. Make changes.
24+
6. Stage your changes and commit
25+
```css
26+
git add .
27+
git commit -m "<your_commit_message>"
28+
```
29+
7. Push your local commits to the remote repo.
30+
```css
31+
git push -u origin <your_branch_name>
32+
```
33+
8. Create a Pull Request.
34+
9. Congratulations! 🎉 you've made your contribution.
35+
36+
37+
38+
<h1 align="center">Communication and Support 💬</h1>
39+
<p align="center">Join the project's communication channels to interact with other contributors and seek assistance.</br>If you have any questions or need help, don't hesitate to ask in the project's communication channels or comment on the relevant issue.</p>
40+
41+
<h1 align="center">Code of Conduct 😇</h1>
42+
<p align="center">Please follow our project's code of conduct while contributing.</br>Treat all contributors and users with respect and create a positive and inclusive environment for everyone.</p>
43+
44+
<h1 align="center">License 📄</h1>
45+
<p align="center">The project is licensed under [MIT]. Make sure to review and comply with the license terms.</br>We hope this guide helps you get started with contributing to our open-source project. Thank you for your contribution!</p>
46+
47+
<h1 align="center">Note from Author ❗</h1>
48+
<p align="center">While on one hand our repository is a good place for beginners to contribute something useful to open source, on the other hand it is also a good place for experienced people to contribute something useful to open source.</br>We welcome contributions from everyone. However some people tend to spam the repository with irrelevant pull requests and get one PR for SSOC 2.0 and other such open source events. We do not want that to happen.</br>So we have a few guidelines that we would like you to follow. In case we find your PR not relevant or spam, we will mark it as invalid and it will not be counted towards SSOC 2.0.</p>

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