A PROJECT REPORT ON

“WEATHER FORECASTING USING WEB DEVELOPMENT”

SUBMITTED BY:
GARBITA GHOSH (12000121043)
DIPANITA MALLICK (12000121052)
PRIYANKA MANNA (12000121056)
AMAN KUMAR (12000121057)
SAIKAT GHOSH (12000121066)
SUDIP SANTRA (12031521009)

UNDER GUIDENCE OF:

MS. SUMANA KUNDU
ASSISTANT PROFESSOR,
DEPARTMENT OF CSE

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

DR. B. C ROY ENGINEERING COLLEGE,
DURGAPUR - 713206
(AFFILIATED TO MAULANA ABUL KALAM AZAD UNIVERSITY OF TECHNOLOGY)
 DECLARATION

I hereby declare that the project work en tled “Weather forecas ng using web
development” submi ed to the DR. B. C Roy Engineering College ,is a record of an
original work done by us under the guidance of Ms. Sumana Kundu and this project
work is submi ed in the par al fulfilment of the requirements for the award of the
degree of B. TECH in Computer Science & Engineering. The results embodied in this
thesis have not been submi ed to any other university or Ins tute for the award of
any degree or diploma.

PLACE: SIGNATURE OF THE CANDIDATE

DATE:

1
 ACKNOWLEDGEMENT
I would like to express my sincere and deep sense of gra tude to my project guide Ms.
Sumana Kundu for her valuable guidance, sugges ons and constant encouragement
which paved my pay to successful comple on of my project.
I convey my thanks to the management and all teaching staffs and non teaching staffs
of the Computer Science & Engineering department who were helpful in many ways
for the comple on of the project.

Also, I thank my parents and friends for suppor ng me in the comple on of this
project within the limited me frame.

2
 INTRODUCTION
Weather forecas ng can be defined as the act of predic ng future weather condi ons
or an a empt to indicate the weather condi ons which are likely to occur. Weather
forecas ng is the applica on of science and technology to predict the state of the
atmosphere for a given loca on. For centuries , people have tried to forecast the
weather informally and officially since the nineteenth century. Weather warnings are
important forecasts because they are used to protect life and property.

The Weather Forecas ng project is a web applica on that leverages HTML, CSS, and
JavaScript to fetch weather data from a weather API and display current weather
condi ons and forecasts for a specific loca on. It provides users with real- me
weather informa on, allowing them to stay informed about the weather condi ons in
their desired loca on.

The Weather Forecas ng Project u lizes an API (in this project, the OpenWeatherAPI)
to retrieve weather data based on the user’s input loca on. The applica on
dynamically fetches the current weather informa on and the forecast for the
upcoming days. It then presents this data in a user-friendly format, making it easy for
users to understand and interpret.

Function call to fetch weather data using Fetch API

In computer programming, an applica on programming interface (API) is a set of
subrou ne defini ons, communica on protocols, and tools for building so ware. In
general terms, it is a set of clearly defined methods of communica on among various
components. A good API makes it easier to develop a computer program by providing
all the building blocks, which are then put together by the programmer. An API may
be for a web-based system, opera ng system, database system, computer hardware,
or so ware library.

To fetch the weather data using fetch API at first, we need to create a function that
fetches the weather data from the API. We will use the “fetch()” function to make a
GET request to the API with the location parameter and API key. Once we get the data,
we will convert it to JSON and return it. Next, we need to create a function that
updates the UI with the weather data. We will get the HTML elements
using “document.querySelector()” and update their text content with the weather
data. Finally, we need to add an event listener to the search button to fetch the
weather data for the entered location and update the UI.

3
 OBJECTIVE OF THIS PROJECT

Throughout the human history, people were keen to know about the weather, its
parameters and its impacts on their daily lives. By the virtue the technological
advancement, in this era, the informa on about the weather lies in our hands
(through mobile phones or websites). We can now make ourselves aware of not only
our loca on’s temperature, humidity etc. but also any part of the world. In this
project, we will learn how to make a weather applica on using pure JavaScript. We
will also be familiarizing ourselves with the JSON extrac on during this process using
open weather API. As a web developer, grabbing data from API’s is something you are
going to do o en. Fetching weather data is a perfect way to get your feet wet. In this
project we are going to use the browsers built in fetch with JavaScript to grab data
from Open Weather Map's API.

4
 SOFTWARE DEVELOPMENT LIFE CYCLE (SDLC)
SYSTEM ANALYSIS (SIS)
System analysis aims at establishing requests for the system to be acquired,
developed and installed. It involves studying and analysing the ways of an
organisa on currently processing the data to produce informa on. Analysing the
problem thoroughly forms the vital part of the system study. In system analysis
prevailing situa on of problem carefully examined by breaking them into sub
problems. Problema c areas are iden fied, and informa on is collected. Data
gathering is essen al to any analysis of request. It is necessary that this analysis
determines the designer with objec ves, ac vi es and the func on of the
organisa on in which the system is to be implemented.

PROPOSED SYSTEM
There are various uses of weather forecasting in day-to-day life, it can be as
simple as deciding whether to take an umbrella with you on your work or to
deciding your outfit. Following are some of the places where weather
forecasting plays a major role:
 Seasons and nature play a major role in agriculture and farming. When it
comes to the farming of various fruits, vegetables, and pulses,
temperature is extremely important. Farmers didn't have a better
understanding of weather forecasts before, so they had to rely on
estimates to do their jobs. They do, however, sometimes suffer losses as
a result of inaccurate weather forecasts. Farmers will now get all of their
forecasts on their smartphones.
 It aids food grain transportation and storage.
 It aids in the handling of cultural operations such as harrowing, hoeing,
etc.
 It aids in the implementation of livestock protection initiatives.
 Weather Forecasting is crucial since it helps to determine future climate
changes. With the use of latitude, we can determine the probability of
snow and hail reaching the surface. We are able to identify the thermal
energy from the sun that is exposed to a region. Climatology is the
scientific study of climates, which in simple words mean weather
conditions over a period. A bunch of studies within atmospheric sciences
also takes the help of the variables and averages of short-term and long-
term weather conditions accumulated.

5
 METHODOLOGY USED
In a developing country and an economy like India where major popula on is
dependent on agriculture, weather condi ons play an important and vital role
in economic growth of the overall na on. So, weather predic on should be
more precise and accurate. Weather parameters are collected from the open
source . The programming language used is ‘ Javascript ’. The figure visualizes
the system in the form of a block diagram.

System Block Diagram

The weather is predicted using various indices like temperature, humidity,
pressure and wind speed .
Temperature - It is the measure of hotness or coldness, generally measured
using thermometer. Units of temperature most frequently used are Celsius and
Fahrenheit. We have used normal temperature as different index value for
predic on of the weather.
Humidity – It is the quan ty of water vapor present in the atmosphere. It is a
rela ve quan ty.
Atmospheric Pressure - The air around us has weight, and it presses against
everything it touches. That pressure is called atmospheric pressure, or air
pressure. It is the force exerted on a surface by the air above it as gravity pulls
it to Earth.
Wind Speed - Wind speed describes how fast the air is moving past a certain
point. This may be an averaged over a given unit of me, such as miles per
hour, or an instantaneous speed, which is reported as a peak wind speed, wind
gust or squall.

6
 ADVANTAGES OF THE PROPOSED SYSTEM

Emergency Preparedness
Accurate forecasts allow individuals, communities, and authorities to prepare
for severe weather events such as hurricanes, tornadoes, and blizzards,
reducing potential damage and saving lives.
Agricultural Planning
Farmers use weather forecasts to plan planting, harvesting, and irrigation
schedules. This helps optimize crop yields, reduce losses, and manage
resources more efficiently.
Avia on and Transporta on Safety
Weather forecasts help pilots and airlines make informed decisions about flight
routes and schedules, reducing the risks associated with adverse weather
conditions.
Energy Produc on
The energy sector relies on weather forecasts to manage energy resources like
solar, wind, and hydroelectric power. Accurate predictions enable better
utilization and planning for energy generation.
Natural Resource Management
Forestry, fisheries, and wildlife management benefit from weather forecasts to
make decisions about resource conservation, pest control, and habitat
management.
Tourism and Outdoor Ac vi es
Weather forecasts play a crucial role in planning outdoor recreational activities
and tourism. People can make informed decisions about vacations, hiking trips,
and outdoor events.
Health and Safety
Weather forecasts provide information about heatwaves, cold snaps, and air
quality. This helps individuals take precautions to prevent health issues and
heat-related illnesses.
Infrastructure Planning
Urban planners and engineers use weather forecasts to design and build
resilient infrastructure that can withstand extreme weather events such as
flooding and storms.

7
Business Decisions
Various industries, including construction, retail, and transportation, rely on
weather forecasts to optimize logistics, staffing, and inventory management
based on changing weather conditions.
Scien fic Research
Weather forecasts contribute to climate studies, atmospheric research, and
environmental monitoring by providing real-time data and contributing to the
understanding of complex weather patterns.
Military Use
Military personnel benefit from weather forecasting as they can plan their
military activities based on expected weather conditions. During the war the
military can plan their battles by featuring in the expected weather condition
to maximize the chance of winning the war.

DISADVANTAGES OF THE PROPOSED SYSTEM

 Weather is extremely difficult to forecast correctly.
 It is expensive to monitor so many variables from many sources.
 The computers needed to perform the millions of calculations necessary
are expensive.
 The weather forecasters get blamed if the weather is different from the
forecast.
 Confusing terminology : The terminology used in weather forecasting
can be confusing, making it difficult for some people to understand the
predictions.
 Reliance on technology : Weather forecasting relies heavily on
technology, and if the technology fails or is unavailable, accurate
predictions cannot be made.
 Limited reach : Weather forecasts are not available for many remote or
sparsely populated areas, making it difficult for people in these areas to
prepare for severe weather.
 Model limitations : Forecasting models can only make predictions based
on existing data and are limited by the quality and quantity of that data.
 Limited time frame : Forecasts are usually only accurate for a short time
frame, making it difficult to plan ahead.

8
SOFTWARE ENGINEERING PARADIGMS APPLIED
The two main programming approaches are top-down approach and bo om-
up approaches. In the context of a weather forecas ng project that involves
HTML, CSS, and JavaScript for web development, the approach is generally
more aligned with a top-down approach.
Top-Down Approach : In web development, the top-down approach involves
star ng with the overall design and structure of the user interface (UI) and
then breaking it down into smaller components, func onali es, and
interac ons. This approach focuses on crea ng an intui ve and visually
appealing user experience by first designing the high-level layout and then
progressively adding details.
For a weather forecas ng project using HTML, CSS, and JavaScript, we would
begin by designing the user interface elements such as the main weather
display, loca on selec on, and forecast visualiza on. This top-level design
would include layout, color schemes, typography, and overall page structure
using HTML and CSS.
Once the high-level design is in place, we would then implement the specific
func onali es and interac ons using JavaScript. This might involve retrieving
weather data from APIs, processing and displaying the data, crea ng
interac ve elements like bu ons and dropdowns, and handling user
interac ons such as changing loca ons or viewing extended forecasts.
While the top-down approach is more prominent in web development due to
its focus on user experience and interface design, it's important to note that
elements of the bo om-up approach are also present. For instance, we'll need
to incorporate data from weather APIs using JavaScript, which involves
integra ng specific data points (bo om level) into your UI design (top level).
Ul mately, the success of the project will rely on finding a balance between the
top-down and bo om-up approaches to create a func onal, user-friendly, and
visually appealing weather forecas ng applica on.

9
 CONFIGURATION

Hardware Requirements:
The most common set of requirements defined by any Opera ng system or so ware
applica on is the Physical computer resources, also known as hardware. The
minimum hardware requirements are as follows:

Processor Intel i5
RAM 4 GB
Graphics Integrated graphics card
Hard Disk 512 GB data

So ware Requirements:
So ware requirements deals with defining resource requirements and prerequisites
that needs to be installed on a computer to provide func oning of an applica on .
The minimal so ware requirements are as follow:

Pla orm Pla orm Independent

The opera ng system Windows 10
Framework Google chrome
Front-end tool Microsoft Visual Studio Code
API Open weather API

10
 DATAFLOW DIAGRAMS
A data flow diagram(DFD) is a graphical representa on of the “flow” of data
through an informa on system,modelling its process aspects. O en they are a
preliminary step used to create an overview of the system which can later be
elaborated.DFDs can also be used for the visualiza on of data processing
(structured design). A DFD shows what kinds of informa on will be input into and
output from the system, where the data will come from and go to , and where the
data will be stored. It does not show informa on about the ming of process , or
informa on about whether processes will operate in sequence or in parallel.

Level 0 DFD:
A context-level or level 0 data flow diagram shows the interac on between the
system and external agents which act as data sources and data sinks. On the
context diagram (also known as the Level 0 DFD) the system's interac ons with the
outside world are modeled purely in terms of data flows across the system
boundary. The context diagram shows the en re system as a single process, and
gives no clues as to its internal organiza on.

INPUT DATA & TESTING & ADMIN

USER PROCESSING PREDICT THE
WEATHER

Level 1 DFD:
The Level 1 DFD shows how the system is divided into sub-systems (processes),
each of which deals with one or more of the data flows to or from an external
agent, Level 1 Data Flow diagram shows an in depth explana on of overall process
of the data flow.

11
 DATA TESTING
COLLECTED WEATHER
& START TO
USER PROCESS PREDICT
ADMIN

TRAINED MODULES PREDICTS THE

OUTPUT

Level 2 DFD:
Complete details of every func on performed by Admin. Every step is explained
in detail. The four components of a data flow diagram (DFD) are  External
En es/Terminators are outside of the system being modelled. Terminators
represent where informa on comes from and where it goes. In designing a
system, we have no idea about what these terminators do or how they do it.
Processes modify the inputs in the process of genera ng the outputs .Data
Stores represent a place in the process where data comes to rest. A DFD does
not say anything about the rela ve ming of the processes, so a data store might
be a place to accumulate data over a year for the annual accoun ng process.
Data Flows shows how data moves between terminators, processes, and data
stores (those that cross the system boundary are known as IO or Input Output
Descrip ons).
OUTPUT
INPUT
WITH THE
DATA
APPROX

USER TRAINED
DATA
ADMIN
MODULE

DATA PROCESSING &

INITIALIZING
TESTING THE DATA &
PREDICTS THE WEATHER

12
 PROJECT MODULES

Module 1: Interac ve Web Applica on :

An interac ve website is essen ally an internet page that uses different kinds
of so ware to create a rich, interac ve experience for the user. The HTML and
CSS gives the web applica on a pleasant look to interact with, it provides a
simple and yet sophis cated look to the user every me they into the web
applica on.

Module 2: Loca on Based Predic on

Where the user will be naming the loca on for which he wants to know the
weather updates. A er entering the city name, this model gives the weather
forecast for the city entered by the user by providing details like Date, Time
Maximum Temperature, Minimum Temperature and picture describing rainfall
or sunshine. It also predicts the future of weather in maximum and minimum
temperature with accuracy.

13
 LANGUAGES USED
HTML:
The HyperText 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 scrip ng languages such as
Javascript.
Web browsers receive HTML documents from a web server or from local storage
and render the documents into mul media web pages.HTML describes the
structure of a web page seman cally 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 forma ng of a document wri en in markup language.It
provides an addi onal feature to HTML.It is generally used with HTML to change the
style of web pages and user interfaces.
CSS is used along with HTML and JavaScript in most websites to create user
interfaces for web applica ons and user interfaces for many mobile applica ons.

JAVASCRIPT:
JavaScript is a dynamic programming language.It is lightweight and most commonly
used as a part of web pages,whose implementa ons allow client-side script to
interact with the user and make dynamic pages.It is an interpreted programming
language with object-oriented capabili es.
JavaScript was first 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.

14
 SOURCE CODE
For the purpose of this tutorial we will design the brake s editor with html and
css code to create the front end part of the web page.

FIG : OUTLINE OF THE WEB PAGE

15
 At this point we've already looked at CSS fundamentals, how to style text, and
how to style and manipulate the boxes that your content sits inside. Now it's me
to look at how to place your boxes in the right place in rela on to the viewport, and
one another. We have covered the necessary prerequisites so you can now dive
deep into CSS layout, looking at different display se ngs, tradi onal layout
methods involving float and posi oning, and new fangled layout tools like flexbox.

FIG : STYLING OF THE WEB PAGE

This module looks at styling boxes, one of the fundamental steps towards laying out
a web page. In this module we recap the box model, then look at controlling box
layouts by se ng margins, borders, and padding, custom background colors,
images and other features, and fancy features such as drop shadows and filters on
boxes.

16
 FIG : API CONNECTION THROUGH JAVASCRIPT
CONNECTION OF API
Since we use open weather API ,we need to sign up on open weather map
website ie, www.openweathermap.org/api.

FIG : OPEN WEATHER API WEBSITE

17
A er opening the website enter your sign up details to log in.

FIG: SIGN UP PAGE

A er you log in go to API keys on the tabular column and then you will find
your respec ve API key.

FIG : API KEY

18
 USED ICON IN THIS PROJECT
Since we use font awesome website ,we need to sign up on font awesome
website.

FIG : FONT AWESOME WEBSITE

A er opening the website enter your sign up details to log in.

FIG : SIGN UP PAGE

19
 FIG : FONT AWESOME KEY

USED RANDOM BACKGROUND IMAGE

FIG : UNPLASH WEBSITE

20
 RESULT
Before running the code enter your API key in the java script file in the const
key area ,this will use your unique key to access all the weather data you want
to use in your website and a er running the code you get the front end part of
the website.

FIG : WEATHER APPLICATION

Now enter any loca on you want to see the weather of, For example I want to
see the weather of Chennai so, I will enter Chennai on the search tab which will
in turn access the weather data from the open weather API and show us the
connected data.

FIG : CHENNAI
21
Similarly, lets see the weather of Pune.

FIG : PUNE
lets see the weather of Durgapur.

FIG : DURGAPUR

22
 CONCLUSION
In conclusion, our weather forecas ng project has been a valuable endeavour in
understanding and predic ng atmospheric condi ons. Through the u liza on of
advanced meteorological data, cu ng-edge technology, and rigorous analysis,
we have made significant strides in improving the accuracy of weather
predic ons. Our efforts have not only contributed to the enhancement of public
safety but have also aided various industries in making informed decisions
related to agriculture, transporta on, and disaster preparedness.
However, it is essen al to acknowledge that weather forecas ng remains a
complex and ever-evolving field. As we conclude this project, we recognize the
need for con nuous research and innova on to further refine our models and
increase forecas ng precision. Addi onally, fostering collabora on among
meteorologists, scien sts, and technology experts will be crucial in addressing
the challenges that lie ahead.
In the end, our commitment to advancing weather forecas ng technologies is
not just about predic ng the weather accurately; it is about safeguarding lives,
protec ng property, and suppor ng sustainable development in an increasingly
unpredictable climate. We look forward to future advancements in this field,
knowing that our contribu ons have paved the way for a brighter and more
weather-resilient world.

FUTURE WORK
The website we created in this project can be further developed into a mobile
applica on so that it can give mely weather updates . These updates will be
received in the form of no fica on in the user’s mobile based on the loca on
they are present in. So the users don’t even have to get into that par cular
applica on to know the weather and it saves their valuable me.

23