Weather Application

lOMoARcPSD|37422956
Weather application
COMPUTER SCIENCE ENGINEERING (Jawaharlal Nehru Technological University,

Kakinada)
Scan to open on Studocu
Studocu is not sponsored or endorsed by any college or university

Downloaded by Chitransh Tyagi (chitranshtyagi007@gmail.com)
lOMoARcPSD|37422956
WEATHER FORECASTING SYSTEM

A Mini Project Report
Submi琀琀ed in par琀椀al ful昀椀llment for the award of the degree of
BACHELOR OF TECHNOLOGY
in
ARTIFICIAL INTELLIGENCE AND DATA SCIENCE
by
J. Vasantha Laxmi 21L31A5432

A. Sowmya Sree 21L31A5407
I. Suvarna Laxmi 21L31A5430
G. Sanjay Kumar 21L31A5427
P. Charan 22L35A5407
Under the Esteemed Guidance of

Dr.T.V.Madhusudana Rao
HoD-AI&DS
DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND DATA SCIENCE

VIGNAN’S INSTITUTE OF INFORMATION TECHNOLOGY VISAKHAPATNAM
(Autonomous)
Affiliated to JNTU GV & Approved by AICTE, NewDelhi ,Re-Accredited by NAAC (CGPA of 3.41/ 4.00)
ISO 9001:2008, ISO 14001:2004, OHSAS 18001:2007 Certified Institution
VISAKHAPATNAM – 530 039
2022-2023

lOMoARcPSD|37422956
VIGNAN’S INSTITUTE OF INFORMATION TECHNOLOGY

Department of Artificial Intelligence and Data Science
CERTIFICATE
This is to certify that this project report entitled “Weather Forecasting System” is a bonafide record of
the work done by J.Vasantha Laxmi 21L31A5432, A.Sowmya Sree 21L31A5407, I.Suvarna Laxmi
21L31A5430, G. Sanjay Kumar 21L31A5427, P. Charan 22L35A5407 during the academic year
2022- 2023, in partial fulfillment of the requirements for the award of the degree of Bachelor of
Technology in Artificial Intelligence and Data Science of Jawaharlal Nehru Technological University,
Vizianagaram. The results embodied in this project report have not been submitted to any other
University or Institute for the award of any Degree or Diploma.
Project Guide Head of the Department

Dr.T.V Madhusudhana Rao Dr.T.V Madhusudhana Rao
Professor,HoD- AI&DS Professor,HoD-AI&DS
ii

lOMoARcPSD|37422956
DECLARATION
We hereby declare that the project report entitled “WEATHER FORECASTING

SYSTEM” has been written by us and has not been submitted either in part or whole for the
award of any degree, diploma or any other similar title to this or any other university.
J. Vantha Laxmi
21L31A5432
A. Sowmya Sree
21L31A5407
I. Suvarna Laxmi 21L31A5430
G. Sanjay Kumar 21L31A5427
P. Charan 22L35A5407
DATE :
PLACE :
iii

lOMoARcPSD|37422956
ACKNOWLEDGEMENT
It gives us a great sense of pleasure to acknowledge the assistance and cooperation we have
received from several persons while undertaking this B. Tech. Mini Project.
We express our gratitude to our beloved and honourable principal Dr. Sudhakar Jyothula,
for providing necessary departmental facilities in spite of his busy schedule and guiding us in
every possible way.
We take the opportunity to acknowledge the contribution of Prof. Dr. T.V.Madhusudhana

Rao, Head of the Department of artificial intelligence and data science, for his full support
and assistance during the development of the project.
We owe special debt of gratitude to Prof.Dr.T.V.Madhusudhana Rao, Head of the

Department, of Artificial Intelligence and Data Science, for his constant support and guidance
throughout the course of our work. His sincerity, thoroughness, and perseverance have been a
constant source of inspiration for us.
We would like to thank Vignan’s Institute of Information Technology, Duvvada for

providing me with the facilities and resources necessary to complete this project. Your
support has been invaluable.
We also do not like to miss the opportunity to acknowledge the contribution of all faculty
members of the department for their kind assistance and cooperation during the development
of our project. Last but not least, we acknowledge our friends for their contribution to the
completion of the project.
iv

lOMoARcPSD|37422956
ABSTRACT
Weather forecasting is the prediction of the state of the atmosphere for a

given location using the application of science and technology. It is a continuous,
data-intensive, multidimensional, dynamic and chaotic process. Collecting
quantitative data about the current state of the atmosphere, (land/water) and
using meterology to project how the atmosphere will change at a given place.
This includes temperature, rain, cloudiness, wind speed, pressure index and
humidity.
The application is crafted using HTML, CSS, and JavaScript for the frontend,
and Flask as the backend framework. Integration with a weather API enhances
the accuracy of predictions, providing users with a seamless and dynamic
experience.
The frontend, developed with HTML and CSS, o昀昀ers an intuitive and visually
appealing interface. Users can easily input the city of interest, and the responsive
design ensures a consistent experience across various devices thus enhancing
user-friendly interface. Leveraging JavaScript, the application incorporates
dynamic elements to provide real-time updates and interactive features. Users
can visualize weather data through dynamic charts, toggle between di昀昀erent
metrics, and receive instant feedback on their city-speci昀椀c weather queries.
Flask, a lightweight Python web framework, is utilized as the backend to
manage server-side functionalities. It handles user requests, processes input
data, and communicates with the weather API to retrieve accurate and up-to-
date meteorological information. Through the integration of the weather API, the
application delivers city-speci昀椀c weather predictions, providing users with
tailored meteorological insights. This functionality enhances the practicality of
the application for individuals seeking localized weather information.

lOMoARcPSD|37422956
CONTENTS Page No.
Chapter 1 1-4
INTRODUCTION
1.1 Problem
Statement
1.2 Why to use?
1.3 Objective
Chapter 2 REQUIREMENT ANALYSIS 5-8
2.1 Analysis Study

2.2 User Requirements
2.3 Final Requirements
9-15
Chapter 3 SYSTEM DESIGN
3.1 Hardware Requirements
3.2 Software Requirements
3.3 System Requirements
3.4 Design Requirements
3.5 DFDs
Chapter 4 IMPLEMENTATION & CODING 16-31
4.1 Modules
4.2 Module description
4.3 Introduction of technologies used
4.4 Coding
Chapter 5 OUTPUT SCREENSHOTS 32-37

Chapter 6 CONCLUSION & FUTURE SCOPE
38-41
Chapter 7 REFERENCES 42-43
vi

lOMoARcPSD|37422956
NOMENCLATURE
• UI – User Interface
• API – Application Programming Interface
• SRS – Software Requirement Speci昀椀cation
• CORE – programming language or framework used in weather forecasting

applications
• ARIMA– Autoregressive Integrated Moving Average
• DFD – Data Flow Diagram
• UML – Uni昀椀ed modelling language
• HTML – Hypertext Markup Language
• CSS – Cascading Style Sheets
• JS – Java Script
• FLASK – Python web framework that provides useful tools and features.
• HTTP – Hypertext Transfer Protocol
• Bootstrap – Popular CSS Framework for developing responsive and mobile-昀椀rst

websites
• OS – Operating Systems
vii

lOMoARcPSD|37422956
CHAPTER I
INTRODUCTION

lOMoARcPSD|37422956
INTRODUCTION
In an era where information accessibility and user experience are

paramount, the development of web-based applications has become an integral
part of delivering real-time and personalized services. This project addresses the
need for a comprehensive weather forecasting application that not only predicts
temperature, humidity, and pressure but also does so with a user-friendly
interface. The application is designed using a powerful combination of HTML,
CSS, JavaScript, Flask, and a weather API, ensuring accuracy, interactivity, and
responsiveness.
Weather applications have become essential tools for individuals,
businesses, and various industries, aiding in decision-making and planning based
on meteorological conditions. This project aims to elevate the user experience by
incorporating modern web technologies, enabling users to obtain precise and up-
to-date weather predictions for a speci昀椀c city.
The frontend, developed with HTML and CSS, focuses on providing an
intuitive and visually appealing interface. Through dynamic interactivity powered
by JavaScript, users can engage with the application in real-time, exploring
di昀昀erent metrics and visualizing weather data dynamically. The backend,
implemented with Flask, acts as the engine that processes user requests and
communicates with a weather API to retrieve accurate and relevant
meteorological information.
The integration with a weather API is crucial for ensuring the accuracy of
predictions. This project addresses the growing demand for a user-friendly and
technologically advanced weather forecasting application. By combining the
strengths of HTML, CSS, JavaScript, Flask, and a weather API, it endeavors to
deliver an intuitive, responsive, and accurate tool that empowers users with city-
speci昀椀c meteorological insights for informed decision-making and planning.

lOMoARcPSD|37422956
1.1 PROBLEM STATEMENT
 Users can get too busy at work or at home to check current weather condition
for server weather.
 Many of the Free weather Software programs have to many pop-ups or unwanted
software tied to them like weather bug.
 The current landscape of weather forecasting applications often lacks a seamless

integration of cutting-edge web technologies, hindering the user experience and
limiting the accuracy of predictions.
1.2 WHY TO USE WEATHER APPLICATION
Weather applications serve several practical purposes, making them valuable

tools for individuals, businesses, and various industries. Here are some
compelling reasons why people use weather applications:
1)Planning and preparedness : Weather applications provide current and

forecasted meteorological information, allowing users to plan their activities
accordingly. Whether it's scheduling outdoor events, travel arrangements, or
daily routines, knowing the weather conditions in advance helps users make
informed decisions and be better prepared.
2)Agriculture and Farming : Farmers and agricultural professionals use weather
applications to monitor conditions relevant to their crops. This includes
temperature, precipitation, and humidity forecasts, allowing for strategic
decision-making in planting, harvesting, and irrigation.
3)Health considerations : Individuals with health concerns, such as respiratory
conditions or heat sensitivity, use weather applications to stay informed about
air quality, temperature extremes, and other factors that may a昀昀ect their well-
3

lOMoARcPSD|37422956
being. This information helps them take precautions to manage their health
e昀昀ectively.
1.3 OBJECTIVE OF THE PROJECT
The objective of the proposed weather application, designed using HTML,

CSS, JavaScript, Flask, and a weather API, is to address the existing limitations of
weather applications and provide users with a seamless, accurate, and city-
speci昀椀c meteorological experience. This project will serve the following
objectives:-
1. Provides the user with an easy and friendly interface
2. Provides the user with the temperature of a particular region
3. It will also show humidity, wind speed and cloud.
ADVANTAGES
1. Real-Time Data
One of the biggest advantages
of weather monitoring
systems and also the reason
why people have

lOMoARcPSD|37422956
been going in for weather

stations is because of the
ability to get their information
in real-time.
2. Accurate Local Forecast
In reality, the meteorological
department may be located
far from your home and
weather forecasts are
made for regions, not a
speci昀椀c area. That’s a reason
why in these instances, the
weather predictions that
they give are not always the
most accurate.
5

lOMoARcPSD|37422956
3. Ease Of Use
Ease to use is de昀椀nitely a
big advantage of the
weather monitoring system.
Weather stations like all
other weather devices are
designed to be e昀케cient and
straightforward, therefore,
everyone can use them.
It is so convenient and
comfortable for users to get
the most accurate information
in the simplest way
possible.
1. Real-Time Data
6

lOMoARcPSD|37422956
One of the biggest advantages

of weather monitoring
systems and also the reason
why people have
been going in for weather
stations is because of the
ability to get their information
in real-time.
2. Accurate Local Forecast
In reality, the meteorological
department may be located
far from your home and
weather forecasts are
made for regions, not a
speci昀椀c area. That’s a reason
7

lOMoARcPSD|37422956
why in these instances, the

weather predictions that
they give are not always the
most accurate.
3. Ease Of Use
Ease to use is de昀椀nitely a
big advantage of the
weather monitoring system.
Weather stations like all
other weather devices are
designed to be e昀케cient and
straightforward, therefore,
everyone can use them.
It is so convenient and
comfortable for users to get
8

lOMoARcPSD|37422956
the most accurate information

in the simplest way
possible.
1. Real-Time Data : One of the biggest advantages of weather monitoring
systems and also the reason why people have been going in for weather
stations is because of the ability to get their information in real-time.
2. Accurate Local Forecast : In reality, the meteorological department may be
located far from your home and weather forecasts are made for regions, not a
speci昀椀c area. That’s a reason why in these instances, the weather predictions
that they give are not always the most accurate.
3. Ease Of Use : Ease to use is de昀椀nitely a big advantage of the weather
monitoring system. Weather stations like all other weather devices are
designed to be e昀케cient and straightforward, therefore, everyone can use
them. It is so convenient and comfortable for users to get the most accurate
information in the simplest way possible.

lOMoARcPSD|37422956
CHAPTER II
REQIREMENT ANALYSIS
10

lOMoARcPSD|37422956
Functional Requirements
Functional requirements are the requirements that describe the functionalities of

the system elements. It may involve functional user requirements or functional
system requirements.
For example:
 The operator shall be able to input the region to the system to view the
desired weather parameters.
 The system shall provide the following weather parameters: temperature,
pressure, wind speed, date /time and humidity.
2.1 ANALYSIS STUDY
2.1.1 Lower Installation Charges: We neither require any high-con昀椀guration

systems for the smooth running of the server program nor do we require any
high-con昀椀guration systems for the smooth running of a client program. This
application is designed with ease to support any ordinary system having an
internet connection.
2.1.2 Secured and Reliable: The reliability of the system is to make sure the
website does not go o昀툀ine
2.1.3 Availability: The availability of the system is that the website will be
active on the Internet and people will be able to browse it.
 Feasibility Study
All projects are feasible if they have unlimited resources and in昀椀nite
time. But the development of software is plagued by the scarcity of resources
and di昀케cult delivery rates. It is necessary and prudent to evaluate the
feasibility of a project at the earliest possible time. The three considerations are
involved in the feasibility analysis.
11

lOMoARcPSD|37422956
 Technical Feasibility
Technical feasibility centres on the existing mobile system (hardware,
software…etc) and to what extent it can support the proposed addition if the
budget is a serious constraint, then the project is judged not feasible. The
technical feasibilities are an important role in our project because here we’re
using HTML,CSS and JavaScript . It requires Visual Studio Code(software) to
develop this application. A easily available software and easy to use.
 Economical Feasibility
This procedure is to determine the bene昀椀ts and savings that are expected from a
candidate system and compare them with cost. If the bene昀椀ts outweigh the
cost then the decision is made to design and implement the system.
Otherwise, further justi昀椀cation or alterations in proposed systems have to
be made if it is having a chance of being approved. This is an ongoing e昀昀ort that
improves any feasibility costs spent on this project because here we’re using
open-source environments.
 Operational Feasibility
People are inherently resistant to change and mobiles have been known to
facilitate change. There is no need of technical background is required to work
on the application. All the information needed can be seen with just one click.
2.2 USER REQUIREMENTS

The system speci昀椀cations that a user may want are as follows:
1. It should be easy to understand.
2. Must be interactive.
3. Should provide a good user interface.
4. Security should be maintained.
12

lOMoARcPSD|37422956
2.3 FINAL REQUIREMENTS
 User Oriented: A system should be more user friendly not from the
technical point of view
 Better GUI: All the elements used in the system should be interactive in
nature so that its look and feel are not so boring that the user could get
bored while using it.
 Reliability: The system should be reliable and fast in processing.
 Data security: Access to the organizational data is not to be granted to
any unknown person who is not a part of the transaction.
 Con昀椀dentiality: Whatever the user is providing to the organization,
the user has the full rights to modify it and it could be not be
accessed/modi昀椀ed without the user's permission.
 Better Management of information: All the information should be
managed so that is the 昀氀ow of the information is to be in the right track.
 Presentation: The content that is to be presented to the user is to be
presented in such a way that is self-explanatory to the user and he/she is
satis昀椀ed with the data.
13

lOMoARcPSD|37422956
CHAPTER III
SYSTEM DESIGN
14

lOMoARcPSD|37422956
DESIGN OF THE SYSTEM
3.1 SOFTWARE REQUIREMENTS
Platform Platform Independent
The Operating System Windows 7 & above
Framework Flask
Front-End Tool Google Chrome
API OpenWeatherMap
3.2 HARDWARE REQUIREMENTS
Processor Intel Pentium IV 2.9 GHz Other
RAM Minimum 4 GB
Graphics Integrated graphics card
Hard Disk Minimum 500 GB
3.3 SYSTEM REQUIREMENTS

15

lOMoARcPSD|37422956
To know the detailed system requirements an SRS has to be prepared.

Software requirement speci昀椀cation abbreviated as SRS is a means of translating
the idea of 昀椀les into a formal document. The main features of SRS include:
 Establishing the basis for an agreement between the client and the
developer.
 Producing a reference for validation of the 昀椀nal product. SRS assist clients
in determining if the software meets their requirements.
Mainly there are six requirements which an SRS must satisfy.
1) It should specify the external behavior.
2) It should specify the constraints.
3) It should be easy to change.
4) It should be a reference tool.
5) It should record throughout the lifecycle.
6) It should have the capacity to expect an undesired event.
Func*onal Requirements
Func)onal requirements are the requirements that describe the func)onali)es of
the
system elements. It may involve func)onal user requirements or func)onal
system
requirements.
For example:
The operator shall be able to input the region to the system to view the desired
weather parameters.
The system shall provide the following weather parameters: temperature,
pressure, wind speed &
direc)on, rainfall, and humidity.
Functional Requirements:
Functional requirements are the requirements that describe the
functionalities of the system elements. It may involve functional user
requirements or functional system requirements. For example: The
operator shall be able to input the region to the system to view the desired
weather parameters. The system shall provide the following weather
parameters: temperature, pressure, wind speed & direction, rainfall, and
16

lOMoARcPSD|37422956
humidity.
3.4 DESIGN REQUIREMENTS
The main objectives of input design are:

1) Controlling the amount of input.
2) Keeping the process simple.
3) The best thing in the input design is to achieve all the objectives
mentioned in the simplest manner possible.
The main objectives of output design are:
1) Identifying the speci昀椀c outputs.
The primary goal of the system analysis is to improve the e昀케ciency
of the existing system. For that the study of speci昀椀cation of the
requirements is very essential. For the development of the new system, a
preliminary survey of the existing system will be conducted. Investigation
done whether the upgradation of the system into an application program
could solve the problems and eradicate the ine昀케ciency of the existing
system
3.5 DFDs
A data 昀氀ow diagram (DFD) is a graphical representation of the "昀氀ow" of

data through an information system, modelling its process aspects. Often they
are a preliminary step used to create an overview of the system which can
17

lOMoARcPSD|37422956
later be elaborated. DFDs can also be used for the visualization of data
processing (structured design).
 DATA FLOW DIAGRAM SYMBOLS :
Fig – 3.5.1
A DFD shows what kinds of information will be input into and output from the
18

lOMoARcPSD|37422956
system, where the data will come from and go to, and where the data will be
stored. It does not show information about the timing of processes, or
information about whether processes will operate in sequence or in
parallel (which is shown on a 昀氀owchart.
 FLOW DIAGRAM:
Fig – 3.5.2 Flow Chart
 USE CASE DIAGRAM
19

lOMoARcPSD|37422956
A use case diagram shows a set of use cases and actors and their
relationships. Use case is represented as an eclipse within a name inside it.
Use cases are used to capture high level functionalities of a system. Each
use case should provide some observable and valuable result to the actors
or other stakeholders of the system. Use case diagrams have a
specialization of class diagrams and class diagrams are structured
diagrams.
Use case diagrams are in fact two fold they are both behavior
diagrams because they describe behavior of the system.
20

lOMoARcPSD|37422956
Fig – 3.5.3 Use Case Diagram
CHAPTER IV
IMPLEMENTATION
&
CODING
21

lOMoARcPSD|37422956
IMPLEMENTATION
During the implementation phase, the development team will translate the
design speci昀椀cations into actual code. They will follow software development
best practices, such as writing clean and modular code, conducting unit tests,
and ensuring proper documentation. The modules and implementation process
play a crucial role in bringing the system design to life and creating a functional
and reliable scheduling platform for doctors and patients.
5.1MODULES
We have used di昀昀erent various models in this weather application project. The
few main modules are as listed below and the usage of the modules is as given
below
1. 昀氀ask
2. 昀氀ask_sqlalchemy
3. requests
22

lOMoARcPSD|37422956
Fig - 5.1 Modules
5.2MODULES DESCRIPTION
1. FLASK :
Flask is a lightweight and extensible web framework for Python. It is designed

to be easy to use and 昀氀exible, making it a popular choice for building web
applications and APIs. Flask follows the WSGI (Web Server Gateway Interface)
standard, allowing it to work with various web servers.
Here are some key features and components of the Flask framework:
Routing: Flask allows you to de昀椀ne routes, which map URLs to Python
functions. This makes it easy to create di昀昀erent endpoints for handling various
HTTP methods (GET, POST, etc.).
Templates: Flask supports template engines, such as Jinja2, which enable you
to separate your Python code from HTML. This helps maintain clean and
readable code for both server-side and client-side components.
Extensions: Flask has a modular architecture that supports extensions for
adding additional functionality. There are numerous extensions available for
tasks such as authentication, database integration, and more.
Integrated Development Server: Flask comes with a built-in development
server that simpli昀椀es the process of testing and debugging your application
during development.
2. FLASK_SQLALCHEMY
Flask_sqlalchemy is an extension for Flask that simpli昀椀es the integration of

SQLAlchemy, a powerful and popular Object-Relational Mapping (ORM) library
for Python, into Flask applications. SQLAlchemy provides a set of high-level API
23

lOMoARcPSD|37422956
for interacting with relational databases, and Flask-SQLAlchemy makes it

easier to use within a Flask application by providing additional features and
simplifying common tasks.
This module simpli昀椀es many common database-related tasks in Flask

applications and provides a convenient way to work with databases using
SQLAlchemy. It's a powerful tool for developers building Flask applications that
require database interactions.
3. REQUESTS
The requests module in Python is a popular third-party library that

simpli昀椀es the process of making HTTP requests. It abstracts the complexities of
making HTTP requests and provides a simple and elegant API for interacting
with web services and APIs. The library is widely used for tasks such as
sending GET and POST requests, handling response data, managing cookies,
and more.
This module is a versatile and powerful tool for working with HTTP in
Python, providing a clean and straightforward interface for making web
requests. It is widely used in web development, data retrieval, and integration
with various web services.
5.3INTRODUCTION OF TECHNOLOGIES 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 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
24

lOMoARcPSD|37422956
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 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 昀椀rst 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, jQuery, and Fetch API provide convenient methods and
utilities for making API requests, handling responses, and managing API
authentication.
Overall, JavaScript's versatility and capabilities make it indispensable for
linking an API to a web application. It enables data retrieval, manipulation, user
interaction, and seamless integration of dynamic content, empowering
25

lOMoARcPSD|37422956
developers to create robust and interactive web applications that leverage the
power of external APIs.
5.4CODING
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 name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>What's the weather like?</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.css" />
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/
all.min.css">
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css" />
<link rel="stylesheet" href="../static/styles.css">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.
min.js"></script>
</head>
<body>
<section class="hero is-bold" >
<div class="hero-body" id="titlebar">
<div class="container" style="display:flex;">
<h1 class="title" style="color:white;width:41%;padding-
top:15px;">
<b>WHAT'S THE WEATHER LIKE...?</b>
26

lOMoARcPSD|37422956
</h1>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-offset-4 is-4">
<form method="POST">
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" name="city"
type="text" placeholder="City Name" style="text-transform: capitalize;">
</div>
<div class="control">
<button class="button is-info"
id="add_city">
Add City
</button>
</div>
</div>
{% with messages =
get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{% set message_class = 'add_del' %}
{% if category == 'error' %}
{% set message_class = 'add_del' %}
{% endif %}
<div class="notification
{{ message_class }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
</form>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="columns is-multiline" >
{% for weather in weather_data %}
<div class="column is-one-third">

27

lOMoARcPSD|37422956
<div class="wrapper">
<article class="media" style="padding:20px;">
<div class="media-left">
<figure class="image is-50x50">
<img
src="http://openweathermap.org/img/w/{{ weather.icon }}.png" alt="Image">
</figure>
</div>
<div class="media-content" id="city_name">
<div class="content">
<p>
<span class="title"
style="color:white;"><b>{{ weather.city }}</b></span>
<br>
<span class="subtitle"
style="color:white;">{{ weather.temperature }}° C</span>
<br>
style="color:white;"><b>Humidity - </b>{{ weather.humidity }}</span>
<br>
style="color:white;"><b>Pressure - </b>{{ weather.pressure }} hPa</span>
<br>
style="color:white;"><b>Wind Speed - </b>{{ weather.wind }} km/h</span>
<br> <p
style="color:white;">{{ weather.description }}</p>
</p>
</div>
</div>
<div class="media-right">
<a href=" {{ url_for('delete_city',
name=(weather.city)) }}">
<button class="delete"></button>
</a>
</div>
</article>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
</body>
28

lOMoARcPSD|37422956
</html>
CSS CODE:
body{
background: linear-gradient(177.9deg, rgb(52, 52, 54) 3.6%, rgb(121,
120, 120) 105.8%);
}
*{
font-family: 'Lobster', cursive;
}
.hero
{
background: linear-gradient(590px at 8.2% 13.8%, rgb(18, 35, 60) 0%,
rgb(187, 187, 187) 90%);
}
.wrapper {
background: radial-gradient(590px at 8.2% 13.8%, rgb(52, 52, 54) 0%,
rgb(121, 120, 120) 90%);
border-radius: 10px;
box-shadow:1px 3px 10px 3px #c4c3c3;
margin: 100px auto;
margin-bottom:0px;
max-width: 720px;
padding: 0px;
color: white;
}
.add_del{
background-color: rgb(52, 52, 54);
box-shadow: 1px 3px 10px 3px #c4c3c3;
border-radius: 10px;
text-align:center;
margin: 20px auto;
max-width: 720px;
padding: 15px;
font-size: larger;
29

lOMoARcPSD|37422956
font-weight:800;
color: white;
}
#titlebar{
border-radius:50px;
box-shadow: 1px 3px 10px 3px #c4c3c3;
}
#add_city{
background-color: black;
color:white;
}
#add_city:hover{
background-color: rgb(48, 47, 47);
FLASK CODE:
import requests
import string
from flask import Flask, render_template, request, redirect, url_for, flash
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['DEBUG'] = True
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///weather.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['SECRET_KEY'] = 'any-secret-key-you-choose'
db = SQLAlchemy(app)
class City(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(50), nullable=False)
def __init__(self, name):

self.name = name
30

lOMoARcPSD|37422956
def get_weather_data(city):
url = f"http://api.openweathermap.org/data/2.5/weather?
q={city}&units=metric&appid=b21a2633ddaac750a77524f91fe104e7"
r = requests.get(url).json()
return r
@app.route('/')
def index_get():
cities = City.query.all()
weather_data = []
for city in cities:

r = get_weather_data(city.name)
print(r)
weather = {
'city': city.name,
'temperature': r['main']['temp'],
'description': r['weather'][0]['description'],
'icon': r['weather'][0]['icon'],
'humidity': r['main']['humidity'],
'pressure': r['main']['pressure'],
'wind': r['wind']['speed'],
}
weather_data.append(weather)
print(weather_data)
return render_template('weather.html', weather_data=weather_data)
@app.route('/', methods=['POST'])
def index_post():
err_msg = ''
new_city = request.form.get('city')
new_city = new_city.lower()
new_city = string.capwords(new_city)
if new_city:
existing_city = City.query.filter_by(name=new_city).first()
if not existing_city:
new_city_data = get_weather_data(new_city)
if new_city_data['cod'] == 200:
31

lOMoARcPSD|37422956
new_city_obj = City(name=new_city)
db.session.add(new_city_obj)
db.session.commit()
else:
err_msg = 'That is not a valid city!'
else:
err_msg = 'City already exists in the database!'
if err_msg:
flash(err_msg, 'error')
else:
flash('City added successfully!', 'success')
return redirect(url_for('index_get'))
@app.route('/delete/<name>')
def delete_city(name):
city = City.query.filter_by(name=name).first()
db.session.delete(city)
db.session.commit()
flash(f'Successfully deleted {city.name}!', 'success')

return redirect(url_for('index_get'))
if __name__ == '__main__':
app.run(debug=True)
32

lOMoARcPSD|37422956
RUNNING THE ABOVE APPLICATION USING TERMINAL:

Running a Flask application in the VS Code terminal involves a series of steps.
Here's a step-by-step procedure:
1. Open vs code
Open Visual Studio Code and ensure that you have your Flask project opened in
the workspace.
2. Set Up a Virtual Environment
While not strictly necessary, it's often a good practice to create a virtual
environment for your Flask project. This helps manage dependencies and keeps
your project isolated.
In the terminal, navigate to your project directory and create a virtual

environment:
Activate the virtual environment:
33

lOMoARcPSD|37422956
3. Install Flask
With the virtual environment activated, install Flask using pip:
4. Set Flask App and Environment Variables
In the VS Code terminal, set the FLASK_APP variable to the name of your Flask
application 昀椀le (assuming it's app.py for this example):
34

lOMoARcPSD|37422956
Optionally, set the environment to development for automatic reloading:
On Windows:
5. Run the Flask Application
Now, you can run your Flask application using the 昀氀ask run command:
35

lOMoARcPSD|37422956
This command starts the development server. You should see output in the
terminal indicating that the server is running.
6. Access the Application
Open your web browser and navigate to http://127.0.0.1:5000/ (or the address
provided in the terminal). You should see your Flask application running.
The below is the Screenshot of running the 昀氀ask application using Visual Code
Terminal :
Sample Format of the Dataset in the Weather API :
36

lOMoARcPSD|37422956
City - Kakinada
{ 'city': 'Kakinada',
'temperature': 26.26,
'description': 'broken clouds',
'icon': '04n',
'humidity': 81,
'pressure': 1012,
'wind': 2.02 }
City - Visakhapatnam
{ 'city': 'Visakhapatnam',
'temperature': 24.94,
'description': 'mist',
'icon': '50n',
'humidity': 83,
'pressure': 1012,
'wind': 1.03 }
37

lOMoARcPSD|37422956
CHAPTER V
OUTPUT SCREENSHOTS
38

lOMoARcPSD|37422956
SCREENSHOTS OF OUTPUT
 Before adding any city:
 After adding Kakinada city:
39

lOMoARcPSD|37422956
Prompt describing the action
40

lOMoARcPSD|37422956
 After adding Visakhapatnam city:
41

lOMoARcPSD|37422956
 After adding Hyderabad city:
42

lOMoARcPSD|37422956
 After deleting Visakhapatnam city:
Prompt describing the action
43

lOMoARcPSD|37422956
CHAPTER VI
CONCLUSION AND
FUTURE SCOPE
44

lOMoARcPSD|37422956
CONCLUSION
In conclusion, the development of our web application, designed using

HTML, CSS, Flask, and integrated with an API to display real-time weather
information, marks a successful endeavor. Throughout this project, we achieved
several key objectives:
User-Centric Design: The user interface, crafted with HTML and CSS, ensures an
intuitive and visually appealing experience for users. The design principles
prioritize simplicity and clarity, allowing users to e昀昀ortlessly access and
comprehend weather data.
Dynamic Data Retrieval: Leveraging Flask as our web framework and integrating
it with a weather API, our application dynamically fetches and displays
temperature, humidity, and pressure data for a given city. This real-time data
enhances the application's relevance and usefulness.
Responsive and Accessible: The web application is designed to be responsive,

ensuring a seamless experience across various devices and screen sizes.
Additionally, e昀昀orts were made to adhere to accessibility standards, making the
application inclusive and usable for a diverse user base.
Server-Side Processing: Flask serves as an e昀케cient backend, handling requests,

processing data, and orchestrating the communication with the weather API. This
architecture ensures a scalable and maintainable solution.
45

lOMoARcPSD|37422956
FUTURE SCOPE
The web application designed to display temperature, humidity, and
pressure for a given city using HTML, CSS, Flask, and an API provides a solid
foundation. Looking forward, there are several potential avenues for future
development and improvement:
Extended Weather Data: Expand the application to provide a more

comprehensive set of weather data, such as wind speed, precipitation, and
forecast information. Enhancing the breadth of information would make the
application more versatile and useful for users.
User Authentication and Personalization: Implement user authentication

mechanisms to allow users to create accounts and personalize their experience.
Users could save favorite cities, set preferences, or receive customized weather
alerts based on their selected locations.
Historical Data Analysis: Integrate historical weather data to enable users to

analyze trends and patterns over time. This could involve creating visualizations,
charts, or graphs that showcase historical weather 昀氀uctuations for a given city.
Geographical Expansion: Extend the application's capabilities to cover a broader

range of cities or even global locations. This expansion could involve
incorporating additional APIs or leveraging geographic databases to enhance the
application's coverage.
Mobile Application Development: Consider developing a mobile version of the

application to reach a wider audience. Mobile apps can o昀昀er additional features,
such as push noti昀椀cations, geolocation services, and o昀툀ine access to weather
data.
46

lOMoARcPSD|37422956
Multi-Language Support: Implement multi-language support to cater to users

from diverse linguistic backgrounds. This could involve providing language
options for both the user interface and the displayed weather information.
Real-Time Updates and Noti昀椀cations: Enable real-time updates for users,

ensuring that the displayed weather information is continuously refreshed.
Additionally, implement push noti昀椀cations or alerts for signi昀椀cant weather events
or changes in the user's speci昀椀ed locations.
Integration with Social Media: Allow users to share weather updates or

interesting 昀椀ndings on social media platforms. Integrating with social media APIs
could enhance user engagement and promote the application.
Weather Map Integration: Integrate interactive weather maps to provide users

with a visual representation of weather conditions. Maps can enhance the user
experience by o昀昀ering a spatial understanding of weather patterns.
Enhanced User Feedback Mechanism: Implement a user feedback system to

gather insights, suggestions, and bug reports. This feedback loop can be
valuable for continuous improvement and ensuring that the application aligns
with user expectations.
Incorporating these future enhancements can transform the existing weather

application into a more sophisticated and feature-rich tool, o昀昀ering an enhanced
user experience and catering to a broader audience.
47

lOMoARcPSD|37422956
CHAPTER VII
REFERENCES
48

lOMoARcPSD|37422956
REFERENCES
[1] Abrams, R.H,1990 Water allocation by comprehensive permit systems

in the East: Considering a move away from orthodoxy. Virginia
Environmental Law Journal 9(2):255- 285.
[2] Acheson, J.M, 1988 The Lobster Gangs of Maine. Hanover, N.H.: The
New
England University Press.
[3] Adams, R., C. Rosenzweig, J. Pearl, B. McCarl, J. Glyer, R. Curry, J.

Jones, K. Boote, and L.Allen1990 Global climate change and U. S.
agriculture. Nature 345:219-224.
[4] Adams, R., K. Bryant, B. McCarl, D. Legler, J. O'Brien, A. Solow, and R.

Weiher1995 Value of improved long-range weather information.
Contemporary Economic Policy 13:10- 19.
[5] Aggleton, P., K. O'Reilly, G. Slutkin, and P. Davies1994 Risking

everything? Risk behavior, behavior change, and AIDS. Science
265:341-345.
[6] Alloy, L.B., and N. Tabachnik1984 Assessment of covariation by

humans and animals: The joint in昀氀uence of prior expectations and
current situational information. Psychological Review 91:112149.
[7] Antle, J.1996 Methodological issues in assessing the potential impacts

of climate change on agriculture. Agricultural and Forest Meteorology
80:67-85.
[8] Antunez de Mayolo R., S.E.1981 La prediccion del clima en el Peru

pre-Colombiano. Interciencia 6(4):206-209.
[9] Argyris, C.1991 Teaching smart people how to learn. Harvard Business Review
3:99-
113.National Academies of Sciences, Engineering, and Medicine. 1999.
49

lOMoARcPSD|37422956
Making Climate Forecasts Matter. Washington, DC: The National Academies

Press. https://doi.org/10.17226/6370.
50

Weather Application

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Weather Application

Uploaded by

Copyright:

Available Formats

lOMoARcPSD|37422956

COMPUTER SCIENCE ENGINEERING (Jawaharlal Nehru Technological University,

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

WEATHER FORECASTING SYSTEM

Submi琀琀ed in par琀椀al ful昀椀llment for the award of the degree of

ARTIFICIAL INTELLIGENCE AND DATA SCIENCE

J. Vasantha Laxmi 21L31A5432

Under the Esteemed Guidance of

DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND DATA SCIENCE

Downloaded by Chitransh Tyagi (chitranshtyagi007@gmail.com)

VIGNAN’S INSTITUTE OF INFORMATION TECHNOLOGY

Project Guide Head of the Department

Downloaded by Chitransh Tyagi (chitranshtyagi007@gmail.com)

We hereby declare that the project report entitled “WEATHER FORECASTING

Downloaded by Chitransh Tyagi (chitranshtyagi007@gmail.com)

We take the opportunity to acknowledge the contribution of Prof. Dr. T.V.Madhusudhana

We owe special debt of gratitude to Prof.Dr.T.V.Madhusudhana Rao, Head of the

We would like to thank Vignan’s Institute of Information Technology, Duvvada for

Downloaded by Chitransh Tyagi (chitranshtyagi007@gmail.com)

Weather forecasting is the prediction of the state of the atmosphere for a

Downloaded by Chitransh Tyagi (chitranshtyagi007@gmail.com)

CONTENTS Page No.

2.1 Analysis Study

Chapter 4 IMPLEMENTATION & CODING 16-31

Chapter 5 OUTPUT SCREENSHOTS 32-37

Downloaded by Chitransh Tyagi (chitranshtyagi007@gmail.com)

• API – Application Programming Interface

• SRS – Software Requirement Speci昀椀cation

• CORE – programming language or framework used in weather forecasting

• ARIMA– Autoregressive Integrated Moving Average

• DFD – Data Flow Diagram

• UML – Uni昀椀ed modelling language

• HTML – Hypertext Markup Language

• CSS – Cascading Style Sheets

• HTTP – Hypertext Transfer Protocol

• Bootstrap – Popular CSS Framework for developing responsive and mobile-昀椀rst

Downloaded by Chitransh Tyagi (chitranshtyagi007@gmail.com)

Downloaded by Chitransh Tyagi (chitranshtyagi007@gmail.com)

In an era where information accessibility and user experience are

Downloaded by Chitransh Tyagi (chitranshtyagi007@gmail.com)

1.1 PROBLEM STATEMENT

 The current landscape of weather forecasting applications often lacks a seamless

1.2 WHY TO USE WEATHER APPLICATION