The Title of Project

WEATHER APP

A Project Submitted
in Partial Fulfillment of the Requirements
for the Degree of

Course name

B.SC (C.S)

BY

Student Name
CHITRANSH TYAGI , GARVIT CHAUDHARY

Enrollment No:
2106000041222 , 2106000041220

DEPARTMENT OF COMPUTER APPLICATION

KERAL VERMA SUBHARTI COLLEGE OF SCIENCE

SWAMI VIVEKANAND SUBHARTI UNIVERSITY, MEERUT (U.P)

Month Name, Year:

APRIL, 2024
 UNDERTAKING

I declare that the work presented in this project titled “WEATHER APP”,

submitted to the Name of the Department, Keral Verma Subharti College

of Science (SVSU), Meerut for the award of the B.SC (C.S) degree is my

original work. I have not plagiarized or submitted the same work for the

award of any other degree. In case this undertaking is found incorrect, I

accept that my degree may be unconditionally withdrawn.

Month, Year
Place
________________________________
(Student signature & Name)
For Individual Students
 UNDERTAKING

I declare that the work presented in this project titled “WEATHER APP”,

submitted to the Name of the Department, Keral Verma Subharti College

of Science (SVSU), Meerut for the award of the B.SC (C.S) degree is my

original work. I have not plagiarized or submitted the same work for the

award of any other degree. In case this undertaking is found incorrect, I

accept that my degree may be unconditionally withdrawn.

Month, Year
Place
________________________________
(Student signature & Name)
For Individual Students
 CERTIFICATE ISSUED BY DEPARTMENT

This is to certify that the Practical Training Report entitled “---

WEATHER APP---”submitted to Swami Vivekanand Subharti
University, Meerut in partial fulfillment of the requirement for the
award of the degree of “B.SC (C.S)” is a bonafide work carried out
by “CHITRANSH TYAGI & GARVIT CHAUDHARY”, for the
required period at Department of Computer Application, K.V.
Subharti College of Science, Swami Vivekanand Subharti
University, Meerut.

It is further certified that the work has not been submitted in

part or in full to any other university or institute for the award of any
degree or diploma.

Project Co-ordinator:
Dr. Manoj Kumar
Head Of Department:
Dr. Shashiraj Teotia
Dept. of Computer Application
 CERTIFICATE BY SUPERVISOR

Certified that the work contained in the project titled “WEATHER APP”,

by Student Name CHITRANSH TYAGI, GARVIT CHAUDHARY,

has been carried out under my supervision and that this work has not been

submitted elsewhere for a degree.

Supervisor Name: Dr. Manoj Kumar

Dept. Name: Dept. of computer science

K.V. SUBHARTI COLLEGE OF SCIENCE

 BONAFIDE CERTIFICATE

This is to certify that the project titled "Weather App" is a bonafide work
of CHITRANSH TYAGI, GARVIT CHAUDHARY ,carried out in
partial fulfillment of the requirements for the award of the BSC
(C.S)degree at SWAMI VIVEKANAND SUBHARTI UNIVERSITY.
This project work has been completed under my supervision.

Signature of Supervisor:

Name of Supervisor : Dr. Manoj Kumar

Designation : Assist. Professor
Your Department : Computer Application
Your University : swami vivekanand subharti university

Date:
Acknowledgements

I take upon this opportunity to acknowledge the many people whose

……………

I am deeply indebted to my mentor ………………….

I would like to thank ………………

I further thank to ………………….

I owe my sincere gratitude towards ………………….

My heartfelt thanks to ………………..

I also express my deepest gratitude to ………………….

Finally, I would like to wind up by paying my heartfelt thanks

………………

Student Name
Preface

Writing a effective preface is very important and plays an

important role whether you plan to work in an industry or wish to

take up academics as a way of life.

Your project should prudently combine theory with practice. It

should result in a apprehension of reasonably intricate system

(software and/or hardware). Given various restrictions, it is

always better to expand your predecessor’s work. If you plan it

suitably, you can really build on the familiarity of your seniors.

Background of the Study :

Every day, millions of weathers based economic

decisions are made in transportation, agriculture, power,

construction, and other sectors of the economy. Weather

conditions affect the entire economy in many ways both

directly and indirectly, better weather forests bring economic

opportunities to almost every sector of the economy. Weather

forecasts re critical to the commercial and private

transportation sector, including airline, shipping and trucking

industries, nationally and internationally (Andrews, 2018).

Airlines, for example rely on short term forecasts to best

position their aircraft and adjust flight routes.

Weather and climate are among the foremost factors

which determine how a society develops in geographical

region. Weather usually describes the particular event or

condition for the short period of time such as hours or days

whereas climate refers to the behavior of the atmosphere to a

place over many years. On the other hand, weather includes

current atmospheric conditions such as the temperature,

precipitation, humidity and the wind while climate describes

the general weather conditions of a certain area over a long

period of time(Andrews, 2018).

Weather data are important in our daily life. The data

collected such as rainfall and temperature can be used to serve

as a precautionary measure to against natural calamity or

disaster such as flood and drought. Besides that, it is

important for others to plan the works. For example, in the

construction industry, the weather data is important for a

project manager to plan their schedule so that the project will

complete on time. The weather data collected for a long

period are use to predict the climate change in future trends.

The weather data collected for the past decade can be used to

analysis in order to identify the pattern of climate change.

Weather station is one of the devices to collect the weather

data (Belair and Mailhot, 2021). The weather data such as

precipitation, humidity, temperature, and wind speed can be

collected by using this device. The usage of weather station is

increasing popularity among the nation.

Weather station is a device that can update the weather

data in a more quickly and frequent way. It can collect the

data in minute or hourly based on the setting mode. The user

can change the setting mode according to the purpose of the

project respectively. Weather station has now been

increasingly accepted as the technology that facilities faster

and more up to date monitoring of the earth atmosphere

system (Belair and Mailhot, 2021). In particular, it is

becoming increasingly important in the study of hydrology

The art of weather forecasting began with early

civilizations using reoccurring astronomical and metrological

events to help them monitor seasonal changes in the weather

(MISTIC House, 2008) Around 650 BC the Babylonians tried

to predict short term weather changes based on the appearance

of clouds and optical phenomena such as haloes. By 300B.C

Chinese astronomers had developed a calendar that divided

the year into 24 festivals, each festival associated with a

different type of weather.

Around 340 B.C the Greek Philosopher Aristotle wrote

Metrological, a philosophical treatise that included theories

about the formation of rain, clouds, hail, wind, thunder,

lightning, and hurricanes. In addition, topics such s

astronomy, geography and chemistry were also addressed.

Aristotle made some remarkably acute observations

concerning the weather, along with some significant errors

(Carpenter, 2021). And his four–volume text was considered

by many to be the authority of weather theory for almost 200

years. Although many of Aristotle’s claims were erroneous, it

was not until about 17th century that many of his ideas were

overthrown.

Throughout the centuries, attempts have been made to

produce forecasts based on weather lore and personal

observations. However, by the end of the Renaissance, it

had
4
become increasingly evident that the speculations of the

natural philosophers were inadequate and that greater

knowledge of the necessary to further our understanding of

the atmosphere (Carpenter,2021). In order to do these

instruments were needed to measure the properties. The

atmosphere, such as moisture, temperature, and pressure. The

first known design in western civilization for a hygrometer an

instrument to measure the humidity of air was described by

Droegemeier (2014) in the mid fifteenth century. Galileo

Galilsi (1642, Italian) invented an early thermometer in 1592

or shortly thereafter, and Evangelista Torricelli (1608 – 1647,

Italian invented the barometer for measuring atmospheric

pressure in 1643.

While these meteorological instruments were being

refined during the seventeenth through nineteenth centuries,

other related observational theoretical and the technological

developments also contributed to our knowledge of the

atmosphere, and individuals at scattered locations began to

make and record atmospheric measurements. The invention of

the telegraph and the emergence of telegraph networks in the

mid nineteenth century allowed the routine transmission of

weather observations to and from observers and compilers.

Using these data, crude weather maps were drawn and surface

wind patterns and storm systems could be identified and

studied (Benjamin, 2019). Weather observing stations began

appearing all across the globe, eventually spawning the birth

of synoptic weather forecasting, based on the compilation and

analysis many observations taken simultaneously over a wide

area, in the 1860s.

With the formation of regional and global metrological

observation networks in the nineteenth and twentieth

centuries, more data were becoming available for observation

based weather forecasting. A great stride in monitoring

weather at high at altitudes was made in the 1920s with the

invention of the radiosonde. Small light weight boxes

equipped with weather instruments and a radio transmitter,

radiosondes are carried high into the atmosphere by a

hydrogen or helium filled balloon that ascends to an altitude

of about 30 kilometers before

bursting (Black, 2020). During the ascent, these instruments

transmit temperature moisture, and pressure data (Called

soundings) back to ground station. Three, the data are

processed and made available for constructing weather maps or

insertion into computer models for weather prediction. Today,

radiosondes are launched every twelve (12) hours from

hundreds of ground stations all over the world.

Statement of the Problems

Human activity is influenced by weather conditions,

monitoring of weather conditions can help in controlling the

activity (Droegemeier, 2017). The weather change is not same

at the local area and the nearest place. It is important to

monitor and study the pattern of weather at surrounding. The

pattern and trend of weather at local and closed area can be

identify by making analysis study of hydrological data from

hydrological station.

The current method of weather forecasting in the Aviation

industry impeded by the following problems

 i. There is a problem with climate which impede an

accurate weather temperature in a local area.

ii. Inability to detect a weather within a concise area

because the existing weather forecasting app focus on

major city which sometimes does not guarantee the

temperature of the local area.

iii. There weather forecasting requires high-definition

network like 4G which is not even available in local

environment in Nigeria.

Aim and Objectives of the study :

The aim of this study is to develop a website for weather

forecasting using html, css, js & A.I that will generate

weather temperature via seamless transfer protocol.

The objectives of this project work are as follows:

iv. To study aviation meteorologists’ issue accurate weather
forecast.
v. To design aviation flight control based on

information given using UML for architectural design

of the system.

vi. To implement Aviation Software System using

 software programming language such as JavaScript,

HTML, CSS and Python.

Project Methodology :

The method to be adopted when developing this project are as

follows:

vii. The system shall consider using questionnaire method

in gathering of information from the study area, fact

from the respondents shall be gathered and analyze for

further manipulation.

viii. The proposed system design shall be done using

HTML and CSS (Cascading Style Sheet) which will

build the aesthetics of the design model and later

formulate big function to the end-users. HTML will be

the building block while CSS would be used or styling

and positioning of the design model.

ix. Python general purpose programming language shall

be adopted for weather forecast model and weather

API shall be integrated from Sky.io for easy update.

Scope of the Study :

 The scope of this project will be to design workable easy

to use and reliable software package used to forecast weather

conditions for Aviation industry (Sam Mbakwe Airport).

The scope of this project design extends to the following

range and deals with the total automation of the following:

x. The data entry section which facilitates easy entry

of data obtained from measurements of various

instruments.

xi. The data base: the data entered is stored in a data base for

record purpose and also for easy sorting of a particular

record(s).
 List of Symbols, Abbreviations, and Nomenclature
API: Application Programming Interface
°C: Degrees Celsius
°F: Degrees Fahrenheit
GPS: Global Positioning System
HTML: Hypertext Markup Language
CSS: Cascading Style Sheets
JS: JavaScript
UI: User Interface
UX: User Experience
JSON: JavaScript Object Notation
DOM: Document Object Model
HTTP: Hypertext Transfer Protocol
HTTPS: Hypertext Transfer Protocol Secure
URL: Uniform Resource Locator
GUI: Graphical User Interface
API Key: Application Programming Interface Key
JSON: JavaScript Object Notation
DB: Database
OS: Operating System
RAM: Random Access Memory
 ABSTRACT

The Weather App project represents a significant endeavor

in the realm of mobile application development, aiming to
provide users with an intuitive and comprehensive platform
for accessing real-time weather information. In today's fast-
paced world, where accurate weather forecasts are essential
for planning daily activities, travel arrangements, and
outdoor events, the need for a reliable and user-friendly
weather application is more pronounced than ever.

The Weather App addresses this need by leveraging

cutting-edge technologies and innovative design principles
to deliver a seamless and personalized user experience.
Powered by the OpenWeatherMap API, the app offers users
the ability to retrieve weather data based on their current
location or a specific city search. Furthermore, the
integration of Alan AI voice command functionality
enhances accessibility and usability, allowing users to
interact with the app effortlessly.

Throughout the development process, careful attention has

been paid to user interface design, functionality, and
performance optimization. The app features a visually
appealing and intuitive interface, with intuitive navigation
and informative visualizations that make it easy for users to
interpret and act upon weather data. Additionally, the
implementation of responsive design ensures compatibility
across a wide range of devices and screen sizes, enhancing
the app's accessibility and usability.
In terms of functionality, the Weather App offers a
comprehensive suite of features, including real-time
weather updates, hourly and daily forecasts, detailed
weather descriptions, and customizable settings. Users can
personalize their weather experience by selecting preferred
units of measurement, setting location preferences, and
receiving notifications for severe weather alerts.

The project's implementation involved a systematic and

iterative approach, encompassing requirements analysis,
design prototyping, development, testing, and deployment
phases. Agile development methodologies were employed
to ensure flexibility, adaptability, and continuous
improvement throughout the project lifecycle.
Collaboration with stakeholders, including end-users and
domain experts, facilitated the identification of user needs,
preferences, and feedback, informing iterative refinements
and enhancements to the app's functionality and user
experience.

In conclusion, the Weather App project represents a

successful synthesis of technical expertise, design
innovation, and user-centric principles in the development
of a modern mobile application. By providing users with
access to accurate and timely weather information in an
intuitive and engaging format, the app empowers
individuals to make informed decisions and navigate their
daily lives with confidence
ANALYSIS AND DESIGN :

System Analysis :
System analysis is a problem-solving technique that

decomposes a system into its component parts for the purpose

of studying how well the component parts work and interact

to accomplish their purpose. It describes what a system should

do to meet the information needs of users.

System analysis is the process of investigating and

documenting the existing system; identifying problems of the

existing system; analyzing the proposed system for its costs

and benefits; analyzing both the system and user requirements

and considering possible alternative solutions. It is an in-depth

study of end user information needs that produce functional

requirements that are used as the basis for the design of a new

information system. Presumably, we do a system analysis in

order to subsequently perform a systems design.

Existing System :

The existing of Aviation Spp Weather Forecasting App is

very slow due to high data consumption and sometimes lead

to server error (error 404). The currency converter application

always uses default currency market from 4 different

countries in the world to generate an accurate time series

equivalent which are USA, CANADA, UK, CHINA.

Restatement of Project Objectives :

The objective is to develop and implement a weather

forecasting application that will serves as monitoring app for

majority of the company.

Design Methodologies :
After in-depth analysis, we decided to adopt the waterfall

software development process model. This model proposes an

orderly method to software development which starts with a

well-defined, understood user’s specification of requirements

and moves through to deployment in a linear form as shown in

the figure below.

 Communication(requirements gathering and definition)

Planning(estimating, scheduling)

Modeling(analysis and design)

Development(coding and testing)

Deployment(delivery, support and feedback)

Figure. Stages of the software development process model

Pros and Cons of the Waterfall Development Model :

The drawbacks of this model include;

a) The working version of the program(s) will not be

available until late in the project time-span, thus an

undetected error until the working program is reviewed is

dangerous.

b) Difficulty in accommodating change after the process is

in progress making it difficult to respond to customer changes.

c) Therefore, this model is only appropriate when the

requirements are well-understood.
On the other hand, the advantages of using this model are that;
d) Documentation is produced at each phase.
e) It fits with other engineering process models.

User Requirements :

User requirements identify the services the application ought

to provide for the users of the system. System requirements

provides the detailed description of the system services. The

following are the user requirements

i. Accurate Weather Data: Users expect the application to

provide precise and current weather information for their

chosen location.

ii. Simple Interface: The application should feature an

easy-to-use and intuitive interface, allowing users to

access forecasts quickly.

iii. Hourly and Daily Forecasts: Users require both hourly

and daily weather forecasts to plan their activities

effectively.

iv. Location Detection: The application should

automatically detect the user's location for convenience,

 but also allow manual location entry.

v. Personalization: The ability to customize units (e.g.,

Celsius/Fahrenheit) and save favorite locations for easy

access is desired.

Data Flow Diagram :

The data flow process can be depicted by the diagram below:

UI Forecast
Data Source API Weather

Forms

DB file Main
System
Data Storage

DB file
Fig. Data Flow

The above data flow diagram describes the relationship

between the flow of information from the user interface stage

to the last stage of interfaces which is data storage link.

Theuser search for currency to be converted and select

appropriate currency with value input before proceeding to

converter modules.

1.1 Input Design

Input design specified the manner in which input enters

the system for processing. It ensures the reliability of the

system and production of result to erroneous information; it

determines whether the user of the system interacts with the

system efficiently. Input are linked to database for storing the

data. The forms are designed with an attribute of the form,

combo box, for a drop down list, text linked to database for

viewing, commend button are function to be carried out to

perform a task such as add, read, delete, update.

All the forms listed above are design electronically, using the

Hypertext Markup Language (HTML) as stated in the

previous chapter and there are additional forms and some

static page that provides information about the college to

visitor.

The computerized system has the following web pages:

i. Index Page: This is the home page of the software; it serves

as a gate man that gives authorized user access to the private
resources of the system and denied access to unauthorized
person. Homepage is design to have some text and image link
that allow the visitor to navigate through some page that are not
private. Output Design
The output design that can be generated from the system, this

depend on the type of information needed to be extracted from

the record gathered such as report on the amounts to be

converted with absolute accuracy. The output is designed in

such a way that user receives understandable information that

is used for decision making. The user must be able to easy

find the output, move forward and backward and exit the

report and the timing of computer outputs information must

reach the user to another transaction or decision.

System Requirements :

This is a comprehensive description of the intended purpose and

environment for software under development.

i. Operating System Compatibility: The application should be

compatible with major operating systems such as Windows,

macOS, iOS, and Android.

ii. Processor and Memory: The application should run

smoothly on devices with moderate processor capabilities and

memory, ensuring responsiveness and efficiency.

iii. Internet Connectivity: An active internet connection is

required to fetch real-time weather data from the API.

iv. Location Services: The application should have access to

the device's location services to provide accurate weather data

based on the user's location.

v. Web API Interaction: The device should have the capability

to interact with web APIs to fetch weather data.

 vi. Security Measures: The application should adhere to security

standards to ensure the protection of user data and privacy.

vii. Accessibility Features: The application should support basic

accessibility features, ensuring usability for users with

disabilities Regular Updates: The device should be connected

to a reliable source for software updates to keep the

application current and functional.

System Design :

The system is a web-based system that allows multiple

accesses concurrently. System design is divided into stages:

Logical design: This is concerned with object-oriented modelling of

the system analysis. Physical design: This is concerned with the

construction of the real system.

In the object-oriented analysis and design, Unified Modelling

Language will be used to model the system. A model is the act of

drawing one or more graphical representations of a system.

2
Modelling is the process of abstracting and organizing significant

features of part of the real world.

INTRODUCTION OF TECHNOLOGIES USED :

 HTML : The Hyper Text Markup Language or HTML is the

standard markup language for documents designed to be displayed

in a web browser. It can be assisted by technologies such as

Cascading Style Sheets (CSS) and scripting languages such as

JavaScript. Web browsers receive HTML documents from a web

server or from local storage and render the documents into

multimedia web pages. HTML describes the structure of a web page

semantically and originally included cues for the appearance of the

document. CSS : CSS stands for Cascading

Style Sheets. It is a style sheet language which is used to describe

the look and formatting of a document written in markup language.

It provides an additional feature to HTML. It is generally used with

HTML to change the style of web pages and user interfaces. It can
3
also be used with any kind of XML documents including plain

XML, SVG and XUL. CSS is used along with HTML and

JavaScript in most websites to create user interfaces for web

applications and user interfaces for many mobile applications.

JavaScript: JavaScript is a dynamic computer programming

language. It is lightweight and most commonly used as a part of web

pages, whose implementations allow client-side script to interact

with the user and make dynamic pages. It is an interpreted

programming language with object-oriented capabilities. JavaScript

was rst known as LiveScript, but Netscape changed its name to

JavaScript, possibly because of the excitement being generated by

Java. JavaScript made its first appearance in Netscape 2.0 in 1995

with the name LiveScript. The general-purpose core of the language

has been embedded in Netscape, Internet Explorer, and other web

browsers. JavaScript has a vast ecosystem of third-party libraries

and frameworks that simplify API integration. Libraries like Axios,

4
 jQuery, and Fetch API provide convenient methods and utilities for

making API requests, handling responses.

CODING : The following shows the code which is used to display

output and to design a pleasant looking website. HTML CODE :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather App</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?
family=Merriweather+Sans:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?
family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200
;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<h1>Weather App</h1>

<div class="tab-container">
<p class="tab" data-userWeather>Your Weather</p>
<p class="tab" data-searchWeather>Search Weather</p>
</div>

5
<div class="weather-container">
<!-- grant location container-->
<div class="sub-container grant-location-container">
<img
src="./assets/location.png"
width="80"
height="80"
loading="lazy"
/>
<p>Grant Location Access</p>
<p>Allow Access to get weather Information</p>
<button class="btn" data-grantAccess>Grant Access</button>
</div>

<!-- search form -> form-container-->

<form class="form-container" data-searchForm>
<input placeholder="Search for City..." data-searchInput />
<button class="btn" type="submit">
<img
src="search.jpg"
width="20"
height="20"
loading="lazy"
/>
</button>
</form>

<!--- loading screen container -->

<div class="sub-container loading-container">
<img src="./assets/loading.gif" width="150" height="150" />
<p>Loading</p>
</div>

<!-- show weather info -->

<div class="sub-container user-info-container">
<!--city name and Flag-->
<div class="name">
<p data-cityName></p>
<img data-countryIcon />
</div>

<!-- weather descriptuion-->

<p data-weatherDesc></p>
<!--weather Icon-->
<img data-weatherIcon />

6
 <!--temperature-->
<p data-temp></p>

<!--3 cards - parameters-->

<div class="parameter-container">
<!--card 1-->
<div class="parameter">
<img src="windspeed.jpg" />
<p>windspeed</p>
<p data-windspeed></p>
</div>

<!--card 2-->
<div class="parameter">
<img src="humidity.jpg" />
<p>humidity</p>
<p data-humidity></p>
</div>

<!--card 3-->
<div class="parameter">
<img src="cloud.jpg" />
<p>Clouds</p>
<p data-cloudiness></p>
</div>
</div>
</div>
</div>
<!-- Video element for the background -->
<video id="backgroundVideo" type="video/mp4" autoplay loop muted>
<!-- Light mode video source -->
<!-- <source src="./assets/vid1.mp4" type="video/mp4" /> -->
<!-- Dark mode video source -->
<!-- <source src="./assets/vid2.mp4" type="video/mp4" /> -->
<!-- Fallback text in case the browser doesn't support video -->
<!-- Your browser does not support the video tag. -->
</video>
</div>
<div class="alan-btn"></div>

<script
type="text/javascript"
src="https://studio.alan.app/web/lib/alan_lib.min.js"
></script>
<script src="script.js"></script>

7
 </body>
</html>

Css code:
*,*::before,*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Merriweather Sans', sans-serif;

:root {
--colorDark1: #112D4E;
--colorDark2: #3F72AF;
--colorLight1: #DBE2EF;
--colorLight2: #F9F7F7;
}
body{
background-image: linear-gradient(160deg, #112d4e 0%, #3f72af 100%);

}
/* Light mode */
body.light-mode {
/* background-color: #f9f7f7; */
background-image: linear-gradient(160deg, #112d4e 0%, #3f72af 100%);
color: #112d4e;
}

/* Dark mode */
body.dark-mode {
background-image: none;
background-color: #112d4e;
color: #dbe2ef;
}

/* Your existing CSS remains the same */

video#backgroundVideo {

8
 position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}

.wrapper{
width:100vw;
height:100vh;
color: var(--colorLight2);
}

h1 {
text-align: center;
text-transform:uppercase;
padding-top: 20px;
}

.tab-container {
width:90%;
max-width: 550px;
margin: 0 auto;
margin-top: 4rem;
display: flex;
justify-content: space-between;
}

.tab{
cursor: pointer;
font-size: 0.875rem;
letter-spacing: 1.75px;
padding: 5px 8px;
}

.tab.current-tab{
background-color: rgba(219, 226, 239, 0.5);
border-radius: 4px;
}
.weather-container{
/* block mtlb top aur bottom ki margin */
margin-block:4rem;
}

9
.btn{
all: unset;
/* appearance: none;
border:none;
color: white; */
font-size: 0.85rem;
text-transform: uppercase;
border-radius: 5px;
background-color: var(--colorDark2);
cursor: pointer;
padding: 10px 30px;
margin-bottom: 10px;
}

.sub-container{
display:flex;
flex-direction:column;
align-items: center;
}

.grant-location-container{
display:none;
}

.grant-location-container.active{
display:flex;
}
.grant-location-container img{
margin-bottom: 2rem;
}

.grant-location-container p:first-of-type{
font-size: 1.75rem;
font-weight: 600;
}

.grant-location-container p:last-of-type{
font-size:0.85rem;
font-weight: 500;
margin-top: 0.75rem;
margin-bottom: 1.75rem;
letter-spacing: 0.75px;
}
.loading-container{
display: none;

10
}

.loading-container.active{
display: flex;
}

.loading-container p{
text-transform: uppercase;
}
.user-info-container{
display:none;
}

.user-info-container.active{
display: flex;
color: #112D4E;
}
.user-info-container.active{
display: flex;

}
.name{
display: flex;
align-items: center;
gap: 0 0.5rem;
margin-bottom: 1rem;
}

.user-info-container p{
font-size:1.5rem;
font-weight:500;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.user-info-container.dark-mode p{
text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.719);
font-weight:600;
}

.user-info-container img{
width:90px;
height:90px;
}

.name p{
font-size:2rem;

11
}

.name img{
width: 30px;
height:30px;
object-fit: contain;
}

.user-info-container p[data-temp] {
font-size:2.75rem;
font-weight:700;
}

.parameter-container{
width:90%;
display: flex;
gap: 10px 20px;
justify-content: center;
align-items: center;
margin-top: 2rem;
}

.parameter{
width:30%;
max-width:200px;
background-color: rgba(219, 226, 239, 0.5);
border-radius: 5px;
padding:1rem;
display: flex;
flex-direction: column;
gap:5px 0;
/* justify-content: space-between; */
align-items: center;
color: #dbe2ef;
}

.parameter img{
width:50px;
height:50px;
}

.parameter p:first-of-type{
font-size: 1.15rem;
font-weight:600;

12
 text-transform: uppercase;
}

.parameter p:last-of-type{
font-size: 1rem;
font-weight: 200;
}
.form-container{
display: none;
width:90%;
max-width:550px;
margin:0 auto;
justify-content: center;
align-items: center;
gap: 0 10px;
margin-bottom: 3rem;
}

.form-container.active{
display: flex;
}
.form-container.pad{
padding-bottom: 800px;
}
.form-container input{
all:unset;
width: calc(100% - 80px);
height:40px;
padding: 0 20px;
background-color:rgba(99, 99, 99, 0.5);
border-radius: 10px;
}

.form-container input::placeholder{
color: rgba(241, 241, 241, 0.7);
}

.form-container input:focus{
outline: 3px solid rgba(255, 255, 255, 0.7);
}
.form-container .btn {
padding:unset;
width: 40px;
height: 40px;
display: flex;

13
 align-items: center;
justify-content: center;
border-radius: 100%;
margin-bottom:1px;
}

@media screen and (max-width: 680px) {

.tab{
margin-bottom: 1rem;
}

.parameter-container{
flex-direction: column;
align-items: center;
}
.parameter{
width: 100%;
margin-bottom: 1rem;
}

.form-container input{
width: 80%;
margin-bottom: 0rem;
}

.wrapper{
height:100%;
}
}
@media screen and (max-width: 380px){
.tab-container{
flex-direction: column;
align-items: center;
}
.form-container{
flex-direction: column;
align-items: center;
}
.form-container input{
width: 95%;
margin-bottom: 1rem;
}
}

14
Javascript code :
const userTab = document.querySelector("[data-userWeather]");
const searchTab = document.querySelector("[data-searchWeather]");
const userContainer = document.querySelector(".weather-container");
const grantAccessContainer = document.querySelector(
".grant-location-container"
);
const searchForm = document.querySelector("[data-searchForm]");
const loadingScreen = document.querySelector(".loading-container");
const userInfoContainer = document.querySelector(".user-info-container");
const video = document.getElementById("backgroundVideo");
video.src = "./assets/vid2.mp4";

function toggleMode(mode) {
const body = document.body;
body.classList.remove("light-mode", "dark-mode");
userInfoContainer.classList.remove("dark-mode");
console.log("mode", mode);
if (mode === "dark") {
body.classList.add("dark-mode");
userInfoContainer.classList.add("dark-mode");
video.src = "./assets/vid1.mp4";
} else if (mode === "light") {
body.classList.add("light-mode");
video.src = "./assets/vid2.mp4";
}
console.log("mode", mode);
}
// toggleMode("light");
const alanBtnInstance = alanBtn({
key: "733a226e82ccc5795a587fa98514c71e2e956eca572e1d8b807a3e2338fdd0dc/stage",
onCommand: function ({ command, mode, city }) {
if (command === "changeMode") {
//call client code that will react on the received command
toggleMode(mode);
} else if (command === "searchWeather") {
// Fetch weather information for the specified city
console.log("city name is ", city);
fetchSearchWeatherInfo(city);
}
},
rootEl: document.getElementById("alan-btn"),
});

15
//initially vairables need????

let oldTab = userTab;

const API_KEY = "d1845658f92b31c64bd94f06f7188c9c";
oldTab.classList.add("current-tab");
getfromSessionStorage();

function switchTab(newTab) {
if (newTab != oldTab) {
oldTab.classList.remove("current-tab");
oldTab = newTab;
oldTab.classList.add("current-tab");

if (!searchForm.classList.contains("active")) {
//kya search form wala container is invisible, if yes then make it visible
userInfoContainer.classList.remove("active");
grantAccessContainer.classList.remove("active");
searchForm.classList.add("active");
searchForm.classList.add("pad");
} else {
//main pehle search wale tab pr tha, ab your weather tab visible karna h
searchForm.classList.remove("active");
userInfoContainer.classList.remove("active");
//ab main your weather tab me aagya hu, toh weather bhi display karna poadega, so
let's check local storage first
//for coordinates, if we haved saved them there.
getfromSessionStorage();
}
}
}

userTab.addEventListener("click", () => {
//pass clicked tab as input paramter
switchTab(userTab);
});

searchTab.addEventListener("click", () => {
//pass clicked tab as input paramter
switchTab(searchTab);
});

//check if cordinates are already present in session storage

function getfromSessionStorage() {
const localCoordinates = sessionStorage.getItem("user-coordinates");

16
 if (!localCoordinates) {
//agar local coordinates nahi mile
grantAccessContainer.classList.add("active");
} else {
const coordinates = JSON.parse(localCoordinates);
fetchUserWeatherInfo(coordinates);
}
}

async function fetchUserWeatherInfo(coordinates) {

const { lat, lon } = coordinates;
// make grantcontainer invisible
grantAccessContainer.classList.remove("active");
//make loader visible
loadingScreen.classList.add("active");
searchForm.classList.add("pad");
//API CALL
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=$
{API_KEY}&units=metric`
);
const data = await response.json();

loadingScreen.classList.remove("active");
userInfoContainer.classList.add("active");
searchForm.classList.remove("pad");

renderWeatherInfo(data);
} catch (err) {
loadingScreen.classList.remove("active");
//HW
}
}

function renderWeatherInfo(weatherInfo) {
//fistly, we have to fethc the elements

const cityName = document.querySelector("[data-cityName]");

const countryIcon = document.querySelector("[data-countryIcon]");
const desc = document.querySelector("[data-weatherDesc]");
const weatherIcon = document.querySelector("[data-weatherIcon]");
const temp = document.querySelector("[data-temp]");
const windspeed = document.querySelector("[data-windspeed]");
const humidity = document.querySelector("[data-humidity]");

17
 const cloudiness = document.querySelector("[data-cloudiness]");

//fetch values from weatherINfo object and put it UI elements

cityName.innerText = weatherInfo?.name;
countryIcon.src = `https://flagcdn.com/144x108/$
{weatherInfo?.sys?.country.toLowerCase()}.png`;
desc.innerText = weatherInfo?.weather?.[0]?.description;
weatherIcon.src = `http://openweathermap.org/img/w/${weatherInfo?.weather?.
[0]?.icon}.png`;
temp.innerText = ` ${weatherInfo?.main?.temp}°C`;
windspeed.innerText = `${weatherInfo?.wind?.speed} m/s`;
humidity.innerText = `${weatherInfo?.main?.humidity}%`;
cloudiness.innerText = `${weatherInfo?.clouds?.all}%`;
}

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
//HW - show an alert for no gelolocation support available
}
}

function showPosition(position) {
const userCoordinates = {
lat: position.coords.latitude,
lon: position.coords.longitude,
};

sessionStorage.setItem("user-coordinates", JSON.stringify(userCoordinates));
fetchUserWeatherInfo(userCoordinates);
}

const grantAccessButton = document.querySelector("[data-grantAccess]");

grantAccessButton.addEventListener("click", getLocation);

const searchInput = document.querySelector("[data-searchInput]");

searchForm.addEventListener("submit", (e) => {

e.preventDefault();
let cityName = searchInput.value;

if (cityName === "") return;

else fetchSearchWeatherInfo(cityName);
});

18
async function fetchSearchWeatherInfo(city) {
loadingScreen.classList.add("active");
userInfoContainer.classList.remove("active");
grantAccessContainer.classList.remove("active");

try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=$
{API_KEY}&units=metric`
);
const data = await response.json();
loadingScreen.classList.remove("active");
userInfoContainer.classList.add("active");
searchForm.classList.remove("pad");
renderWeatherInfo(data);
} catch (err) {
console.error("Error fetching weather data:", err);
}
}

19
Running the code in visual studio :

1. Open vs code and write the code written above.

2. Now run without debugging you the website will open in
front of you

Click on the allow

20
Now you will get the weather of your locality.

21
 You can check weather by typing the city

And click on the search

USE OF A.I IN WEATHER APP:

Imagine a weather app that listens to your voice commands and

provides you with real-time weather updates for any location.
With my Voice-Powered Weather App, you can effortlessly ask
about the weather conditions anywhere in the world, just by
speaking into your device. Whether you're planning a weekend
getaway or simply curious about the weather in your hometown,
this app has got you covered in style. ☀️❄️
22
 Voice-Enabled Weather Search
Forget about typing or tapping – it's time for a hands-free
experience! Simply say, "Search weather of New York ?" and voilà,
the app will respond with the latest weather details for the Big
Apple. This isn't just convenient; it's a game-changer for
accessibility, making weather updates accessible to everyone,
including those with limited mobility.

Click on this icon and ask for

weather search

Now you will get your result :

23
You can also check the windspeed , humidity and clouds.

24
CONCLUSION:
Conclusion The development and implementation of the
Weather App represent a significant achievement in the field of
mobile application development, combining technical
innovation, user-centric design, and real-world utility to deliver
a seamless and intuitive weather forecasting experience.
Throughout the project lifecycle, a systematic and iterative
approach was employed, encompassing requirements analysis,
design prototyping, development, testing, and deployment
phases. The Weather App offers users access to accurate and
timely weather information, empowering them to make informed
decisions and plan their activities with confidence. By
leveraging the OpenWeatherMap API and integrating Alan AI
voice command functionality, the app provides comprehensive
weather forecasts, real-time updates, and customizable settings
tailored to individual preferences. Key features of the Weather
App include intuitive user interface design, responsive layout
optimization, and robust data visualization techniques, ensuring
accessibility and usability across a wide range of devices and
screen sizes. User feedback and iterative refinements played a
crucial role in shaping the app's functionality, performance, and
overall user experience, highlighting the importance of user
engagement and continuous improvement in app development.
In conclusion, the Weather App project has successfully
demonstrated the efficacy of agile development methodologies,
collaborative teamwork, and stakeholder engagement in
delivering a high-quality mobile application that meets the needs
25
and expectations of its users. Moving forward, the project lays
the foundation for future enhancements, expansions, and
collaborations in the realm of weather forecasting, application
development, and digital innovation. The journey of
conceptualizing, designing, and implementing the Weather App
has been both challenging and rewarding, and I am proud to
have been a part of this transformative experience. As
technology continues to evolve and user demands evolve, the
Weather App stands as a testament to the power of innovation,
perseverance, and dedication in creating meaningful solutions
that enrich people's lives and experiences. Feel free to adjust the
content and tone of the conclusion section to reflect your
project's specific achievements, challenges, and future prospects.

26
27