A PROJECT REPORT

ON

AQI INDICATOR
SUBMITTED BY
KRITI KALAI 23IUT0010041
BASKAR DEBBARMA 23IUT0010037
RIKEL DEBBARMA 23IUT0010038
PRANTIK PAL 23IUT0010046
KINGSHOK BHATTACHARJEE 23IUT0010011

IN PARTIAL FULFILLMENT FOR THE AWARD OF THE DEGREE

OF
B. TECH
UNDER THE GUIDANCE OF

PROF. SANJIB DEBNATH

ASSISTANT PROFESSOR

THE ICFAI UNIVERSITY, TRIPURA

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
ICFAI TECHNICAL SCHOOL
FACULTY OF SCIENCE AND TECHNOLOGY

COURSE CODE: ESP 211

THEME PROJECT IV
MAY, 2025
 THE ICFAI UNIVERSITY, TRIPURA
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE

This is to certify that the project titled “AQI INDICATOR” is the bona fide work carried out by
Kingshok Bhattacharjee, Prantik Pal, Kriti Kalai, Baskar Debbarma, Rikel Debbarma, student
of
B. Tech (CSE). The ICFAI University, Tripura during the academic year Semester-IV, 2024-
2025, in partial fulfillment of the requirements for the award of the degree of B. Tech (CSE)
and that the project has not formed the basis for the award previously of any other degree,
diploma, fellowship or any other similar title.

Signature: ………………………… Signature: ………………………….

Prof. Sanjib Debnath Dr. Saptarshi Chakaborty
Assistant Professor HOD, CSE
CSE

Signature: ……………………….
Dr. Abhijit Biswas Signature: ………………………
Dr. Prasanta Kumar Sinha
Co-Ordinator Principal, ITS
CA & CSE
 THE ICFAI UNIVERSITY, TRIPURA
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

DECLARATION OF STUDENT

I hereby declare that the project entitled “AQI INDICATOR” submitted for the B.Tech(CSE) degree
is my original work, and the project has not formed the basis for the award of any other degree,
diploma, fellowship or any other similar titles.

Student Name ID Signature

Baskar Debbarma 23IUT0010037

Kriti Kalai 23IUT0010041

Rikel Debbarma 23IUT0010038

Prantik Pal 23IUT0010046

Kingshok Bhattacharjee 23IUT0010011

 ABSTRACT

The Air Quality Index (AQI) is a standardized metric used to assess and communicate air
pollution levels. It provides real-time data on the concentration of key pollutants, including
particulate matter (PM2.5 and PM10), ozone (O₃), nitrogen dioxide (NO₂), sulfur dioxide
(SO₂), and carbon monoxide (CO). AQI values range from 0 to 500, with higher values
indicating worse air quality and greater health risks. AQI above 300 signifies hazardous air
conditions, posing severe health risks, particularly for sensitive groups such as children, the
elderly, and individuals with respiratory or cardiovascular diseases. Measuring AQI involves
data collection from monitoring stations equipped with sensors that analyze pollutant
concentrations in the atmosphere. These measurements are then converted into a standardized
AQI value using government or international guidelines, such as those from the U.S.
Environmental Protection Agency (EPA) or the World Health Organization (WHO).
Technological advancements have led to the development of low-cost portable sensors and
satellite-based remote sensing, enhancing AQI monitoring capabilities worldwide. A high
AQI of 300 or more typically results from factors such as industrial emissions, vehicular
pollution, wildfires, and unfavorable meteorological conditions that trap pollutants near the
ground. Prolonged exposure to such levels can lead to severe respiratory problems, heart
disease, and even premature death. Governments and health agencies issue public advisories
during hazardous AQI conditions, recommending reduced outdoor activities and the use of
protective masks. Efficient AQI measurement and public awareness are crucial for mitigating
air pollution's impact on human health and the environment. Policy interventions, such as
emission control regulations and urban green initiatives, play a vital role in improving air
quality. Continued advancements in air monitoring technologies and increased public
engagement are essential for reducing exposure to harmful pollutants and promoting healthier
living conditions. The site features intuitive UI elements such as color-coded AQI indicators,
pollutant-level breakdowns, and geolocation-based AQI display. It is optimized for both
mobile and desktop devices, ensuring accessibility and usability. This project aims to promote
environmental awareness and assist users in making informed decisions based on current air
quality conditions allowing users to monitor pollution levels and take preventive measures.

iv
 ACKNOWLEDGMENT

We would like to express my sincere gratitude to everyone who contributed to the successful
completion of this study on measuring Air Quality Index (AQI). This project would not have
been possible without the guidance, support, and resources provided by various individuals
and organizations. First and foremost, we are deeply thankful to our mentors and supervisors
for their valuable insights and constructive feedback throughout the research process. Their
expertise in environmental science and air quality monitoring has been instrumental in
shaping this study. We extend my appreciation to the environmental agencies and
meteorological departments for providing crucial data on air pollution levels, particularly in
areas where AQI levels reach 300 or higher. Their data has been fundamental in
understanding the impact of high AQI levels on public health and the environment.
Additionally, we would like to acknowledge the support of my peers and colleagues who
have contributed through discussions, suggestions, and encouragement. Their perspectives
have helped refine the methodology and analysis of AQI measurements. We are grateful to
the communities and individuals who participated in surveys and shared their experiences
regarding the effects of poor air quality. Their first-hand accounts have provided valuable
real- world insights into the challenges faced during high pollution periods. Finally, we
would like to express my appreciation to my family and friends for their unwavering support
and motivation throughout this research. Their encouragement has been a driving force in
completing this study. This acknowledgment is a small token of appreciation for all those
who have contributed to this research on measuring AQI, particularly at critical levels of 300
and above. I hope that the findings of this study will contribute to raising awareness and
promoting better air quality management. We extend my thanks to online platforms and open-
source communities whose documentation and tutorials were instrumental in enhancing my
understanding of web development and integrating real-time AQI data through APIs. Lastly,
we appreciate the encouragement and feedback from my friends and family, which helped me
to stay consistent and motivated and improve the project continuously.

v
 Table of Contents
Contents
Page No.
Cover & Title Page
i
Certificate ii
Declaration of the Student iii
Abstract iv
Acknowledgement v

1. INTRODUCTION 1-7

1.1. Project Definition 2-4

1.1.1. Project Overview 3
1.1.2. Core Features 3-4
1.1.3. Technical Implementation 4

1.2. Project specifications 4-5

1.3. Software Specifications 5-7

1.3.1. Overview 5
1.3.2. Precaution Display Features 6
1.3.3. Theme Customization 6
1.3.4. Gas Specific Measurement Data 6
1.3.5. Search by Location Features 6
1.3.6. Mobile Responsiveness 6
1.3.7. User Interface & Experience 6-7

1.4. Hardware Specifications 7

2. LITERATURE SURVEY 8-17

2.1. Existing System 9-10

2.1.1. Technologies for AQI Website Development 9-10
2.1.2. Data Fetching Methods 10
2.1.3. Design Considerations for AQI Website 10
2.1.4. Challenges in AQI Website Development 10

2.2. Proposed System 10-14

2.2.1. System Overview 11-12
2.2.2. Tools & Technologies Frontend 12-13
 Contents Page No.

2.2.3. Expected Outcome 13-14

2.3. Feasibility Study 14-17

2.3.1. Feasibility Analysis 14
2.3.2. Technical Feasibility 14-15
2.3.3. Economic Feasibility 15
2.3.4. Operational Feasibility 16
2.3.5. Legal Feasibility 16-17

3. SYSTEM ANALYSIS & DESIGN 18-39

3.1. Requirement Specification: Air Quality Index (AQI) Measurement 18-21
3.2. Flowchart 22
3.3. Design and Test Steps 23-25
3.4. Algorithms and Pseudo Code 26-31
3.5. Testing Process 32-35

4. RESULTS/OUTPUTS 36-37
5. CONCLUSIONS 38
6. REFERENCES 39
 1. INTRODUCTION

Welcome to our advanced AQI (Air Quality Index) monitoring website, crafted using HTML, CSS, and
JavaScript to provide users with a real-time, interactive, and user-friendly experience. The main
objective of this platform is to help individuals stay informed about the air quality around them by
providing up-to-date data and personalized health advice. Our AQI website goes beyond basic
pollution statistics. One of its standout features is a detailed section dedicated to precautionary
measures. Based on the current air quality level, users receive tailored suggestions to minimize
exposure to harmful pollutants. Whether the air is moderately polluted or hazardous, the site
advises users on actions like wearing masks, limiting outdoor activities, or using air purifiers
indoors.
To enhance the browsing experience, the platform offers a theme change option, allowing users to toggle
between light and dark modes according to their preference or time of day. This not only
improves visibility but also ensures a comfortable viewing experience, especially in different
lighting conditions. Another key feature is the detailed gas measurement display. The website
tracks and presents real-time data for various harmful gases such as PM2.5, PM10, CO (Carbon
Monoxide), NO2 (Nitrogen Dioxide), SO2 (Sulfur Dioxide), and O3 (Ozone). Each gas reading is
color-coded and paired with relevant health impact information, making the data easily
understandable even for users without a technical background.
To make the platform truly versatile, we’ve integrated a search option that allows users to check the AQI
of different places by simply typing in the location. Whether you're planning a trip or checking on
family in another city, this feature ensures you're always informed about the air quality in any
region. Air pollution is a significant environmental and public health concern, affecting millions
of people worldwide. To monitor and communicate the quality of air, the Air Quality Index (AQI)
is used as a standardized measure. AQI provides a numerical value that represents the level of air
pollution in a specific location, helping individuals and authorities take necessary precautions.
The AQI is calculated based on the concentration of key air pollutants, including particulate
matter (PM2.5 and PM10), ozone (O3), carbon monoxide (CO), sulfur dioxide (SO2), and
nitrogen dioxide (NO2). Each pollutant has a specific health impact, and its concentration is
measured in micrograms per cubic meter (µg/m³) or parts per million (ppm). The highest value
among these pollutants determines the overall AQI for that area. AQI values are divided into
different categories, ranging from 0 to 500, to indicate the level of health concern. A higher AQI
value signifies worse air quality.

1|Page
The categories include:
0–50 (Good): Air quality is satisfactory, posing little to no risk. 51–100 (Moderate): Acceptable
air quality but may cause issues for sensitive individuals. - 101–150 (Unhealthy for Sensitive
Groups): Children, elderly people, and those with respiratory conditions may experience health
effects.
151–200 (Unhealthy): Everyone may begin to experience health effects, with greater risks for
sensitive groups- 201–300 (Very Unhealthy): Increased health risks for everyone, with serious
effects for sensitive groups. - 301–500 (Hazardous): Severe health warnings; emergency
measures are necessary. Governments and environmental agencies worldwide use AQI data from
monitoring stations to inform the public and implement policies to reduce pollution. Individuals
can also check AQI levels via websites, apps, and sensors to take precautions such as wearing
masks, using air purifiers, or limiting outdoor activities. Monitoring AQI is essential for
protecting health and ensuring environmental sustainability.
Climate Change – Greenhouse gases like CO₂ and methane contribute to global warming. Acid
Rain – Sulfur dioxide and nitrogen oxides react with water vapor, forming acid rain that damages
soil, water bodies, and vegetation. Smog Formation – High ozone levels create smog, which
reduces visibility and affects plant growth. Harm to Wildlife – Air pollution can damage
ecosystems, affect animal health, and disrupt food chains. Monitoring AQI is essential for
reducing pollution, improving public health, and protecting the environment. By adopting
sustainable practices, using clean energy sources, and enforcing regulations, we can work towards
better air quality and a healthier planet. Lastly, the entire website is built to be mobile-friendly.
With a responsive layout and optimized performance across different screen sizes, users can
easily access all features from their smartphones or tablets. The design ensures smooth
navigation, fast loading times, and a visually appealing interface on all devices. With a
combination of useful features, clean design, and responsive performance, our AQI website
serves as a reliable tool for tracking air quality and making informed lifestyle decisions based on
environmental conditions.

1.1. Project Definition

Air pollution is a significant environmental and public health concern, requiring accurate and
real- time measurement of air quality. The Air Quality Index (AQI) is a standardized metric used
to quantify air pollution levels based on various pollutants, such as particulate matter(PM2.5 and
PM10), nitrogen dioxide (NO₂), sulfur dioxide (SO₂), carbon monoxide (CO), and ozone (O₃).
The challenge lies in effectively measuring AQI to provide timely and reliable data for
2|Page
individuals, policymakers, and environmental agencies. Current methods for measuring AQI
include ground-

3|Page
based monitoring stations, satellite observations, and low-cost sensor networks. However, issues
such as data accuracy, spatial coverage, calibration, and accessibility limit the effectiveness of
AQI monitoring. In urban areas, AQI varies significantly across locations, making real-time,
localized monitoring crucial. Additionally, traditional monitoring stations are expensive and
require maintenance, limiting their deployment in resource-constrained regions. The need for an
efficient, cost-effective, and scalable AQI measurement system is critical for air pollution
management and public health. By leveraging advanced technologies such as machine learning,
and data analytics, a robust AQI measurement framework can enhance pollution tracking and
early warning systems, enabling informed decision-making and improved air quality
management. High AQI levels indicate increased health risks, especially for vulnerable groups
like children, the elderly, and those with respiratory conditions. Monitoring AQI is essential for
promoting public health, supporting environmental policies, and encouraging actions to reduce
air pollution. An AQI measuring app with a 3D design can enhance user engagement by
providing interactive visualizations, real-time data, and insights on air quality trends, making it
easier for individuals to take preventive measures for a healthier environment.

Project Title: Interactive and Mobile-Friendly AQI Monitoring Website.

1.1.1. Project Overview:

The AQI Monitoring Website is a responsive and user-friendly web application built using
HTML, CSS, and JavaScript. Its primary goal is to provide users with real-time air quality data
for different locations. The website displays AQI levels, specific gas measurements, and relevant
health precautions. It is designed to work seamlessly across devices, ensuring accessibility and
ease of use on both desktop and mobile platforms.

1.1.2. Core Features:

a. Air Quality Index Display with Gas Breakdown:

The website fetches and displays AQI values for different locations, showing an overall air
quality rating. In addition to the general AQI, it provides individual gas measurements,
including PM2.5, PM10, CO (Carbon Monoxide), NO2 (Nitrogen Dioxide), SO2 (Sulfur
Dioxide), and O3 (Ozone). Each gas level is visually represented with color codes and icons to
enhance clarity and understanding.

4|Page
b. Health Precautions Section:

Based on the AQI levels, the site dynamically shows health-related precautions. For example,
when AQI is "Unhealthy," it displays warnings for sensitive groups and suggests reducing
outdoor activity. This section adapts to the air quality data and gives tailored advice to help
users make informed decisions.

c. Theme Switching Option:

The website includes a toggle feature that allows users to switch between light and dark themes.
This improves visual comfort and accessibility, especially in different lighting environments.
The theme preference is stored locally so that it remains consistent on return visits.

d. Search Functionality for Multiple Locations:

Users can search for real-time air quality data by entering the name of any city or location. The
search bar is powered by JavaScript and may use an external API to fetch data for various
regions. This feature allows users to monitor AQI for their own area or other places of interest
worldwide.

e. Responsive and Mobile-Friendly Design:

The website uses responsive web design principles with media queries and flexible layout
components to ensure it works well on mobile phones and tablets. Buttons, menus, and
interactive elements are touch-optimized. The mobile version maintains all core features without
compromise.

1.1.3. Technical Implementation:

Frontend: Built entirely with HTML 5 for structure, CSS3 for styling and responsiveness, and
JavaScript for interactivity and API integration. API Integration: Uses an AQI or weather API
(e.g., OpenWeatherMap, AirVisual) to fetch real-time air quality and gas measurement data.
Local Storage: JavaScript local storage is used to save user preferences like theme selection.
UX/UI Design: Clean, modern, and intuitive design with an emphasis on accessibility and quick
information delivery.

1.2. Project Specifications

5|Page
The AQI Indicator is a comprehensive software system designed to monitor and evaluate air

6|Page
quality in real time by calculating the Air Quality Index (AQI) based on the concentration levels
of key atmospheric pollutants. These pollutants typically include PM2.5 (fine particulate
matter), PM10 (coarse particulate matter), nitrogen dioxide (NO₂), sulphur dioxide (SO₂),
carbon monoxide (CO), and ozone (O₃). The system aggregates pollutant data from
environmental sensors or third-party APIs, processes the data using standardized AQI
computation models such as those provided by the U.S. Environmental Protection Agency
(EPA) or the Central Pollution Control Board (CPCB) of India, and outputs a single, simplified
AQI value that reflects the overall air quality status of a particular region or location.
The AQI Indicator system is composed of several integrated components including data
ingestion, AQI computation logic, a database for storage of raw and computed values, and user
interfaces for displaying information. The system is designed with a responsive and intuitive
frontend, available as a web dashboard and optionally a mobile application, providing users
with live AQI data, color-coded indicators (e.g., green for good, red for hazardous), pollutant-
specific information, historical trends, and health advisories. Additionally, the system includes
an alert module that notifies users through SMS, email, or push notifications when AQI levels
surpass predefined thresholds, enabling them to take appropriate health precautions. The
backend of the system is developed using scalable technologies, such as Python (Flask or Fast
API) or Node.js, and integrates a time-series or relational database (like Timescale DB or
PostgreSQL) to manage large volumes of temporal air quality data. APIs facilitate real-time
data access and integration with other platforms. The AQI Indicator is built with scalability and
reliability in mind, ensuring high availability and the ability to handle data from numerous
sensors across multiple geographic locations. Security features such as authentication, role-
based access control, and encrypted data transmission are incorporated to protect sensitive user
data and maintain system integrity. Ultimately, the AQI Indicator aims to bridge the gap
between complex environmental data and public awareness, providing an accessible, actionable
tool for individuals, communities, and regulatory bodies to monitor and respond to air pollution
effectively.

1.3. Software Specifications

1.3.1. Overview:
The AQI website is a fully responsive web application designed to display real-time air quality
data for various locations. Built using HTML, CSS, and JavaScript, the site provides users with
crucial information on air pollutants and their potential health effects. The application is

7|Page
optimized for mobile and desktop platforms, ensuring seamless access across different devices.

8|Page
 1.3.2. Precaution Display Feature:
One of the core functionalities of the AQI website is its ability to provide health-related
precautions based on the current air quality level. For each AQI range, the website displays
dynamically generated precautionary advice. For example, when the AQI level is “Unhealthy,”
the site will suggest avoiding outdoor exercise, wearing masks, or using air purifiers. This content
is fetched and updated based on live AQI readings using JavaScript.

1.3.3. Theme Customization:

The website includes a theme-changing feature, allowing users to switch between light and dark
modes. This is implemented through CSS variable manipulation and JavaScript event listeners,
giving users a comfortable viewing experience in different lighting conditions. The theme
preference is saved in the browser’s local storage to persist across sessions.

1.3.4. Gas-specific Measurement Data:

The site breaks down AQI values by specific gases such as PM2.5, PM10, CO, NO2, O3, and
SO2. Each gas is displayed with its individual concentration, unit of measurement, and health
impact tooltip. A visually intuitive graph or colored indicators help users understand the severity
of each pollutant, making the data more digestible even for non-technical users.

1.3.5. Search by Location Feature:

Users can search for air quality data by typing a city or region name into the search bar. The site
uses JavaScript to fetch data from an external AQI API, dynamically displaying results without
reloading the page. It also handles errors gracefully by showing messages when data for a
location is unavailable or incorrectly entered.

1.3.6. Mobile Responsiveness:

The website is designed with a mobile-first approach using media queries and flexible layouts. On
smaller screens, the UI elements stack vertically, and buttons are large enough to be tapped

comfortably. The responsive layout ensures that features such as search, gas breakdown, and
theme toggle work smoothly on phones and tablets.

1.3.7. User Interface and Experience:

The interface is designed to be clean, visually appealing, and intuitive. Animations and transitions

9|Page
 enhance usability without hindering performance. Icons and labels are used effectively to
represent various pollutants, making the website engaging and informative for all age groups.

1.4. Hardware Specifications

For an Air Quality Index (AQI) website built with HTML, CSS, and JavaScript, the hardware
requirements are minimal because the website runs in a web browser. However, here’s a breakdown
of the recommended hardware specifications for both development and user access:
a. For Developers (Development
Machine) To build and test the AQI website
effectively:
Minimum Requirements:
Processor: Dual-core CPU (e.g., Intel i3 or equivalent), RAM: 4 GB, Storage: 128 GB SSD or HDD
(for faster load times, SSD is better), Display: 1366×768 resolution, Browser: Latest version of
Chrome, Firefox, or Edge, OS: Windows 10, macOS, or any modern Linux distro.

Recommended Requirements:
Processor: Quad-core CPU (e.g., Intel i5 or AMD Ryzen 5), RAM: 8 GB or more, Storage: 256 GB
SSD, Display: Full HD (1920×1080), Extra: Good internet connection for using APIs, testing, and
deploying.

b. For End Users (Visitors to the

Website) Minimum Requirements:
Device: Smartphone, tablet, or computer, Browser: Any modern browser (Chrome, Firefox, Edge,
Safari), RAM: 1 GB (for mobile), 2 GB (for desktop), Internet: Basic broadband or mobile data (for
loading API data), Additional Considerations (for Real-Time AQI Sites)

If your site:
Uses real-time AQI data (from sensors or APIs),
Has a 3D visualization or maps (e.g., using WebGL or Leaflet).

Includes animation or large datasets, then it would benefit from:

Better GPU support (especially for 3D graphics), More RAM (at least 8 GB) for development,
Efficient data handling in JavaScript.

10 | P a g e
 2. LITERATURE SURVEY
Air Quality Index (AQI) websites play a vital role in informing the public about the level of air
pollution and its potential health impacts. Numerous AQI monitoring platforms have been
developed globally, with most leveraging modern web technologies such as HTML, CSS, and
JavaScript for efficient performance and user-friendly design. These front-end technologies
enable the creation of responsive and interactive interfaces suitable for a wide range of devices,
including mobile phones. Several AQI websites integrate multiple core features, one of which is
the display of health precautions based on pollution levels. For example, websites like AirVisual
and AQICN offer dynamic content that adjusts according to the AQI values and informs users
about protective measures like wearing masks, avoiding outdoor exercise, and using air
purifiers. This functionality is often implemented using JavaScript to fetch real-time data via
APIs and update content dynamically without page reloads. Theme-changing functionality is
another commonly adopted feature in AQI websites to enhance user experience and
accessibility. By employing JavaScript along with CSS custom properties, users can toggle
between light and dark modes, which helps in reducing eye strain and improving visibility in
different lighting environments. Websites implementing this feature often save user preferences
using browser local storage to maintain consistency across sessions. In terms of technical
capability, many AQI platforms now measure not only overall AQI but also provide detailed
breakdowns of specific pollutants like PM2.5, PM10, NO2, SO2, CO, and O3. This helps users
better understand what specific gases are contributing to poor air quality. A robust search
feature is also essential in AQI websites to allow users to find air quality data for various
locations. This is generally implemented using JavaScript-based autocomplete and location-
fetching APIs such as Google Places. Users can search for cities or regions, and the site
dynamically updates the AQI information relevant to the queried area, often with added location
pinning on embedded maps.
Lastly, ensuring mobile-friendliness is crucial for maximizing reach and usability. Responsive
web design principles, including media queries in CSS and flexible grid layouts, ensure that
AQI websites render effectively across different screen sizes and orientations. Many such
platforms use mobile-first design strategies, ensuring that features such as navigation menus,
data visualization, and input fields are optimized for smaller touchscreens without
compromising performance.

11 | P a g e
 2.1. Existing System

Air Quality Index (AQI) is a crucial indicator used to measure air pollution levels and their
impact on human health. Developing an AQI website using HTML, CSS, and JavaScript enables
real- time monitoring of air quality in different locations, providing users with an interactive and
user- friendly platform. This literature survey explores existing AQI websites, technologies used,
and best practices for designing a functional and visually appealing platform. The existing AQI
website is a responsive, mobile-friendly platform designed using HTML, CSS, and JavaScript.
The layout adapts seamlessly across devices, ensuring accessibility and ease of use for both
desktop and mobile users. Its user interface is clean and intuitive, offering a smooth user
experience with quick- loading pages and interactive elements.
A prominent feature of the website is its ability to display real-time air quality measurements for
multiple gases including PM2.5, PM10, CO2, NO2, SO2, and O3. Each gas reading is presented
with visual indicators such as colored bars or icons to represent safe, moderate, or hazardous
levels, aiding users in quickly understanding the air quality situation in their region. The platform
includes a precaution display system which dynamically provides safety measures based on the
AQI level. For instance, when the AQI is high, it may suggest wearing masks, avoiding outdoor
activities, or using air purifiers indoors. These health tips are tailored according to pollution
severity and are presented clearly for easy comprehension. An intelligent search feature allows
users to enter the name of a city or place to view its AQI data. This function is powered by
JavaScript to fetch and display localized air quality metrics without requiring a full page reload,
enhancing user interactivity and speed. The website also offers a theme change toggle, enabling
users to switch between light and dark modes. This not only improves aesthetic appeal but also
helps in reducing eye strain during night-time usage, thus enhancing the overall user experience.

In conclusion, the AQI website stands as a functional, user-centric solution with a robust frontend
architecture that combines visual design with dynamic features, ensuring that users are both
informed and protected against air pollution hazards.

2.1.1. Technologies for AQI Website Development.

Since the focus is on using HTML, CSS, and JavaScript, the following technologies and
frameworks can enhance the functionality:

12 | P a g e
 Frontend Technologies
a. HTML: Structures the webpage, defining the layout for AQI data display.
b. CSS: Enhances visual appeal, ensuring a responsive and user-friendly design.
c. JavaScript: Enables dynamic data fetching and interactive elements like charts
and animations.

2.1.2. Data Fetching Methods

AQI APIs (e.g., OpenWeatherMap, WAQI API) allow real-time data retrieval. Fetch API can be
used in JavaScript to request and display AQI data dynamically.

2.1.3. Design Considerations for AQI Website

a. User Interface (UI) and User Experience (UX).
b. Color-coded AQI scale (green for good, red for hazardous) for clarity.
c. Minimalist and intuitive layout for ease of use.
d. Dark mode/light mode toggle for user preference.
e. Mobile and desktop compatibility for accessibility.
f. 3D Design Implementation.
g. Integrating air pollution particles visualization for a more immersive experience.

2.1.4. Challenges in AQI Website Development

a. Real-time API Limitations: Free APIs may have rate limits, affecting data updates.
b. Performance Optimization: Heavy 3D elements may slow down mobile devices.
c. Cross-Browser Compatibility: Ensuring smooth performance on different browsers.

2.2. Proposed System

The Air Quality Index (AQI) measuring website will provide real-time air quality data to users in a
simple and accessible format. The system will be built using HTML, CSS, and JavaScript, ensuring
compatibility with both mobile and desktop devices. The proposed Air Quality Index (AQI)
website, developed using HTML, CSS, and JavaScript, is a comprehensive and user-friendly
platform designed to provide real-time air quality updates and health-related information. The core
functionality of the site includes the display of various gas measurements such as PM2.5, PM10,
CO2, NO2, and O3 levels, offering users a detailed view of the pollutants presents in the air. A key
feature of the website is its ability to show relevant health precautions based on the current AQI

13 | P a g e
level, helping

14 | P a g e
users take necessary steps to protect themselves, especially in highly polluted areas. To enhance the
user experience, the website includes a dynamic theme-changing option, allowing users to switch
between light and dark modes based on their preferences or environmental lighting conditions. It
also incorporates a powerful search functionality that enables users to look up the air quality in
different locations, both locally and globally, by simply entering the name of a place or using GPS-
based detection for real-time data. Furthermore, the website is fully mobile responsive, ensuring
seamless access and readability on smartphones and tablets without compromising design or
functionality. The combination of these features makes the AQI website a modern, informative, and
essential tool for monitoring air quality and promoting environmental awareness.

2.2.1. System Overview

The AQI website will have the following core functionalities: Fetch AQI Data – Obtain real-time air
quality data from an API, user Interface (UI) – display AQI values and air quality levels,
geolocation support – allow users to check AQI based on their current location, search Functionality
– let users search for AQI in different cities.

a. Functional Modules: Use JavaScript (Fetch API/AJAX) to retrieve real-time AQI data.
b. Data source: OpenWeatherMap API, AirVisual API, or other AQI data providers.
c. User Interface: HTML for structuring the webpage, CSS for styling, including color coding
for different AQI levels, JavaScript for dynamic content updates, Geolocation-Based AQI
Fetching. Use Geolocation API to detect the user's location. Fetch AQI data based on
latitude and longitude. City-Based Search Functionality, allow users to enter a city name,
fetch and display AQI data for the searched city.

d. Health Recommendations.
Display health advice based on AQI categories:
Good (0-50): No precautions needed, moderate (51-100): sensitive groups should limit outdoor
activities, unhealthy (101-200): Mask recommended for outdoor exposure, very unhealthy (201-
300): avoid outdoor activities, hazardous (300+): stay indoors; use air purifiers.

e. Non-Functional Requirements.
Responsiveness – ensure compatibility with mobile and desktop, performance – optimize API
requests to reduce loading time, user-friendly interface – simple and easy-to-read AQI information.
f. Precautions

15 | P a g e
Wear Protective Masks: For AQI levels above 150, N95 or similar particulate respirators can help reduce
inhalation of fine particulate matter (PM2.5). These masks should be fitted properly. Children:
Children are more vulnerable due to their higher respiratory rate and developing lungs. They should
limit outdoor play during moderate to high AQI levels. Elderly: Older adults may have weaker
immune systems and are at greater risk during high pollution levels. They should remain indoors
during unhealthy air conditions. Pregnant Women: Exposure to high levels of air pollution may
affect the developing fetus. Pregnant women should limit exposure during high AQI level.

2.2.2. Tools & Technologies Frontend:

The frontend of an AQI (Air Quality Index) indicator system plays a critical role in delivering real- time,
accurate, and user-friendly air quality information to the end user. To build a responsive, interactive,
and scalable user interface, modern web development tools and technologies are employed. The
primary frontend development framework recommended for such a system is React.js, due to its
modular component-based architecture, high performance, and robust ecosystem. React allows for
dynamic rendering of real-time AQI data, interactive map components, and responsive charts.
Alongside React, Next.js can be used to enhance performance with server side rendering and static
site generation, which helps in improving load times and SEO for public facing AQI dashboards.
For design and styling, tools like Tailwind CSS or Material-UI can be integrated to rapidly
prototype and deploy clean, consistent user interfaces. Tailwind, in particular, offers utility-first
styling that simplifies customization and responsiveness across devices. Charting libraries such as
Chart.js, Recharts, or D3.js can be used to visualize AQI trends over time, pollutant-specific
variations, and comparative charts between different locations. For real-time map integration,
Leaflet.js or Mapbox GL JS can be incorporated to display AQI levels across different regions, with
interactive markers and color-coded overlays that reflect pollution intensity using standard AQI
color schemes.
To ensure smooth and fast data updates, frontend applications can use WebSockets or long- polling with
REST APIs to fetch real-time data from the backend. This ensures that users receive live air quality
updates without needing to refresh the page. For state management, tools like Redux or Zustand can
be employed to manage application-wide data such as user preferences, location selections, or AQI
readings efficiently.
In mobile-responsive design, Progressive Web Apps (PWAs) offer a viable solution to create web based
applications that function like native apps, including offline access and push notifications. PWAs
can be implemented using service workers and caching strategies supported by frameworks like
Next.js or using libraries like Workbox. In summary, the frontend of the AQI indicator system is
built using a modern stack including React.js, Tailwind CSS, Mapbox/Leaflet, Recharts/D3.js, and
16 | P a g e
WebSockets, all integrated into a fast, responsive, and user-friendly interface. These technologies
collectively ensure that users can access up-to-date, easy-to-understand air quality information
anytime and from any device, with a strong emphasis on performance, usability, and real-time data
visualization.

2.2.3. Expected Outcome

The expected outcome of developing and implementing an AQI (Air Quality Index) indicator
system is the creation of a comprehensive, reliable, and user-friendly platform that effectively
monitors, calculates, visualizes, and communicates real-time air quality data to a broad audience,
including the general public, researchers, policy makers, and environmental organizations. The
system is anticipated to provide accurate, location-specific AQI readings by continuously collecting
and processing air pollutant data such as PM2.5, PM10, NO₂, CO, O₃, and SO₂ from various
sources including IoT-enabled environmental sensors and government or third-party APIs. These
readings will be transformed into standardized AQI values using internationally recognized
guidelines such as those from the US Environmental Protection Agency (EPA) or India’s Central
Pollution Control Board (CPCB), ensuring consistency and scientific validity. The AQI indicator
will present this information through an interactive and visually intuitive interface—often a web or
mobile application—featuring maps, color-coded indicators, charts, and time-series graphs that
display both current and historical trends. Users will be able to view the air quality status in real-
time, track changes over hours or days, and receive alerts or health recommendations when air
quality deteriorates to hazardous levels. From a broader perspective, the system will significantly
enhance public awareness about environmental and health risks associated with air pollution. By
empowering individuals with actionable information, such as whether it is safe to exercise outdoors
or if vulnerable groups should take precautions, the AQI indicator will contribute to more informed
decision-making at both personal and community levels. In addition, institutions and government
agencies can use the aggregated and analysed data to support urban planning, pollution control
strategies, and environmental policies. In areas where pollution is a persistent issue, this system can
serve as a critical tool in identifying pollution sources, evaluating the effectiveness of regulatory
measures, and guiding long-term sustainability initiatives. Furthermore, the expected outcome also
includes the potential for

scalable deployment across multiple cities or regions, with the flexibility to integrate additional
environmental factors like temperature, humidity, and pollen count in the future. The system's
modularity and extensibility will make it adaptable for various environmental monitoring needs
from beyond just air quality. Ultimately, the successful implementation of the AQI indicator system
17 | P a g e
will

18 | P a g e
not only promote transparency and environmental accountability but also foster a culture of
proactive environmental stewardship and public health consciousness.

2.3. Feasibility Study

2.3.1. Feasibility Analysis:

The feasibility of developing an Air Quality Index (AQI) indicator system can be assessed across
multiple dimensions, including technical, economic, operational, and legal aspects. The AQI system
aims to monitor and assess air quality in real-time by using a variety of sensors to detect pollutants,
calculate the AQI, and then display the information through accessible user interfaces. Given the
increasing awareness around air pollution and its detrimental health effects, the demand for such
systems is growing. This feasibility analysis delves into the components that make an AQI indicator
system feasible, as well as the challenges that may arise.

2.3.2. Technical Feasibility:

Technically, building an AQI system is entirely feasible due to advances in environmental sensor
technologies and data processing capabilities. Air quality sensors today are highly capable of
detecting a range of air pollutants such as particulate matter (PM2.5, PM10), nitrogen dioxide
(NO₂), sulphur dioxide (SO₂), ozone (O₃), and carbon monoxide (CO). These sensors are available
at a wide range of prices and precisions, making it possible to choose the appropriate hardware
depending on the specific use case, from low-cost sensors for large-scale deployments to more
expensive and accurate sensors for critical monitoring sites.
Data from these sensors can be aggregated in real-time using IoT (Internet of Things) frameworks
or through API integrations with existing air quality data providers. Popular third-party sources like
OpenAQI and WAQI already provide real-time air quality data from cities worldwide, and this can
be incorporated into the AQI system. The core technical challenge in this aspect is the integration of
diverse data streams, ensuring accurate data processing, and calculating the AQI based on
international standards, such as the U.S. EPA’s or India’s CPCB AQI methodology. The AQI
calculation itself involves straightforward algorithms, where pollutant concentrations are mapped
onto a predefined scale using breakpoints. This process can be efficiently handled by server-side
applications written in languages like Python or Node.js. Data storage is another crucial technical
component. Given the large volume of real-time sensor data, a time-series database (such as
InfluxDB or TimescaleDB) would be an optimal choice to handle the high-speed influx of air
quality measurements. Furthermore, the system will require cloud infrastructure to ensure

19 | P a g e
scalability and

20 | P a g e
availability, especially as the system may scale up to monitor multiple cities or countries.
For front-end development, technologies such as React or Vue.js can be utilized to build a
responsive web interface that visualizes the air quality in real- time, offering users interactive maps,
graphs, and alerts. Mobile applications can also be developed to enhance accessibility, offering
notifications and personalized data views based on users' locations. From a technical perspective,
the challenges would primarily involve maintaining the accuracy of sensor readings, handling large
volumes of data, and ensuring that real-time updates are pushed efficiently to end-users. Sensor
calibration is critical to avoid misreporting of AQI levels, and the infrastructure must be designed to
scale without performance degradation. Moreover, real-time notifications of hazardous air quality
levels and health advisories require robust alert systems with low latency.

2.3.3. Economic Feasibility:

Economically, the development of an AQI system is feasible, but its initial investment can be
relatively high, especially if aiming for wide coverage with high-quality sensors. The hardware
costs of acquiring environmental sensors vary depending on the type of sensor and the level of
accuracy needed. While low-cost sensors can be obtained at a relatively affordable price, more
precise sensors can significantly increase the cost. For large-scale deployment across cities or
countries, an organization may need to invest in hundreds or thousands of sensors. Additionally, the
cost of cloud storage, processing infrastructure, and application development will add to the overall
budget.
However, the system's long-term economic feasibility is favorable due to the scalability of cloud
infrastructure and open-source technologies that can reduce operational costs over time. With cloud
providers like AWS, GCP, or Azure, the costs of storage, computing power, and maintenance can
be optimized based on usage, making it more cost-effective as the system grows. Moreover, as the
AQI system provides valuable real-time data that can be monetized, there are several potential
revenue streams. Government agencies, environmental organizations, and industries concerned with
health and safety may pay for access to accurate air quality data. The system can also provide
premium features, such as historical data analysis, predictive modelling, and personalized air quality
recommendations to users, potentially generating subscription-based income. Furthermore, the AQI
system could attract investments from environmental sustainability funds or public health
initiatives, both of which are increasingly focused on combating air pollution. Governments may
also fund such projects as part of their air quality monitoring and public health improvement
programs. Thus, although the initial setup costs may be considerable, the economic viability of the
AQI system is positive, particularly when accounting for long-term value and growth opportunities.
2.3.4. Operational Feasibility:
21 | P a g e
Operational feasibility is another key consideration for the AQI indicator system. Once the system is set up,
regular maintenance and monitoring of both the hardware (sensors) and software components are
essential. Sensors must be regularly calibrated to ensure accurate readings, and sensors placed in
various environmental conditions may require more frequent checks. A network of sensors across
urban and rural locations should be deployed to ensure broad coverage and minimize data gaps.
While the technology for sensor data collection, processing, and visualization is readily available,
ensuring that sensors remain functional and calibrated in a variety of outdoor environments presents
an operational challenge, especially in areas with extreme weather conditions or unreliable
power/internet infrastructure. Additionally, the AQI system must be designed with resilience in
mind. In case of sensor failures or network disruptions, the system should have failover mechanisms
in place to ensure continuous data collection or alert the administrators for corrective action. Real-
time updates are crucial for user engagement, and any delays in the delivery of data may reduce the
system’s usefulness. Developing a robust notification system for pushing alerts to users in case of
poor air quality, along with personalized health recommendations based on AQI levels, is a critical
operational requirement. On the user side, the operational goal is to ensure a seamless experience,
whether the user is accessing the system via a website or a mobile application. User interfaces
should be intuitive, with clear visualizations of air quality levels, trend graphs, and a map for nearby
sensor readings. Feedback loops will be crucial for refining the system and optimizing the user
experience, ensuring that the system meets the needs of various demographics, including individuals
with respiratory conditions who rely heavily on air quality information.

2.3.5. Legal Feasibility:

The legal feasibility of deploying an AQI system largely depends on regulatory frameworks surrounding
environmental monitoring, data privacy, and public health. From an environmental perspective,
many governments and regulatory bodies have established standards for air quality measurement,
and compliance with these standards is necessary for the system's legitimacy and accuracy. In
countries like the United States, India, and European Union member states, there are stringent
regulations regarding air quality monitoring, and any new system must adhere to these laws to
ensure its data is recognized and trusted. Additionally, legal considerations regarding data privacy
and security must be taken into account, especially if the system collects and processes personal
information, such as location data from users or sensor device information. In regions such as the
European Union, compliance with data protection laws such as GDPR (General Data Protection
Regulation) will be necessary. Users will need to consent to data collection practices, and
appropriate security measures (e.g., encryption, secure access) will need to be implemented to
protect sensitive
22 | P a g e
information. Moreover, intellectual property rights for sensor technology, data ownership, and
partnerships with third-party data providers must be clarified in contracts. Governments or
regulatory agencies may have specific guidelines for sensor deployment in public spaces,
particularly in terms of permits and approvals. Partnerships with these bodies will be necessary to
ensure smooth integration into the broader environmental monitoring landscape. The feasibility of
an AQI indicator system is robust, considering the advancements in sensor technology, data
processing, and cloud computing. Technically, the system can be built with available tools and
infrastructure, and the potential for scalability and real-time data delivery makes it highly viable.
Economically, while initial investments in hardware and development are significant, long-term
sustainability is supported by monetization opportunities and public health funding. Operationally,
the key challenges involve maintaining the accuracy and reliability of the sensors, ensuring data
consistency, and providing a seamless user experience. Legally, the system must navigate regulatory
frameworks around environmental monitoring, data privacy, and sensor deployment. Ultimately, the
AQI system offers significant potential to provide valuable insights into air quality and improve
public health awareness, contributing to more informed decisions on environmental and health
management.

23 | P a g e
 3. SYSTEM ANALYSIS AND DESIGN
The Air Quality Index (AQI) Indicator System is a software application designed to monitor air
pollution levels in real-time, process sensor or third-party data, compute AQI values based on
standard guidelines, and present the results through a user-friendly interface. The system is intended
to help individuals and authorities make informed decisions related to environmental and public
health. The system analysis and design phase play a critical role in understanding user needs,
identifying system functionalities, specifying technical architecture, and detailing how the system
components will interact to achieve the project objectives.
System analysis begins with a comprehensive study of user requirements, the existing problems
associated with accessing air quality data, and the identification of functional and non- functional
requirements for the AQI Indicator. The system needs to acquire pollutant concentration data—
either from local air quality monitoring sensors (IoT devices) or from public air quality APIs such as
OpenAQI or WAQI. The key pollutants of concern typically include PM2.5, PM10, NO₂, CO, SO₂,
and O₃. Each of these pollutants impacts health in different ways, and the AQI is a normalized
value used to represent the overall quality of air in a region. The analysis phase identifies the
stakeholders involved, including end users, environmental researchers, health officials, developers,
and government regulators. A thorough understanding of their needs helps define system
functionality. For instance, users may want real-time updates, visual color-coded AQI values, and
historical trend

data, while regulators may require data logging and alert generation when certain thresholds are
breached. Functional requirements derived from the analysis include:
a. Data acquisition from multiple sources (sensors or APIs).
b. AQI calculation based on pollutant concentration and standard breakpoints (e.g., CPCB
or EPA formula).
c. Display of AQI data on web and/or mobile interfaces.
d. Alerts via SMS/email/push when air quality exceeds predefined thresholds.
e. Visualization tools for graphs, maps, and heatmaps.
Non-functional requirements include system performance (real-time responsiveness), reliability
(minimal downtime), scalability (to handle many sensors and users), and security (access control,
encrypted transmission). The design of the AQI Indicator system translates requirements into
technical specifications and architectural components. The system is structured into a modular,
layered architecture comprising several interconnected components: data collection, processing,
storage, visualization, and alerting.

24 | P a g e
At the heart of the system is the Data Acquisition Layer, responsible for fetching raw pollutant data.

25 | P a g e
 If using IoT sensors, this involves interfacing with edge devices that transmit data over MQTT or
HTTP to a central server. If using APIs, this layer makes periodic requests to third- party data
providers. The Processing Layer is responsible for converting pollutant concentration values into
AQI scores using the standard breakpoint formula. Each pollutant has defined concentration
thresholds, and the AQI is calculated based on the worst-case value among all pollutants. This
module also interprets the AQI to assign a category (e.g., Good, Moderate, Unhealthy) and
corresponding color code. The Data Storage Layer uses a time-series database (e.g., InfluxDB or
TimescaleDB) to store raw data, computed AQI values, timestamps, and metadata such as location.
This data can later be used for generating historical trend reports or machine learning predictions.
The Presentation Layer is the front-end application—typically built using React, Angular that
allows users to view AQI information in real time. Features include location-based search, map
visualizations using tools like Leaflet or Google Maps API, line graphs for pollutant trends, and
filters for date/time or pollutant type. The Notification and Alert Layer is implemented as a
microservice or background task that continuously monitors AQI values. When thresholds are
crossed, the system sends out alerts via SMS, email, or push notifications depending on user
preferences.
Security and access control mechanisms are implemented throughout the system, ensuring that
administrative functions (e.g., modifying sensor configurations or AQI breakpoints) are restricted to
authorized users.
Finally, the design also includes system integration, such as:
APIs for external data access (public or restricted).
Admin panel for configuration and system health monitoring.

3.1 Requirement Specification: Air Quality Index (AQI) Measurement.

The Air Quality Index (AQI) Indicator System is a software application designed to monitor,
compute, and communicate the quality of air based on measured pollutant levels. This requirement
specification outlines the detailed expectations for the AQI measurement module, which serves as
the core of the system. The AQI measurement functionality involves the acquisition of raw
environmental data, processing it to determine pollutant concentrations, converting those
concentrations into AQI values, and making those values accessible and understandable to users.
This process must be reliable, accurate, timely, and compliant with official AQI calculation
guidelines issued by authorities such as the Central Pollution Control Board (CPCB) in India or the
United States Environmental Protection Agency (EPA).

26 | P a g e
The AQI measurement system must support the tracking and processing of six keypollutants: PM2.5,

27 | P a g e
PM10, Ozone (O₃), Carbon Monoxide (CO), Nitrogen Dioxide (NO₂), and Sulfur Dioxide (SO₂). These
pollutants are measured in micrograms per cubic meter (µg/m³) or parts per million (ppm), depending on the
pollutant type. The raw concentration values need to be mapped to a standardized AQI scale, typically ranging
from 0 to 500, using breakpoint tables defined by regulatory bodies. The system should compute an individual
AQI for each pollutant and then determine the overall AQI as the maximum among the individual AQI values,
which represents the dominant pollutant affecting air quality at that time. To ensure usability and clarity, the
AQI measurement system must not only provide numerical values but also assign colour codes, health impact
categories, and advisory messages based on the AQI range (e.g., "Good", "Moderate", "Unhealthy", etc.).
These classifications help users make informed decisions, especially sensitive groups such as children, the
elderly, and individuals with respiratory conditions. The measurement system must be able to receive data
from multiple sources:
a. Real-time environmental sensors deployed in specific geographic areas.
b. External APIs from government or third-party data providers (e.g., OpenAQI, WAQI).
c. Offline/batch data for historical AQI computations or testing purposes.
Additionally, the system must implement data validation mechanisms to detect and discard anomalies such as
outliers or corrupt data points. It should log all raw and processed data for traceability and provide
mechanisms to backfill or correct data if needed. The system should be modular and scalable, allowing it to
support multiple cities or regions and hundreds of sensor nodes if necessary. It must also account for timezone
differences and data timestamp synchronization, ensuring that AQI measurements are correctly aligned with
the local time of each monitored location.
Key Requirements (Bullet Points Summary):
a. Accurately measure and record concentrations of PM2.5, PM10, O₃, CO, NO₂, SO₂.
b. Calculate AQI using official breakpoint tables (CPCB/EPA).
c. Identify the pollutant with the highest AQI (dominant pollutant).
d. Display AQI values along with health category and color code.
e. Integrate with sensor hardware and public/private APIs.
f. Validate and clean incoming data for accuracy.
g. Store both raw and computed AQI data with timestamps.
h. Ensure system scalability to support multiple locations.
i. Provide fallback mechanisms in case of data loss or corruption.
j. Allow real-time and historical AQI viewing.

28 | P a g e
 Functional Requirements

1. Real-time AQI Data Fetching

Integrate with multiple APIs (e.g., OpenWeatherMap, AirVisual, government sources) for redundancy.
Support both manual city search and automatic geolocation detection. Cache API responses to handle rate
limits and offline scenarios.

2. AQI Computation

Implement EPA (US) and CPCB (India) standards with configurable regional adaptations. Calculate sub-
indices for each pollutant (PM2.5, PM10, CO, NO2, SO2, O3).
Highlight dominant pollutants and health implications.

3. User Interface Features

Interactive map overlay for regional AQI visualization. Historical data trends (24-hour/7-day) using
Chart.js. Multi-language support for global accessibility.

4. Additional Features

User accounts to save preferred locations and alert thresholds. Shareable reports (PDF/email) for AQI data.

5. Non-Functional Requirements

Performance: Load data within 2 seconds; optimize for low-end devices. Reliability: Fallback APIs if
primary sources fail; 99% uptime target.
Scalability: Design for 10,000+ concurrent users; modular backend. Security: Encrypt user data; sanitize
API inputs to prevent XSS/SQLi. Accessibility: WCAG 2.1 compliance (contrast ratios, ARIA labels)

29 | P a g e
3.2 Flowchart

30 | P a g e
3.3 Design and Test Steps
Designing and testing an AQI (Air Quality Index) website using HTML, CSS, and JavaScript involves
thoughtful planning to ensure the site is not only functional but also user-friendly, responsive, and
informative. The website should offer comprehensive air quality data including the presence of various
gases like CO2, CO, NO2, SO2, and PM2.5. It must also display relevant health precautions based on
AQI levels, include a light/dark theme toggle for user comfort, and have a search functionality for users
to check the air quality of different places. The interface must be designed to work smoothly on mobile
devices, ensuring accessibility on the go. The front end of the website is developed using clean and
semantic HTML for structuring the content, with each section such as header, search bar, gas data, AQI
results, and precaution tips clearly defined using proper tags. CSS is used extensively to create a
modern, minimalistic yet visually engaging interface. CSS Grid and Flexbox make the layout adaptable
across devices, enabling a seamless mobile-friendly design that adjusts the display of content without
compromising readability or usability. A toggle button is provided to switch between light and dark
themes, with CSS variables controlling color schemes dynamically to reduce eye strain in different
lighting environments.

JavaScript handles the dynamic functionalities of the site. When a user enters a city or location in the
search bar, JavaScript captures the input and uses an API (like OpenWeatherMap or AirVisual API) to
fetch the latest air quality data for that region. The script processes and displays the results, highlighting
the individual gas levels with color-coded indicators to show how safe or hazardous each one is. Based
on the AQI level, corresponding precaution tips are shown to the user—like wearing a mask, using air
purifiers, or avoiding outdoor activity—which are dynamically injected into the DOM. Additionally, the
theme preference is stored in local storage, allowing the website to remember user settings across visits.
For testing, the website is first run through various screen resolutions and browsers to ensure consistent
appearance and performance, using browser developer tools and device emulators. Manual testing is
conducted to verify the responsiveness and interactive elements like the search function, theme toggle,
and data display. Simulated slow networks are used to see how gracefully the site handles API latency.
Accessibility checks ensure proper contrast, keyboard navigation, and readable text, while lighthouse
audits are performed for performance and SEO insights. Cross-browser testing confirms compatibility
with Chrome, Firefox, Safari, and Edge. Real-world testing on physical mobile devices ensures that all
interactive components are touch-friendly and visually intact on different screen sizes.

31 | P a g e
This comprehensive approach ensures that the AQI website is not only informative and interactive but
also provides a safe and personalized experience to users monitoring air quality across various regions.
The website could also provide historical AQI data with date selection features, enabling users to track
air quality trends in a given city. Implementing geolocation functionality using the Geolocation API
would allow the site to automatically detect the user's current location and display relevant air quality
information without needing manual input. Notifications or alerts via the browser's push notification API
can inform users when the air quality in their saved locations reaches dangerous levels, making the
platform proactive rather than just reactive. Visually, animations and transitions can be smoothly
incorporated using CSS3 to make theme switching, card loading, and data updates more fluid and
engaging. On mobile, collapsible menus and swipe-based interactions improve usability, and touch-
friendly UI elements like large buttons and spacing ensure a comfortable experience for smaller screens.
Additionally, accessibility features like ARIA labels and proper semantic structure make the site more
inclusive to users relying on screen readers or assistive technologies. To ensure optimal performance, all
assets such as icons, background images, and scripts are optimized for fast loading. Lazy loading of
charts and external API calls reduces initial load time and improves mobile responsiveness. Unit testing
with tools like Jest for JavaScript functions and automated testing through platforms like BrowserStack
ensure robust coverage of scenarios across devices, locations, and browsers. Furthermore, user feedback
collection can be integrated to gather real- world opinions on the interface and suggestions for
improvement, which can help in continuous iteration of the platform. This approach makes the AQI
website not only a technical tool for viewing pollution levels, but a highly interactive, responsive, and
informative portal that adapts to user needs and environmental conditions.

32 | P a g e
 System Design Methodology Architecture Layers

1. Data Acquisition Layer

API Gateway: Manage requests to third-party APIs with retry logic.
Web Scraping: Fallback for agencies without APIs (e.g., government portals).

2. Processing Layer

AQI Calculator: Plug-in model for different regional standards. Alert Engine: Custom thresholds per user
(e.g., asthma sufferers).

3. Presentation Layer

Dynamic UI: React.js components for reusable widgets (maps, charts). Theme Engine: Extend beyond
light/dark mode (e.g., color-blind modes).

4. Notification Layer

- Multi-channel alerts: Email, SMS (Twilio), and browser notifications.

- Scheduled reports: Daily/weekly digests via user preferences.

5. Technologies

Frontend: React.js, D3.js for advanced visualizations.

Backend: Node.js (Express) or Python (Django) for API orchestration. Database: Firebase for real-time
updates; PostgreSQL for analytics.
DevOps: Docker/Kubernetes for scaling; CI/CD via GitHub Actions.

6. Design Patterns

Observer Pattern: For real-time data updates across UI components.

Factory Pattern: To support multiple AQI calculation standards.

33 | P a g e
 3.4 Algorithms and Pseudo Code
HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Air Pollution Indicator</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?
family=Fira+Code:wght@700&family=Montserrat:wght@700&f amily=Poppins&display=swap"
rel="stylesheet">
</head>
<body>
<div class="root">
<h1 class="heading">Air Quality Indicator</h1>

<div class="location-container">
<h2 class="sub-heading">Your Location :</h2>
<label for="error-msg" style="color: red;"></label><br />

<!-- Latitude/Longitude Inputs -->

<input type="number" name="lat" placeholder="Latitude" id="latitude"
step="0.0001" class="loc-input" />
<input type="number" name="lon" placeholder="Longitude"
id="longitude" step="0.0001" class="loc-input" />
<button class="search-btn">Search</button>

<!-- City Input -->

<input type="text" id="city" placeholder="Enter city name" class="loc-input"
/>
<button class="search-city-btn">Search by City</button>

<!-- Theme Toggle Button -->

<button class="theme-toggle-btn">Toggle Dark/Blue Theme</button>
</div>

<div class="air-info">
<h2 class="sub-heading">Air Quality Index :</h2>
<span class="air-quality">...</span>
<span class="arr">&nbsp;&rarr;&nbsp;</span>
<span class="air-quality-status">...</span>

<!-- Precaution Message -->

<p class="precaution-msg" style="margin-top: 10px; font-weight: bold;"></p>

<div class="component-container">
<h2 class="sub-heading">Concentration of pollutants in air :</h2>

<div><h3 class="component-names">Carbon Monoxide

:</h3><span class="component-val" data-comp="co"></span></div>
<div><h3 class="component-names">Nitrogen Monoxide
:</h3><span class="component-val" data-comp="no"></span></div>
<div><h3 class="component-names">Nitrogen Dioxide
:</h3><span class="component-val" data-comp="no2"></span></div>
<div><h3 class="component-names">Ozone :</h3><span
class="component-val" data-comp="o3"></span></div>
<div><h3 class="component-names">Sulphur Dioxide
:</h3><span class="component-val" data-comp="so2"></span></div>
34 | P a g e
 <div><h3 class="component-names">Fine particles matter
:</h3><span class="component-val" data-comp="pm2_5"></span></div>
<div><h3 class="component-names">Coarse particulate matter
:</h3><span class="component-val" data-comp="pm10"></span></div>
<div><h3 class="component-names">Ammonia :</h3><span
class="component-val" data-comp="nh3"></span></div>
</div>
</div>

<footer>
Plant more <img src="pic.tree.jpg" width="35" height="35" />
</footer>
</div>

<script src="script.js" defer></script>

</body>
</html>

CSS Code:

/* Default (Light/Blue Theme) */

* {
padding: 0;
box-sizing: border-box;
}

body {
transition: background-color 0.3s ease, color 0.3s ease;
}

.root {
padding: 2vw;
background-image: linear-gradient(to right bottom, #213764, #295089, #2c6caf,
#2688d7, #00a7ff);
width: 100%;
height:
100%;
color:
white;
font-family: 'Poppins', sans-
serif; min-height: 100vh;
}

.heading {
text-align: center;
font-family: 'Fira Code',
monospace; font-size: 3rem;
margin-bottom: 60px;
}

.sub-heading {
margin: 20px 0;
font-family: 'Montserrat', sans-
serif; font-size: 2rem;
}

.location-container
{ margin: 40px
0; display:
flex;
flex-direction:
column; align-items:
center;
35 | P a g e
 border: 3px solid
#269fe6; font-size:
1rem;
padding: 8px;
border-radius:
6px; margin:
10px; width:
270px;
}

.loc-input:invalid {
border: 3px solid #d34545;
}

.search-btn,
.search-city-btn,
.theme-toggle-btn {
padding: 10px
14px;
background-color: #269fe6;
border: none;
font-family: 'Poppins', sans-
serif; font-weight: 700;
font-size: 1rem;
border-radius:
4px; color:
#fff; margin:
10px; cursor:
pointer;
}

.air-quality,
.arr,
.air-quality-status
{ font-size:
4rem; font-
weight: 700;
}

.component-names {
display: inline-
block;
}

.component-container
div { margin: 10px
0;
}

.component-val {
font-size:
1.2rem; margin-
left: 20px;
}

.precaution-msg {
margin-top:
20px; font-size:
1.3rem; color:
#fffbe0;
background: rgba(0, 0, 0,
0.2); padding: 10px 15px;
border-radius:
8px; text-align:
center; max-
36 | P a g e
 width: 700px;
margin-left:
auto; margin-
right: auto;
}

footer {
margin-top:
40px; text-align:
center;

37 | P a g e
}

/* Dark Theme */
body.dark-theme
.root {
background-color:
#121212; background-
image: none; color:
white;
}

body.dark-theme .loc-input
{ border: 3px solid
#3f3f3f;
}

body.dark-theme .search-btn,
body.dark-theme .search-city-
btn, body.dark-theme .theme-
toggle-btn {
background-color:
#3f3f3f; color: white;
}

body.dark-theme .air-
quality, body.dark-
theme .arr,
body.dark-theme .air-quality-
status { color: #ffffff;
}

JavaScript Code:

const errorLabel = document.querySelector("label[for='error-

msg']"); const latInp = document.querySelector("#latitude");
const lonInp = document.querySelector("#longitude");
const airQuality = document.querySelector(".air-
quality");
const airQualityStat = document.querySelector(".air-quality-
status"); const precautionMsg =
document.querySelector(".precaution-msg"); const srchBtn =
document.querySelector(".search-btn");
const srchCityBtn = document.querySelector(".search-city-
btn"); const cityInp = document.querySelector("#city");
const componentsEle = document.querySelectorAll(".component-
val"); const themeToggleBtn = document.querySelector(".theme-
toggle-btn");

const appId = "a85b27884525eb64e165bd74716acab0";

const link =
"https://api.openweathermap.org/data/2.5/air_pollution"; const
geoLink = "https://api.openweathermap.org/geo/1.0/direct";

const getUserLocation = () =>

{ if
(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onPositionGathered,
onPositionGatherError);
} else {
onPositionGatherError({ message: "Can't access your location. Please enter
coordinates." });
}
};
38 | P a g e
const onPositionGathered = (pos) => {
let lat =
pos.coords.latitude.toFixed(4),
lon =
pos.coords.longitude.toFixed(4);

39 | P a g e
 latInp.value = lat;
lonInp.value = lon;

getAirQuality(lat, lon);
};

const getAirQuality = async (lat, lon) =>

{ try {
const rawData = await fetch(`${link}?lat=${lat}&lon=${lon}&appid=$
{appId}`); const airData = await rawData.json();
setValuesOfAir(airData);
setComponentsOfAir(airDat
a);
} catch (err) {
onPositionGatherError({ message: "Something went wrong. Check your
internet connection." });
console.error(err);
}
};

const getCityCoordinates = async (city)

=> { try {
const res = await fetch(`${geoLink}?q=${city}&limit=1&appid=$
{appId}`); const data = await res.json();
if (data.length === 0) {
throw new Error("City not found");
}
const { lat, lon } =
data[0]; latInp.value =
lat.toFixed(4);
lonInp.value =
lon.toFixed(4);
getAirQuality(lat, lon);
} catch (err) {
onPositionGatherError({ message: "City not found. Please try again." });
}
};

const setValuesOfAir = airData => {

const aqi = airData.list[0].main.aqi;
let airStat = "", color = "", precaution = "";

switch (aqi) {
case 1:
airStat = "Good";
color = "rgb(19, 201, 28)";
precaution = "Air quality is good. Enjoy outdoor
activities!"; break;
case 2:
airStat = "Fair";
color = "rgb(15, 134, 25)";
precaution = "Air quality is acceptable. Sensitive groups should
limit prolonged activity.";
break
; case 3:
airStat = "Moderate";
color = "rgb(201, 204, 13)";
precaution = "Reduce prolonged exertion outdoors, especially if you have
health
issues."
; break
; case 4:
airStat = "Poor";
color = "rgb(204, 83, 13)";
precaution = "Avoid outdoor activities. Use a mask if
40 | P a g e
 n
e
c
e
s
s
a
r
y
.
"
;

b
r
e
a
k
;
case 5:
airS
tat
=
"Ver
y
Poor
";

41 | P a g e
 color = "rgb(204, 13, 13)";
precaution = "Stay indoors with air purifiers. Avoid any physical
exertion
outside.";
break
; default:
airStat = "Unknown";
precaution = "No data available.";
}

airQuality.innerText = aqi;
airQualityStat.innerText =
airStat;
airQualityStat.style.color =
color; precautionMsg.innerText =
precaution;
};

const setComponentsOfAir = airData => {

let components = { ...airData.list[0].components };
componentsEle.forEach(ele => {
const attr = ele.getAttribute('data-comp');
ele.innerText = components[attr] + " μg/m³";
});
};

const onPositionGatherError = e =>

{ errorLabel.innerText =
e.message;
};

const toggleTheme = () => {

document.body.classList.toggle('dark-
theme');
};

srchBtn.addEventListener("click", () => {
getAirQuality(parseFloat(latInp.value).toFixed(4),
parseFloat(lonInp.value).toFixed(4));
});

srchCityBtn.addEventListener("click", () =>
{ const city = cityInp.value.trim();
if (city) {
getCityCoordinates(city);
}

42 | P a g e
3.5 Testing Process

The testing process of an AQI (Air Quality Index) website developed using HTML, CSS, and JavaScript
involves a thorough evaluation of its functionality, performance, usability, responsiveness, and
compatibility across devices. Since the website includes features like displaying air quality precautions,
theme change options, measurements of different gases, a search option for various locations, and
mobile- friendly design, each aspect must be meticulously tested to ensure a smooth and reliable user
experience. Initially, functional testing is conducted to ensure that all the core features of the website are
working as intended. This includes verifying that the AQI data is accurately displayed for each location
entered in the search bar, and that it updates dynamically without the need to reload the page. The gas
measurement section, which displays the concentration of pollutants such as PM2.5, PM10, CO2, NO2,
and O3, is tested against both dummy and live data to confirm it is retrieving and presenting correct
values. The precautions section, which provides users with safety measures based on the AQI levels, is
checked to ensure that the right precaution messages appear in correspondence with the severity of
pollution levels. The theme change feature, whether toggling between light and dark modes or applying
custom color schemes, is tested for consistent UI transformation across all pages, ensuring readability
and style consistency without affecting the content layout or functionality.

Responsiveness testing is a key part of the process, especially since the site is designed to be mobile-
friendly. The website is tested on various screen sizes, from smartphones and tablets to laptops and
desktops, to make sure that all elements scale properly and remain interactive. Media queries and
flexible layouts implemented in CSS are reviewed to confirm that buttons, search fields, and data charts
remain accessible and properly aligned. This step ensures the interface is not only visually optimized for
mobile use but also functionally capable on touch-based devices.
Compatibility testing follows, where the website is opened and interacted with on different browsers like
Chrome, Firefox, Safari, and Edge to identify any rendering inconsistencies or JavaScript execution
errors. Additionally, performance testing is performed to evaluate load time and responsiveness,
especially when fetching real-time AQI data for different cities. Network throttling may be simulated to
test behavior under slower internet conditions, ensuring the website handles delays gracefully with
loading indicators or error messages. Security testing is also important, particularly for the search
feature. Input fields are tested against potential injection attacks or misuse, ensuring that only valid
location names are accepted and processed safely. Lastly, user interface and experience testing is
conducted, involving feedback from real users who navigate through the website, use its features, and
report any difficulties or suggestions for improvement. This feedback helps fine-tune usability aspects,
refine design responsiveness, and enhance overall engagement with the website. One critical area is real-
time data integration testing, especially since AQI values and gas concentrations are often fetched from
43 | P a g e
external APIs. The connection with these

44 | P a g e
APIs must be reliable, and the website should handle different types of responses such as success, delay,
missing data, or errors. Testing in this phase includes simulating API failures, expired tokens, or
corrupted data. The system should notify users gracefully with appropriate fallback messages like “Data
currently unavailable” instead of displaying broken or misleading information. The refresh mechanism
—if it automatically updates AQI values periodically—is tested to make sure it doesn't interrupt the user
experience or overload the browser with too many requests.
Accessibility testing is another crucial component, particularly for a website providing health-related
information. It is essential to ensure the interface is usable for people with disabilities. This includes
keyboard navigation testing, screen reader compatibility, and contrast ratio checks for users with visual
impairments. ARIA (Accessible Rich Internet Applications) attributes are tested in the HTML structure
to confirm they properly describe the dynamic parts of the interface, such as the theme toggle button or
the real-time AQI updates. The search feature undergoes extensive testing to ensure it can recognize and
interpret various city or region inputs correctly, even with minor typos, casing differences, or alternate
spellings. If autocomplete or suggestion features are used, their responsiveness, speed, and accuracy are
also tested. In cases where no matching result is found, the interface should clearly communicate that to
the user with a helpful message rather than leaving the display blank or showing unrelated data. Next,
theme switching is tested beyond aesthetics. This feature may involve changing CSS variables or
toggling classes across the DOM. Testing must confirm that all components—charts, text, icons,
background elements—adjust seamlessly when the theme changes. Furthermore, the persistence of user
preferences is tested by verifying whether the theme choice is saved in local storage or cookies and
automatically applied during the next visit.
Cross-device testing is not limited to screen size adaptation. It also includes interaction mode checks.
For instance, buttons and menus are tested for touch responsiveness on mobile, and hover or keyboard
focus behavior is tested on desktop devices. Orientation changes (portrait to landscape) are tested to
ensure layout integrity. The site is also evaluated under stress conditions—testing how it behaves when
the user scrolls quickly, clicks multiple buttons rapidly, enters edge-case values, or loads the site on an

older or underpowered device. Memory usage and event listener leaks are examined to prevent laggy or
crashing behavior after prolonged use. Lastly, analytics and tracking validation is done if the site
includes any user behavior monitoring. Tools like Google Analytics or custom logs must be tested to
ensure they don’t interfere with the core functionality and only collect anonymized, relevant data in
accordance with privacy policies. This extended testing process ensures the AQI website not only works
correctly but also provides a seamless, accessible, and trustworthy experience to users who rely on it for
important health- related environmental information. The testing process for the AQI app built with
HTML, CSS, and JavaScript involves several key stages to ensure functionality, performance, and user
experience. Initially,
45 | P a g e
46 | P a g e
unit testing is conducted to verify individual JavaScript functions that fetch and display AQI data from
APIs, ensuring correct handling of different response scenarios such as valid, null, or error data. Next,
UI testing is performed to check the responsiveness and visual consistency of the design across various
screen sizes and devices, confirming that CSS styles render correctly and the 3D UI elements are
interactive and not distorted. During integration testing, the interaction between HTML elements, CSS
styling, and JavaScript functionalities is verified to ensure seamless user flow, such as entering a
location and getting accurate AQI values with appropriate color-coded indicators and health messages.
Cross-browser testing follows, where the app is tested on browsers like Chrome, Firefox, Edge, and
Safari to detect any rendering issues or JavaScript incompatibilities. Additionally, performance testing is
done to monitor loading speed, especially the time taken to fetch and display real-time data, ensuring
minimal lag. Finally, user testing is conducted with a small group of real users to gather feedback on
usability, readability, and design clarity, allowing developers to fine-tune any issues before deployment.

47 | P a g e
 Detailed Testing Process Testing Methods

1. Unit Testing

Validate AQI calculation logic with mock data (e.g., edge cases like 0 or 500+ AQI). Test API
error handling (timeouts, invalid responses).

2. Integration Testing

End-to-end test: Simulate user flow from search to alert triggering.

Verify data sync between frontend and backend (e.g., theme preferences in local storage).

3. UI/UX Testing

Cross-browser/device testing (BrowserStack). Responsive design checks (down to 320px width).

4. API Testing

Rate limiting and authentication tests.

Validate data consistency across multiple API providers.

5. Security Testing

OWASP ZAP scans for vulnerabilities.

User input fuzzing (e.g., SQL injection in location search).

6. Automation

Jest: For unit/integration tests.

Cypress: UI automation with screenshot comparisons. Load Testing: Locust.io for 10K+ user
simulations.

7. Compliance Testing

GDPR: Audit data collection/storage for privacy laws.

EPA Standards: Certify AQI accuracy with environmental agencies.

48 | P a g e
 4. RESULT/OUTPUT
Several projects and resources demonstrate how to create Air Quality Index (AQI) websites using
HTML, CSS, and JavaScript:

The AQI (Air Quality Index) website built using HTML, CSS, and JavaScript presents a
comprehensive and interactive platform for users to monitor air quality in real time, across various
locations, with an intuitive and responsive design tailored for both mobile and desktop users. Upon
visiting the site, users are welcomed with a clean, modern interface that immediately displays the
current AQI level of their selected or detected location. The homepage integrates smooth transitions
and elegant visuals that adapt according to the theme chosen—either light or dark mode—providing
an eye-comfortable experience during both day and night. The site incorporates an intelligent search
feature that allows users to look up air quality data for any city or region across the globe. This
feature is powered by JavaScript and makes real-time API calls to retrieve updated AQI data, which
includes not just the general AQI value but also detailed readings of specific pollutants such as
PM2.5, PM10, NO₂, CO, O₃, and SO₂. These pollutant levels are presented visually using color-
coded meters and animated charts to help users quickly interpret the severity of each gas
concentration in the atmosphere.
In addition to presenting the AQI data, the website offers a dynamic precaution section that
automatically adjusts its recommendations based on the pollution level. For instance, if the air
quality is poor, the site will display tailored advice such as staying indoors, using air purifiers, or
wearing
49 | P a g e
50 | P a g e
masks. The recommendations are accompanied by simple icons and illustrations, making them
easily understandable by users of all ages and literacy levels.
To enhance usability and accessibility, the website features a fully responsive design achieved
through CSS media queries and flexible grid systems. This ensures that whether the site is viewed
on a smartphone, tablet, or desktop screen, the layout adjusts seamlessly without compromising
readability or functionality. Buttons, navigation menus, and input fields are optimized for
touchscreens, with large tap targets and smooth transitions for user interactions. The theme-
switching option, available via a toggle on the header or settings panel, is implemented using
JavaScript and CSS variables. This feature allows users to personalize their experience,
automatically saving their preferences for future visits using local storage. The design change is not
only aesthetic but also functional, as it slightly alters contrast and visibility of elements based on
ambient light assumptions. Overall, this AQI website offers a user-friendly, visually engaging, and
informative experience that empowers users to stay informed about air quality and take appropriate
precautions, with support for multiple locations and pollutant types—all presented in a format that
is both functional and mobile- first.

51 | P a g e
 5. CONCLUSION

The AQI (Air Quality Index) website developed using HTML, CSS, and JavaScript serves as a
comprehensive and user-friendly platform for monitoring and understanding air pollution levels in
real time. Designed with a responsive layout, the website is fully mobile-friendly, ensuring seamless
accessibility across various screen sizes, including smartphones and tablets. One of the standout
features of this website is its ability to display detailed measurements of various harmful gases such
as CO2, NO2, SO2, PM2.5, and PM10. This granularity allows users to gain a deeper understanding
of what pollutants are present in the air they are breathing, going beyond a single AQI number to
provide real environmental context. A dynamic search function enables users to view air quality
data from multiple locations. Whether it's their current city or a place they plan to visit, users can
simply type in the name of the location and receive up-to-date AQI information, making it highly
useful for travel planning or for people concerned about pollution in specific areas. To enhance user
experience and comfort, the website includes a theme change feature, allowing users to switch
between light and dark modes depending on their preference or lighting conditions. This not only
improves visibility but also makes extended use of the website easier on the eyes. Another vital
feature of the site is the inclusion of precautionary advice based on the current AQI level. When
pollution levels are high, the website automatically displays tailored health and safety guidelines,
such as staying indoors, wearing masks, or avoiding strenuous outdoor activity. These dynamic
precautions empower users to take appropriate action to protect their health, especially those who
are more vulnerable, like children, the elderly, or people with respiratory conditions. In conclusion,
this AQI website is a robust, feature- rich solution for modern air quality monitoring. It successfully
combines technical performance with a clean and intuitive interface, offering real-time data,
practical health information, and customization options—all in a mobile-optimized package. Built
with web technologies that ensure speed and reliability, this platform not only raises awareness
about environmental conditions but also encourages informed decision-making to support public
health and safety.

52 | P a g e
53 | P a g e
 6. REFERENCES

1. https://www.google.com/
2. https://openweathermap.org/api
3. https://www.accuweather.com/
4. https://www.youtube.com/

54 | P a g e