A PROJECT REPORT

on

weather app

Submitted by

Name of the Candidate(s) Reg. No.

Md Siddik 210101150010
Shamshad Alam 210101150001
Mahboob Mansori 210101120044
Nafis Akhatar 210101150005

In partial fulfilment for the award of the

Degree of
BACHELOR OF TECHNOLOGY
in
EEE & CSE

DEPARTMENT OF EE ENGINEERING

SCHOOL OF ENGINEERING AND TECHNOLOGY

PARALEKH MUNDI CAMPUS, ODISHA
APRIL 2024

CENTURION UNIVERSITY OF TECHNOLOGY AND MANAGEMENT

PARALAKHEMUNDI, ODISHA
 BONAFIDE CERTIFICATE
Certified that this project report “weather app” is the Bonafede work of “ Md Siddik
(210101150010), Shamshad Alam (210101150001), Mahboob Mansori (210101120044),
Nafis Akthar (210101150005),” who carried out the project work under my supervision.
This is to further certify to the best of my knowledge, that this project has not been carried
out earlier in this institute and the university.

Certified that the above-mentioned project has been duly carried out as per the norms of the
college and statutes of the university.

Signature
Prof. .Debendra Maharana
 DECLARATION

We hereby declare that the project entitled “weather app” submitted for theof 6th semester
B. Tech in EE Engineering is my original work and the project has not formed the basis for the
award of Bachelor of Technology from Centurion University of Technology & Management,
Paralakhemundi, Odisha.

Name of the Students Reg. No. Signature of the Students

Md Siddik 210101150010
Shamshad Alam 210101150001
Mahboob Mansori 210101120044
Nafis Akhatar 210101150005

Place: Paralakhemundi
Date:
 ACKNOWLEDGEMENTS

We wish to express our profound and sincere gratitude to Prof. Debendra Maharana Sir (HOD)
of CSE Branch, Paralakhemundi Campus, who guided us into the intricacies of this project
nonchalantly with matchless magnanimity.

We thank Prof Dr. Prafulla Kumar Panda Sir Dean of SoET, Parakhemundi Campus and
weather app & Natural Healings School of Engineering and Technology, Jatani
Bhubaneswar Campus for extending their support during Course of this investigation.

We would be failing in my duty if we do not acknowledge the cooperation rendered during

various stages of image interpretation by Prof . Debendra Maharana Sir.

We are highly grateful to Prof Debendra Maharana Sir who evinced keen interest and
invaluable support in the progress and successful completion of my project work.

We are indebted to weather app for their constant encouragement, co-operation and help.
Words of gratitude are not enough to describe the accommodation and fortitude which they
have shown throughout my endeavor.

Name of the Students Reg. No. Signature of the Students

Md Siddik 210101150010
Shamshad Alam 210101150001
Mahboob Mansori 210101120044
Nafis Akathar 210101150005
Place: Paralakhemundi
Date:
 TABLE OF CONTENTS
CONTENT PAGE NO.

DECLARATION…………………………………………………………

ACKNOWLEDGEMENT…………………………………………….....

TABLE OF CONTENT………………………………………………….

LIST OF ABBREVATIONS…………………………………………….

LIST OF FIGURES……………………………………………………...
ABSTRACT……………………………………………………………...

CHAPTER 1: INTRODUCTION ……………………………………..

1.1 INTRODUCTION……………………………………………

1.2 PROBLEM STATEMENT…………………………………...

1.3 OBJECTIVES………………………………………………...

1.4 METHODOLOGY…………………………………………...

CHAPTER 2: LITERATURE SURVEY……………………………...

CHAPTER 3: SYSTEM DEVELOPMENT…………………………..
3.1 ANALYSIS……………………………………………

3.2 DESIGN OF THE APPLICATION……………………...

3.2.1 ACTIVITY DIAGRAM

3.2.2 CLASS DIAGRAM

3.2.3 USE CASE DIAGRAM

3.2.4 SEQUENCE DIAGRAM

3.3 PROPOSED ARCHITECTURE…………………………………...

3.4 THE FORECASTING PROCESS.....……………………………...

3.4.1 OBSERVATION AND ANALYSIS................................

3.4.2 EXTRAPOLATION.........................................................

3.4.3 PREDICTION...................................................................

3.5 ALGORITHM USED...................................................................

CHAPTER 4: PERFORMANCE ANALYSIS………………………..

4.1 ANALYSIS OF SYSTEM DEVELOPED.................................

4.1.1 COMMON...................................................................

4.1.2 HELPER.......................................................................
 4.1.3 MODEL........................................................................

4.1.4 MAIN ACTIVITY........................................................

4.2 RESULTS AT VARIOUS STAGES..........................................

4.2.1 STEPS TAKEN BY OPEN SOURCE WEBSITE........

4.2.2 STEPS TAKEN IN DEVELOPMENT........................

4.3 OUTPUT AT VARIOUS STAGES............................................

4.4COMPARISON............................................................................

CHAPTER 5: CONCLUSIONS………………………………………..
5.1 CONCLUSIONS……………………………………………..

5.2 FUTURE SCOPE…………………………………………….

5.3 Code in Weather

References………………………………………………………………
Appendices……………………………………………………………...
 LIST OF ABBREVATIONS
GPS ................... Global Positioning System

HTTP ...................... Hypertext Transfer Protocol

JSON. ..................... JavaScript Object Notation

MOSDAC ............ Meteorological and Oceanographic Satellite Data Archival Centre

LBS......................... Location Based Service

MWA. ..................... Mobile weather Applications

XML. ...................... Extensible Markup Language

API .......................... Application Program Interface

NWP ....................... Numerical weather prediction

GTS ........................ Global Telecommunication System

SOA. ....................... Service oriented Architecture

 Abstract
Since the 19th century, mankind has struggled to predict the weather of a particular area. Weather
forecasting is a science using which people can predict the weather of an area for a particular
location and time..

Over the years, scientists have discovered weather patterns using factors like humidity, winds, clouds,
temperature, sea level etc. and now the weather predictions are more efficient than before, due to
the use of advance technologies and algorithms.

Even though there are many advance techniques and technologies, the web apps are very
complicated for everyone to use. Especially for the illiterate people. Many of the farmers depend on
the weather, which plays a big role in determining the future of their crops.

Many times they are not able to use technologies accordingly, and hence I decided to make an app
which would show the main details like probability of rain, temperature, humidity etc, just on clicking
the app, no other steps required. The app would only require a stable internet connection and GPS.
 Chapter 1: Introduction
1.1 Introduction

Weather forecasting is the science and technology to predict the conditions of the atmosphere
at a particular place. Human beings have attempted to predict the weather since the 19th
century

Earlier, weather forecasting was mainly done by predictions and they were not very accurate.
With the development in science and technology, scientists can now predict the weather to a
much higher accuracy. Humans are still trying to find the best methods and which have easy
pattern recognition skills, tele-connections, knowledge of model performance and knowledge
of model biases. The weather predictions are not truly accurate due to the constant changes in
weather, the errors involved in measuring the initial conditions and an incomplete
understanding of the atmospheric patterns. Hence weather forecasts become less accurate as
the time increases.

The use of weather forecast has wide importance in our lives. They are important because
they can help us be prepared in case of a weather apocalypse, and help to protect life and
property. Forecasts based on rain and temperature helps us in agriculture. Since outdoor
activities are severely curtailed by heavy rain, snow and wind chill, forecasts can help us to
plan activities around these events and the plan ahead and survive them. The US spends
billions every year on weather forecasting.

The purpose of this app is to fetch data in need of taking information about the weather
worldwide. Another purpose is to generate report and view it on the screen of the mobile
phones. The app will be developed in Android Studio in Java language, and the data will be
collected from an open source website.

Some important terms need to be discussed which need to be considered while developing
this app:

1. Forecast: current climate conditions and 24, 48, and 72 hours gauge of following climate
boundaries: temperature, humidity, downpour, wind speed, and sky conditions.
Geographical data (land, mixed, and sea) is given at the client's focal point. Weather
alerts for cyclone and expected as well as observed cyclone tracks for visualization over a
map.

2. Events: - disseminating information for heavy rain, smoke, fog, probability of cyclones
and fire all over India.

3. Nowcast: disseminating Nowcast (Half hourly forecast valid for 6 hours) information
related to heavy rain and cloudburst over Himachal Pradesh and Uttrakhand states of India
because these states are more prone to it. Also the probability of forest fires in many areas.
It is essential to keep the application lightweight. The following parameters should be
considered while developing the mobile application: memory limit, security, response time,
and battery utilization. We have utilized RESTful web administration, HTTP as a data
exchange protocol, and JSON as a data exchange group for keeping the application
lightweight. [2]

One study found that 75% of people who use weather forecasting apps, were satisfied or very
satisfied with the results. People seem to be more confident regarding shortterm weather
forecasts that they see. However, user confidence decreased with an increase in the forecast
lead time.

1.2 Problem Statement

Weather forecasts are used by both private and government industries to plan a wide range of
daily activities, protect life or properties. Some of the natural disasters which cause a lot of
damage to human life on earth are high wind, flood, cyclone, smoke, fire and fog. Presently,
severe advisory and alerts are determined by MOSDAC (Meteorological and Oceanographic
Satellite Data Archival Centre)[1].

The biggest problem many people face in this world is that many people are not able to use
complex apps, they just need to click and know the weather at a particular time. Not all the
smart phones have the features to have a google widget to show the weather. Hence this app
will just require the user to click on it and it would show the current weather details to the
person.

All that you would require would be a stable internet connection as well as GPS, which are
found in almost all the phones now a day.

The data of the weather will be fetched by an open source website and it would be displayed
on the screen of the phone in a user friendly way, so that every person could view it without
many confusing steps. In the later versions of this app, we could also add some more features
like multiple languages to view the weather, but for now it would be seen only in English.

It is important to first understand why people need to find the weather information and where
do they turn up to for finding this information. The use and understanding of weather is
interrelated and they both affect each other. Lazo et al, did a study on sources and personal
interpretation of weather, where he looked at the locations for which people obtain forecasts,
individual perception of the important characteristics of a forecast, and the decisions made
from the gathered information.

87% times, people use weather forecasts for the city or area in which they live.

72% times, people use weather forecast to stay informed about the weather. Other times, they
use weather apps to plan future events

Respondents most often looked at forecasts for areas within close proximity to their own
residence (cities in their region rather than in other states, territories and countries). Location,
timing, probability, and type of precipitation along with forecast temperatures are seen as
most valuable to users.
1.3 Objectives
There are various areas where weather forecast is used. The aviation industry is sensitive to
weather, hence, accurate weather reports are required to manage and control the air traffic.
Farmers rely on weather conditions to manage their work throughout the day.

Forestry department requires information regarding wind, rain, and humidity in order to
control the wild fires. Electricity department also relies on this to predict the demand. Other
commercial companies also pay for weather forecasts so they can increase their profits or
avoid large losses.

The main objective of this app is to show weather of a region in a user friendly manner, so
that it is easy to be viewed by majority of the people. The scope of this app will not be too
broad. On the contrary, it will be narrowed down to few functions which are mainly needed.
The main functions involve temperature and probability of rain.

The use of weather forecast has wide importance in our lives. They are important because
they can help us be prepared in case of a weather apocalypse, and help to protect life and
property.

Forecasts based on rain and temperature helps us in agriculture. Since outdoor activities are
severely curtailed by heavy rain, snow and wind chill, forecasts can help us to plan activities
around these events and the plan ahead and survive them. The US spends billions every year
on weather forecasting.

The purpose of this app is to fetch data in need of taking information about the weather
worldwide. Another purpose is to generate report and view it on the screen of the mobile
phones. The app will be developed in Android Studio in Java language, and the data will be
collected from an open source website

1.4 Methodology

Basically, every android user will be able to access this app.

Step 1: Since the app will be made in Android Studio, we will first need to make a java
project and add the libraries like Picasso and gson.

Gson is a Java library that can be used to convert Java Objects into their JSON representation.
It can also be used to convert a JSON string to an equivalent Java object.

Picasso is one of the most popular library for android. It is very simple and powerful library
for image downloading and caching.

Step 2: The data of the current weather report is fetched from an open source weather
website. So we need to create a java class so that we could connect the application to the
weather application. This is done using the website openweathermap. I have obtained the data
of the website by fetching the link and the key of the website.

Hence, to fetch the current data we require a stable internet connection.

Step 3: Using the key we have obtained the data which will give us information like amount
of clouds, maximum temperature, minimum temperature, pressure, precipitation, etc. So we
need to create separate classes in a package so we can fetch these details separately.

Step 4: Then we have to make a main class where we will display the City name, the last
updated time, description of the weather in one word, the amount of humidity, the current
time and the temperature in Celsius.

Step 5: In the final step we have to make changes in the display of the app that will be
reflected when we run it.

Chapter 2: Literature Survey

➢ ResearchiPaper: Design and Implementation of Location Based Weather Application
on Android Platform

Author- Bhagyasri G. Patel (Assistant Professor, Department of Computer Science &

Engineering, Faulty of Engineering Technology & Research, Bardoli, India)

Year of Publication- December 2017

Summary: Android is currently the fastest growing mobile platform. One of the fastest
growing areas in Android applications is Location Based Services (LBS). LBS is a platform that
provides information services based on the current or a known location, supported by the
Mobile positioning system.

Presently, MOSDAC (Meteorological and Oceanographic Satellite Data Archival Centre)

disseminates the weather forecast information through web. In this paper, we have
proposed an application for disseminating location based weather forecast application on
Android platform. It provides weather forecast information as per user’s location or location
of interest. This application provides several weather alerts for the events such as heavy
rain, fog, smoke, and fire.

It also provides Nowcast information for heavy rainfall alerts over Uttarakhand and Himachal
Pradesh states of India and forecast information for cyclone all over India. As MOSDAC is a
client-server application, selection of data communication protocols and data exchange
formats plays important role. The following limitations of mobile device must be considered
while developing a mobile application: memory size, security, response time, and battery
consumption.

In this paper, we have used RESTful web service, HTTP as communication protocol and JSON
as a data exchange format for minimizing these limitations. For the weather forecast, we
have used MOSDAC database. We selected substitution method over GPS because this
method uses low energy location-sensing mechanisms compared to GPS. We also compare
the battery consumption of MOSDAC Application with other such applications.

➢ ResearchiPaper:Weather Application On Android App Development

Author- Sourav Kumar

Year of publication- 2018

Summary: The intention of developing weather app is to fetch the data in the need
of taking information about weather worldwide. Another purpose for developing this
software is to generate the report automatically at the end of the session or in the
between of the session or in the between of the session as they require. This project
is basically a desktop application which means 3 self-contained software runs on
which it has been installed under the user control.

The outputs from the organization are traced to the various processes. System
analysis is concerned with becoming aware of the problem, identifying the relevant
 and Decisional variables, analysis and synthesizing the various factors and
determining an optimal or at least a satisfactory solution or program of action.

The system working is quite easy to use and learn due to its simple but attractive
interface. User requires no special training for operating the system.

Hardware and Software Requirements:

Hardware Required

Standard computer with at least i3 processor Standard computer with 4GB of RAM
. • Standard computer with 100GB of free space.
• Active Internet Connectivity with good bandwidth.

Software Required

• Android Studio
• Ms Office
• Draw.io

Technical performance include issues such as determining whether the system can
pro vide the right information for the Department personnel student details, and
whether the system can be organized so that it always delivers this information at the
right place and on time using intranet services.

➢ ResearchiPaper:Weather on the go: An Assessment of Smartphone mobile app

use
Author- Minh Duc Phan

Year of Publication- July 2017

Summary: Millions of people in the United States regularly acquire essential

information from weather forecasts for a wide variety of reasons. A myriad of
sources exists for obtaining daily weather information, and the rapid growth in
mobile device technology has created a very convenient means for people to retrieve
this data. Smartphone and technology use have soared in recent years, and mobile
weather applications (MWAs) have also rapidly gained popularity.

Research on weather sources, however, has been unable to sufficiently capture the
importance of this form of information gathering. As use of these apps continues to
grow and the market expands with increasing options, it is important to gain insight
on which MWAs and what MWA features are most useful to consumers. To better
examine MWA preferences and behaviours relating to acquired weather information,
a survey of 308 undergraduate college students from three different universities
throughout the southeast United States was undertaken.

Analyses of the survey showed that smart phone MWAs are the primary source
among college students for seeking weather forecasts. Additionally, MWA users tend
to seek short-term forecast information, like the hourly forecast, from their apps and
spend very little time using the app itself. Additional results provide insight on daily
MWA use by college students as well as perceptions of and preferential choices for
specific MWA features, designs, and various brands in the weather enterprise

The information gathered from this study will allow other researchers to better
evaluate and understand the changing landscape of weather information acquisition
and how this relates to the uses, perceptions, and values people garner from
forecasts. Companies and organizations that provide weather forecasts have an ever-
growing arsenal of resources to disseminate information, making research of this
topic extremely valuable for future development of weather communication
technology

Chapter 3: System Development

3.1 Analysis

The weather app is created using Android Studio, where we use certain libraries and
java language to create an app which takes data from an open source website using
internet and displays the weather conditions of a particular region.

The following parameters are used to predict the current weather of a place:

• City
• Country
• Date
• Temperature
• Wind
• Direction of Wind
• Pressure
• Humidity
• Rain
• Sunrise
• Sunset
• Latitude
• Longitude

The basic features of the app will be downloading and representation of information
regarding the current and future weather. The data is taken from OpenWeatherMap,
which provides information through an API. It is possible to use 60 different API
calls per minute free of charge and we can get information about the current weather.

The information is provided as JSON or XML data files. The provided app uses
XML format. The XML files are available for the app only if an API key is
automatically generated through the website. The key is then used in the URL of the
XML document as
http://api.openweathermap.org/data/2.5/weather?q=city&appid=key&mode=xml.

Numerical weather forecasts have been improved by the use of supercomputers in

the recent years. The numerical frequency of weather accuracy was not good before
and it still that’s a long time to bring it into real weather.

The idea of weather forecasting is very easy to understand, but it seems to be very
simple. Firstly, there is the problem of calculating a continuous atmosphere, that is,
there is a super computer that can only process discrete values. Therefore, the
atmosphere is separated by a network and a method is used to express the physical
values of the grid points.

And the last problem is that weather is associated with many physical phenomena.
Changes in atmospheric conditions, which are the basis of weather, can be described
by several relatively simple equations and are the basis for numerical predictions.
However, phenomena that occur in a range smaller than the grid size cannot be
calculated using this formula.
Also,some phеnomena associated with changes in water properties, such as water
vap or condensation and cloud formation, cloud particle development, and rain
formation, cannot be explained by some equations

NWP models cannot account for terrain effects on meteorological variables on a

scale smaller than the mesh cell size.

A common problem in interpreting NWP data is the output of high-resolution

information from low resolution variables. This process is called downscaling. This
process can be based on a dynamic or statistical approach. Splines, kriging,
embedding in high-resolution models, etc. Learningbased teaching methods belong
to the category of statistical methods and can be used toimprove the results of NWP
training and extract models from the relationship between historical model results
and corresponding observations.

The NWP model is a complex system, usually developed by large organizations over
the decades. Its development requires a high degree of expertise, and a whole group
of highly qualified scientists is devoted to the individual components of the model.
Models are often developed using modules that function to some degree independent
of the rest of the system. However, the atmosphere is a complex system in which
most variables are interconnected, determining the dependencies and feedback
processes between them. Numerical Weather forecasting is currently the only tool for
predicting atmospheric evolution and physical condition.

However, their results are not the only source of information for atmospheric
research. The sensor verifies the accuracy of the conditions observed in the
atmospheric zone in various ways. Examples of sensors used in weather forecasting
include ground stations, atmospheric noise, congestion, and satellites. Each of these
types of sensors has different characteristics depending on the spatial and temporal
density and coverage. The monitoring package provides realtime information as it
plays a key role in weather forecasting. Older people use this data to check
Numerical weather prediction output and correct potential errors and local effects.

The Numerical weather predicting model integrates all observed datasources to

create a raw condition. Numerical Weather Prediction analysis is a complex process
that requires the continuous integration of all sources of previously p ublished data

Traditional observations made at the surface of atmospheric pressure, temperature,

wind speed, wind direction, humidity, precipitation are collected routinely from
trained observers, automatic weather stations or buoys.

During the data assimilation process, information gained from the observations is
used in conjunction with a numerical model's most recent forecast for the time that
observations were made to produce the meteorological analysis.

Numerical weather prediction models are computer simulations of the atmosphere.

They take the analysis as the starting point and evolve the state of the atmosphere
forward in time using understanding of physics and fluid dynamics.

The complicated equations which govern how the state of a fluid changes with time
require supercomputers to solve them

The output from the model provides the basis of the weather forecast.
3.2 Design of the application

The app was designed in Android studio using HTML and CSS. Initially, if the app
is not able to start, it will show an error message indicating that there is some sort of
error

Steps of using the app:

• Open the application.

• Insert the name of the city whose forecast you need to find.
• Insert how many number of days(Maximum 10)
• The details will be displayed on the screen.
• Tap on any one of the entries to see the maximum or minimum temperature for that
day

3.2.1 Activity Diagram

In the app, first of all, the GPS will help to select the city, where the weather has to
be checked. If the location is a valid location, then we will proceed else, an error
message will be displayed on the screen, saying invalid City.

After the city is verified as a correct location, the app will fetch data from the open
source website and we will be able to access the weather location.
3.2.2 Class Diagram

The basic class diagram can be seen below. The user requires having a smart phone
with a data plan for accessing internet and GPS should be on because the app selects
the city through it. The user then requires to install the weather app on his smart
phone.

3.2.3 Use Case Diagram

The following diagram shows us how the user will interact with the application.

3.2.4 Sequence Diagram

Just like mentioned before, sequence diagram provides the steps that we need to
follow to know the weather of a place. First we will open the application, and then
GPS will select the current city. If the city is invalid, then error message will appear.
Else, we will be able to access the city and hence be able to predict the weather of
that city
3.3 Proposed Architecture

Location-based Weather App is implemented on android platform, which is an open

source operating system for mobile devices such as smart phones and tablet
computers. Android Studio was developed by Open Handset Alliance, led by
Google. Android Studio allows the developers, wireless operators, and handset
manufacturer to make new applications and products at lower cost.

Many companies like, Samsung, HTC, and a lot of other companies are using this
open source operating system for their smart phones with a very considerable price
which is the cause of availability of smart-phones to almost every person. Android
has its own language for developing location and internet based application [5]. But
in this project we will be using Java language to create a mobile weather app. The
proposed weather app is based on Service Oriented Architecture (SOA) where we
have thin client like Android Phones. Services are self contained and communicate
using JSON and XML messages. Services are cross platform, asynchronous, reliable,
and secured. Once we have a web service in remote server with centralized database
then we can use the same web service for different clients such as Android, iPhone,
Blackberry, Windows phone, and Symbian phones. Different clients can use the
common web service to save or retrieve the data.
The architecture used for developing the Android application is shown in Figure 1.
Components of Architecture While developing a client-server application, the
communication between client and database server becomes imperative. Therefore, it
is important to select appropriate web service, data exchange protocol, data exchange

format, and Mobile positioning technologies while developing client-server

application.

There are mainly four components in the architecture.

1) Web Services: The Web services maintain client and service provider
communications through protocols where client makes a request and service
providers provide the responses. [6].

2) Data Exchange Format: Data exchange format defines the data structure for
communication between the requester and the service provider to formulate
requests and responses in a simple way. Examples could be XML, JSON and
KML [7].

3) Data Exchange Protocols: For establishing connection between client and server
in Mobile application, it is important to decide the best way to exchange
information between client and server for minimizing the limitation of mobile
devices such as response time, network traffic, and resource utilization.
Examples could be Sockets and HTTP [8].

4) Mobile Positioning Technologies: Location based services are the mobile

services in which the user’s location information is used to provide a service.
The location information consists of latitude, longitude, and altitude generated
by any given positioning technique [9] Examples could be Cell-ID, GPS, and
Wi-Fi based techniques

Flow of Architecture

Here, we explain the data flow of the architecture, presented in Fig. 1. Android
 device fetches the input such as user’s current location (latitude-longitude) using
different mobile positioning technologies such as Global Positioning System,
WiFi Positioning System, and Cell-id Positioning System. Android device then
creates URL with runtime parameters (latitude-longitude) and calls the RESTful
web service. Device uses HTTP to open the URL and awaits response. RESTful
web service is responsible for querying database, retrieving results, converting
them into JSON format and sending JSON response by using HTTP protocol.

Mobile device receives JSON response and parses JSON objects. For system
perspective of Weather Application, we have maintained a central server which
is a database containing wide range of information of weather stations and
information related o weather parameters around all over India. We have also
employed haversine formula [10] for calculating the distances between user’s
current location and the nearest the weather stations. Therefore nearest weather
station can be fetched by using Haversine formula and weather details for the
particular weather station will be provided to the user.

The formula is presented in equations (1) to (3):

d = R ⋅ c ...(1)

Here, R = earth’s radius (mean radius = 6,371km)

c = 2 ⋅ a tan2( √a, √(1−a) )

Δlat = lat2 − lat1 Δlong = long2 − long1

a = sin²(Δφ/2) + cos φ1 ⋅ cos φ2 ⋅ sin²(Δλ/2)

Where “d” is the distance between two places considering as two points. “lat1”,
“lat2” stand for latitudes, “long1”, “long2” stand for longitudes of two points and
“Δlat” stands for difference in latitude of two points and “Δlong” stands for
difference in longitude of two points.

3.4 The forecasting process

Forecasting weather requires three steps:

• Observation and Analysis

• Extrapolation to find the future state of atmosphere

• Prediction of particular variables

One qualitative extrapolation technique is to assume that weather features will continue to move as
they have been moving. In some cases the third step simply consists of noting the results of
extrapolation, but actual prediction usually involves efforts beyond this.

The tools that people can use depend on the range of forecast that is for how much in the future we
intend to forecast the weather.

Short range forecasts also known as nowcasts; extend up to 12 hours ahead. Daily range forecasts
are valid for 1 to 2 days ahead. Medium range can show weather up to a week. And finally, short
term climate forecasts can show weather such as one-month and three-month average forecasts.
It was earlier mentioned, as time increases the probability of correctness of prediction of weather
decreases. This is because; we cannot of changes in weather pattern in the atmosphere which are
frequently changing with time.

Hence mentioning that the results will be perfect is always a useless thing to mention. Now we will
discuss the three steps for weather forecasting.

3.4.1 Observation and Analysis

• Metrological observations taken all around the world consist of reports from surface stations,
radiosondes, ships at sea, radar, and weather satellites.

• Although data access varies among countries, these are submitted to Global Telecommunications
System (GTS).

• Special efforts are made to collect data at all times of day. This data is printed, plotted and graphed
to assist the forecaster.

• Interactive computer is very important for helping the forecaster to use the huge mass of data
available

3.4.2 Extrapolation
• Meteorologists rely on numerical models to extrapolate the state of the atmosphere into the
future.

• Different models have varying levels of approximation to the equations.

• The more exact approximation, is a more expensive model to use because more computer time is
required to do the work.

• For example, during hurricanes, additional models are run on the computer as needed.

• After each model is run, selected results are further processed and transmitted to National Centres
for weather Prediction, government agencies, universities, private meteorologists etc.

• Some countries including Australia, Canada, China, Britain and Russia carry out a numerical forecast
effort on either regional or global domain.

• Many other countries choose to use the numerical forecast products available on the GTS and to
allocate their own resources to the prediction step of the recourses.

3.4.3 Prediction
• When a forecaster sets out to predict a specific variable, a great deal of model generated data is
available. None of the data provides a definitive prediction.

• The forecaster must also apply a knowledge of average climatic conditions, typical model behaviour
in the current situation and the local micro climatic variations.

• These are then resolved into statistical regression equations. These equations vary with season and
location.

• Most forecasters have job in which they have to evaluate the situation, compare different sources
and arrive at the best possible estimate for the variables of interest, such as temperature and
likelihood of precipitation.
3.5 Algorithm used
OpenWeatherMap uses the VANE Geospatial Data Science platform for collecting, processing, and
distributing information about our planet through easy to use tool and APIS.

VANE platform permits processing and distributing of weather data point every second. Number of
servers processes more than 10,000 calls a second. This is possible due to cutting edge Big Data
technologies that are being applied to the VANE platform

It provides:

• Current weather data for more than 200,000 cities

• Current weather data for any location (lat/lon)

• Daily forecast for 16 days, forecast for 5 days with 3 hour interval

• This day in history

• Weather maps (Precipitations, Clouds, Pressure, Temperature, Wind, Weather stations)

• Analytics

• Raw data from weather stations

VANE platform collects processed weather forecast data. Calculation of the global forecasts require
incredible computing power. They mostly use data from NOAA GFS model and Environment Canada.

These models are global and they see their mission in not a prediction of specific weather situation
at a certain point of land but in determining of the total atmospheric dynamics on the whole planet.
They have a large grid size - about 50 km and longer ranged forecast - 5-7 days. Then, they calculate
more detailed models for specific regions. Then they combine data of multi-scaled forecasts, from
the average and global to local and more accurate. That is why OWM interactive maps are very
convenient. You can use global forecasts for large scale, and you can get more and more detailed
data just by zooming.
 Chapter 4: PERFORMANCE ANALYSIS
Forecasting is more accurate than ever, but still there is wide variety in the mobile apps available in
play store. So, the biggest question lies, what is the difference and which one is the best.

Foundation of modern forecasting involves collecting huge amount of data from different sources
that were previously mentioned. Gaps of data are filled using a process called extrapolation. Then,
using several equations, in a supercomputer, which can perform a thousand trillion calculations per
second, weather, is predicted.

But the main difference comes from the main variable and the variables relying on it and the fact
that different people consider different parameters as the main variable. Eg: Some might take
temperature, rain or wind conditions as the main variable. Every time the prediction of weather will
be slightly different from the other one. Eric Floehr, founder of ForecastWatch, a company that
analyses performance of weather apps says that different forecasters perform better on different
measures, longer or shorter timeframes or in a certain geographical regions.

Hence we can understand, due to the difference in selection of the main variable, some apps are
able to show one parameter of weather better than the other one. One application may be better for
temperature averages and highs, probability of precipitation and wind speed; the other might be
better for low temperature predictions.

To know everything about the weather, you will need to model every single particle in the
atmosphere and all the interactions between them, which is not theoretically possible, because the
computer doing the modelling would produce so much heat and become part of the system, and
then need modelling. So no weather forecast will ever be perfect.

4.1 Analysis of system developed

Now we will be discussing the functions of each class and package that we created in this project.

4.1.1 Common

1. Created package common, and a class in the package also called common.

2. This will help to hold data sharing.

3. Taken API key from an open source website, called Open Weather Maps, which is a London based
company which shares data regarding the weather to developers.

4. API_LINK is link API of Open Weather Map. And we will create a function to create a functional link
to the API path.

5. Create a function to convert unix time stamp to date type with format “HH: mm”.

6. A third function will be used to get a link image from Open Weather Map.

7. Finally, a fourth function will be created to get Date with format “dd MMMM yyyy HH:mm”.

4.1.2 Helper

1. New package helper with a class package.

2. A function will be created to make a request to Open Weathe rMap’s API and get return result.
4.1.3 Model

1. Look at the json string from Open Weather Map’s API and create a model package for it.

2. Consider all the parameters and then create separate classes for each under the same package,
also create constructors in each class with getters and setters respectively.

4.1.4 Main Activity

1. Implement Location Listener to get current position of our device.

2. Add runtime permission request for our app.

3. Override On Pause() and On Resume().

4. Create inner class extend Async Task.

5. Use Gson and Type to parse Json to class.

6. Set value for controls.

4.2 Results at various stages

4.2.1 Steps taken by the Open Source website

• Climate API: Climate forecast for 30 days Climate forecast for 30 days allows you to request
weather data for next 30 days. This is a statistical approach and weather data are updated with
hourly frequency.

• Hourly forecast Hourly forecast for 4 days, with 96 timestamps and very high geographical accuracy.

• Integrated Time zones Due to this, the ‘Time zone’ field provides a shift in seconds from UTC.

• Feels Like

This parameter is added and it accounts for human reception of weather; it lets you know how the
temperature feels.

4.2.2 Steps taken in development

• The app is very easy to use because the automatic location is selected by typing the name of that
city, and then mentioning the number of days for which you need to find the forecast.

• The result is directly displayed on the screen of the mobile emulator, along with the name of the
place, on tapping on each entry, we can find the minimum and maximum temperature of that place.

• The app takes data from a trusted source and hence the prediction is very accurate as compared to
the one made using only some algorithms. The computation of millions of amount of data ensures its
correctness

4.3 Output at various stages

Step 1: Enter the name of the city in the first box, that is typed as Shimla here. Then write the
number of days for which you need to find the forecast.

The app will fetch the data from the open source website Open Weather Maps and we will be able to
fetch the data from there, onto our mobile screens.
Step 2: The application requires proper internet connection to display the correct results. Here as we
can see, the weather report for five days has been displayed on the mobile screen.

You can click on any one slot to access the minimum or maximum temperature on one particular day.
This result has been taken on 17th June 2020.
Step 3: We are performing the first step again, but this time we are entering the result for Delhi for
just one day

Step 4: The result is shown in the figure below. The temperature shown below these icons is actually
the average temperature. However if you wish to access the maximum and minimum temperature,
you need to tap on the icon.
Step 5: When we tap on the icon, the following result is displayed on the application. Here, we get
the date, i.e. 17th June 2020, then the average temperature, then the icon, displaying that it is a
cloudy day. And finally, we get the min and max temperature of that day.

All this data is fetched from the open source website whose API key we uused in the common class.

4.4 Comparison

In the first place, machine lеаrning is when the machine learns data iteratively to find patterns and
characteristics hidden in the data. By incorporating machine lеаrning you can improve the accuracy
of data analysis and make the best choice.

An example of the use of machine learning in the immediate world is that a certain manufacturer
extracts key words from text data based on questionnaire surveys from customers to help improve
their business, such as complaints and requests, to improve customer satisfaction.

In medical practice, it is used in medical fields to search a huge database of patient symptoms and
predict the future illness of a specific patient. He also plays a role in exploring huge databases using
time-series analysis to predict future stock price fluctuations. In this way, machine learning is used
even in our immediate surroundings

Decision tree

The first may be a technique called a decision tree. this can be a model that represents the machine
learning algorithm during a tree structure and includes a structure that's very easy for people to
work out. For example, in response to the question of whether to hike tomorrow, the primary branch
into three counting on whether the weather is sunny, cloudy or rainy, and so branch below whether
the wind is robust or the humidity is high. it's a methodto create and derive the ultimate answer.
Because it's a straightforward and eas y-to-understand model, it's disadvantages that make it difficult
to deal with complex problems.

Random forest

The second is random forest. because the first decision tree, this can be a treestructured technique,
but this method generates a large number of decision trees, and aggregates and predicts the results.
It is a well liked method because it is a high generalization performance and might perform
multiprocessing in order that each decision tree has differentcharacteristics by a large amount of
sampling. This technique is employed to estimate the piece of "Kinect".

Perceptron

The third is that the neural network perceptron. The neural network may be a technique to imitate
the structure and function of the biological neural network, and also the perceptron is the simplest
technique among the three layers of input → intermediate → output. Although it's a method that
can be said to be the ancestor of neural networks, it's not suitable for learning complex data, so deep
learning, which might be said to be this evolutionary system, is now mainstream.

We know about many Android Applications providing weather forecast information. One of them is
Accuweather [3]. Accuweather [3] provides access to the location based weather data via a simple
RESTful interface to subscribers. Accuweather Application provides access to current weather data
for any location on earth including 200,000 cities.

Data is available in JSON, XML, or HTML format. This application collects data from professional as
well as private weather stations. The majority of them are professional stations which are installed at
large cities, airports etc. The service also collects weather data from private stations that are
collected and installed by fans and weather devotee. This service also provides the details of
following weather parameters: temperature, humidity, pressure, sea-level, wind speed, cloudiness,
and rain

Another method of predicting weather is by using machine learning algorithms. Weather forecasts
are made by collecting quantitative data about the current state of the atmosphere at a given place
and using meteorology to project how the atmosphere will change.

Using machine learning there can be many ways to predict weather, lets us consider two ways —
binary classification (1- precipitation, 0- no precipitation) and regression, where prediction is to find
percentage of rain in a particular day.

To use this method, they need to use data from meteorology station.

For example: they took 29 variables and 22 064 records.

This is a lot of variables that you need to use in order to predict the weather. It was interesting to find
that summer in most years is similar, but autumn and spring are different. Hence, if you consider the
data for an year ago, the prediction of weather will not be accurate in the season of autumn and
spring in order to predict the weather as the trends of weather keep on changing.

By using these methods, we have limited dataset for the prediction of weather and also the data may
not be the latest data. And since weather keeps on changing itself and its

trends, it is difficult to say how accurate these methods will be in the future, you need to keep on
updating these methods in order to always get better results.

However, in the case where you are fetching results from a weather application which uses
supercomputers to calculate the weather of a place, it is supposed to be more accurate compared to
the machine learning one.

This is because, the data is not limited and is collected from all over the world and there are a million
of sources. Also the supercomputer can perform calculations that a simple computer cannot.
Hence this app is supposed to provide more accurate results.

Chapter 5: Conclusions
5.1 Conclusions
Climate forecasting is the utilization of science and innovation to foresee the states of the
environment for a given area and time. Individuals have endeavoured to anticipate the climate
casually for centuries and officially since the nineteenth century. Climate forecasts are made by
gathering quantitative information about the current condition of the environment at a given spot
and utilizing meteorology to extend how the air will change.

There are various areas where weather forecast is used. The aviation industry is sensitive to weather,
hence, accurate weather reports are required to manage and control the air traffic. Farmers rely on
weather conditions to manage their work throughout the day. Forestry department requires
information regarding wind, rain, and humidity in order to control the wild fires. Electricity
department also relies on this to predict the demand. Other commercial companies also pay for
weather forecasts so they can increase their profits or avoid large losses

When determined by hand dependent on upon changes in barometric weight, current climate
conditions, and sky condition or overcast spread, climate estimating now depends on PC based
models that bring numerous environmental components into account. Human information is as yet
required to pick the most ideal conjecture model to put together the figure with respect to, which
includes design acknowledgment aptitudes, teleconnections, information on model execution, and
information on model inclinations. The incorrectness of forecasting is because of the riotous idea of
the air, the huge computational force required to comprehend the conditions that portray the air, the
blunder engaged with estimating the underlying conditions, and a deficient comprehension of
environmental procedures. Thus, figures become less precise as the contrast between current time
and the ideal opportunity for which the gauge is being made (the scope of the estimate) increments.
The utilization of gatherings and model accord help limited the blunder and pick the most probable
result.

There is a tremendous assortment of end uses to climate figures. Climate admonitions are significant
conjectures since they are utilized to ensure life and property. Estimates dependent on temperature
and precipitation are imperative to agribusiness, and in this way to brokers inside item showcases.
Temperature figures are utilized by service organizations to gauge request over coming days. On an
ordinary premise, manyutilize climate gauges to figure out what to wear on a given day. Since open
air exercises are seriously shortened by overwhelming precipitation, day off wind chill, estimates can
be utilized to design exercises around these occasions, and to prepare and endure them. In 2009, the
US spent around $5.1 billion on climate determining.

The climate on planet Earth is an imperative and some of the time deadly power in human issues.
Endeavours to control or decrease the unsafe effects of climate return far in time. In this, the most
recent National Academies' appraisal of climate change, the board of trustees was solicited to survey
the capacity from ebb and flow and proposed climate alteration abilities to give helpful effects on
water asset the executives and climate peril alleviation. It looks at new advances, surveys propels in
numerical displaying on the cloud and mesoscale, and thinks about how upgrades in PC abilities may
be applied to climate change. Basic Issues in Weather Modification Research looks at the status of
the science hidden climate alteration in the United States. It requires an organized national
exploration program to respond to essential inquiries regarding fundamental air forms and to
address different issues that are blocking progress in climate adjustment.
Contingent upon the improvement of the living level, centres around the impact of the climate is
turning out to be progressively significant when the open arranging and leading their social exercises.
Along these lines, quantities of climate APPs have become more famous as of late than any time in
recent memory. The recurrence of utilization of the climate APPs, including the Moji Weather, Sina
Weather, China Weather what's more, Yahoo Weather, are positioned eighth among a wide range of
APP dependent on the examination of the China Internet Consuming Research Center. The pulling in
structure of UI and 7-day forecasts and sorts of life lists gave by the China Meteorological
Administration are the regular attributes of all the climate APPs referenced previously. Nonetheless,
unique APP too have its own highlights, for example, in light of the LBS and radar reflectivity, the
Caiyun Weather could give customized precipitation figure comparing to the area of the client. In
spite of the fact that, difference climate APPs could give particular capacities to various clients, the
conventional 7-day forecasts couldn't fulfill the inexorably interest for the exactness and
personalization of open clients from better developments relating to variation profession. Moreover,
the client of the social correspondence APP WeChat inside China has surpassed 400 millions, along
these lines, the approaches of scattering of the customized climate data through WeChat are turning
into a hotly debated issues when creating APPs.

While using this application, we have seen that the predictions made are by using a large dataset
that is collected from multiple sources and a supercomputer processes this data and hence we know
that the data that we obtain using this is very accurate. Though no one can make an application that
is 100% efficient to predict weather, due to the constantly changing weather phenomenon and the
disturbances in the atmosphere. However, the usage of this application is very easy and it also
provides accurate data which helps us determine the weather of a place.

5.2 Future Scope

Right now the application just fetches the result from the website and displays the result on the
screen of the emulator. In the future the following may be added to the app:

• More options so that we could view temperature in ranges like forecast for seven days, for a month
and detailed weather all throughout the day.

• In case of an upcoming weather calamity in your region, it should be able to show some
notifications to alert the user ahead of time.

• The application has only one language English right now, but in the future we might even add more
languages to make it more user friendly.

• It could display the sunrise and sunset times.

• To make it more interactive, we can add a feature of time lapse, so that we can view images of
change in the climate at regular intervals.

• Humidity and visibility

• Image of changes

• Push notifications

• Drought monitor

• Comparison of current weather with last year’s weather.

 HTML IN VS 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 Font -->

<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;50
0;600;700&display=swap"
rel="stylesheet"
/>

<!-- Link Script -->

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

<!-- Link CSS -->

<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- Wrapper -->
<div class="wrapper">
<h1>Weather App</h1>
<div class="tabContainer">
<p class="tab currentTab" data-userWeather>Your Weather</p>
<p class="tab" data-searchWeather>Search Weather</p>
</div>

<!-- Container -->

<div class="container">
<!-- Search Container -->
<form class="formContainer" data-searchForm>
<input
type="text"
placeholder="Search for city..."
data-searchInput
/>
<button class="btn" type="submit">
<img
src="./Images/search.png"
width="20"
height="20"
loading="lazy"
/>
</button>
</form>
<!-- Grant Location Access -->
<div class="grantLocationContainer subContainer">
<img
src="./Images/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>

<div class="subContainer loadingContainer">

<img src="./Images/loading.gif" width="150" height="150" />
<p>Loading</p>
</div>

<!-- Weather Info -->

<div class="userInfoContainer subContainer">
<div class="name">
<p data-cityName></p>
<img data-countryFlag />
</div>

<p data-weatherDesc></p>
<img data-weatherIcon />

<p data-temp></p>

<div class="parameterContainer">
<!-- Wind Speed -->
<div class="parameter">
<img src="Images/wind.png" alt="#" />
<p>windspeed</p>
<p class="parameterValue" data-windspeed></p>
</div>

<!-- Humidity -->

<div class="parameter">
<img src="Images/humidity.png" alt="#" />
<p>humidity</p>
<p class="parameterValue" data-humidity></p>
</div>

<!-- Wind Speed -->

<div class="parameter">
<img src="Images/cloud.png" alt="#" />
<p>clouds</p>
<p class="parameterValue" data-clouds></p>
</div>
</div>
</div>
 <!-- Location Not Found -->
<div class="errorContainer subContainer">
<img src="./Images/not-found.png" data-errorImg />
<p data-errorText></p>
<button class="btn" data-errorButton>Retry Now</button>
</div>
</div>
</div>
</body>
</html>

Java Script in VS code

// API Key
const API_KEY = "168771779c71f3d64106d8a88376808a";

// Tab Switching
const userTab = document.querySelector("[data-userWeather]");
const searchTab = document.querySelector("[data-searchWeather]");
const searchForm = document.querySelector("[data-searchForm]");
const userInfoContainer = document.querySelector(".userInfoContainer");
const grantAccessContainer = document.querySelector(
".grantLocationContainer"
);
const loadingContainer = document.querySelector('.loadingContainer');

const notFound = document.querySelector('.errorContainer');

const errorBtn = document.querySelector('[data-errorButton]');
const errorText = document.querySelector('[data-errorText]');
const errorImage = document.querySelector('[data-errorImg]');

let currentTab = userTab;

currentTab.classList.add("currentTab");
getFromSessionStorage();
// console.log(userTab);
// console.log(searchTab);

function switchTab(newTab) {
notFound.classList.remove("active");
// check if newTab is already selected or not
if (currentTab != newTab) {
currentTab.classList.remove("currentTab");
currentTab = newTab;
currentTab.classList.add("currentTab");

// Check which TAb is Selected - search / your

// If Search Form not contains active class then add [Search Weather]
if (!searchForm.classList.contains("active")) {
searchForm.classList.add("active");
userInfoContainer.classList.remove("active");
 grantAccessContainer.classList.remove("active");
}
// Your Weather
else {
searchForm.classList.remove("active");
userInfoContainer.classList.remove("active");
getFromSessionStorage();
}
 }
}

userTab.addEventListener('click', () => {
switchTab(userTab);
});

searchTab.addEventListener('click', () => {
switchTab(searchTab);
});

function getFromSessionStorage() {
const localCoordinates = sessionStorage.getItem("userCoordinates");
// console.log(localCoordinates);

// Local Coordinates Not present - Grant Access Container

if (!localCoordinates) {
grantAccessContainer.classList.add('active');
}
else {
const coordinates = JSON.parse(localCoordinates);
fetchWeatherInfo(coordinates);
}
}

async function fetchWeatherInfo(coordinates) {

const { lat, lon } = coordinates;
// Remove Active Class from the Grant access Container
grantAccessContainer.classList.remove('active');

// loading
loadingContainer.classList.add('active');

// try - catch Block

try {
const response = await
fetch(https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&ap
pid=${API_KEY}&units=metric);

const data = await response.json();

if (!data.sys) {
throw data;
}
loadingContainer.classList.remove('active');
userInfoContainer.classList.add('active');
renderWeatherInfo(data);
}
catch (err) {
 loadingContainer.classList.remove('active');
notFound.classList.add('active');
errorImage.style.display = 'none';
errorText.innerText = Error: ${err?.message};
errorBtn.style.display = 'block';
errorBtn.addEventListener("click", fetchWeatherInfo);
}
}

// Render Weather On UI
function renderWeatherInfo(weatherInfo) {
const cityName = document.querySelector('[data-cityName]');
const countryFlag = document.querySelector('[data-countryFlag]');
const description = 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]');
const clouds = document.querySelector('[data-clouds]');

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

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

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
grantAccessButton.style.display = 'none';
}
}

function showPosition(position) {
const userCoordinates = {
lat: position.coords.latitude,
lon: position.coords.longitude
};
 sessionStorage.setItem("userCoordinates",
JSON.stringify(userCoordinates));
fetchWeatherInfo(userCoordinates);
}

grantAccessButton.addEventListener('click', getLocation);

// Search for weather

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

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

e.preventDefault();
if (searchInput.value === "") {
return;
}
// console.log(searchInput.value);
fetchSearchWeatherInfo(searchInput.value);
searchInput.value = "";
});

async function fetchSearchWeatherInfo(city) {

loadingContainer.classList.add("active");
userInfoContainer.classList.remove("active");
grantAccessContainer.classList.remove("active");
notFound.classList.remove("active");
try {
const response = await
fetch(https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KE
Y}&units=metric);

const data = await response.json();

if (!data.sys) {
throw data;
}
loadingContainer.classList.remove('active');
userInfoContainer.classList.add('active');
renderWeatherInfo(data);
}
catch (err) {
loadingContainer.classList.remove('active');
userInfoContainer.classList.remove('active');
notFound.classList.add('active');
errorText.innerText = ${err?.message};
errorBtn.style.display = "none";
}
}
CSS in VS 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;
}

.wrapper {
height: 100vh;
width: 100vw;
overflow: hidden;
color: var(--colorLight2);
background-color: #112d4e;
background-image: linear-gradient(160deg, #112d4e 0%, #3f72af
100%);
}

/* Heading and Tab Container

*/
h1 {
text-align: center;
text-transform: uppercase;
word-spacing: 2px;
letter-spacing: 1.75px;
margin-block: 2rem;
}

.tabContainer {
width: 90%;
max-width: 550px;
display: flex;
justify-content: space-between;
margin: 0 auto;
margin-top: 2rem;
}
.tab {
cursor: pointer;
font-size: 0.875rem;
letter-spacing: 1.75px;
padding: 5px 8px;
text-transform: capitalize;
/* font-weight: 600; */
}

.tab.currentTab {
background-color: rgba(219, 226, 239, 0.5);
border-radius: 4px;
}

/* Tab Container Ends */

/* Main Container */
.container {
margin-block: 4rem;
}

.btn {
all: unset;
font-size: 0.85rem;
text-transform: uppercase;
padding: 10px 30px;
border-radius: 5px;
cursor: pointer;
background-color: var(--colorDark2);
}

.subContainer {
width: 90%;
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}

/* Form Container */
.formContainer {
width: 90%;
max-width: 550px;
margin: 0 auto;
 margin-bottom: 2rem;
display: none;
align-items: center;
justify-content: center;
gap: 0 10px;
}

.formContainer.active {
display: flex;
}

.formContainer input {
all: unset;
width: calc(100% - 80px);
height: 40px;
padding: 0 20px;
background-color: rgba(219, 226, 239, 0.5);
border-radius: 10px;
}

.formContainer input:focus {
outline: 3px solid rgba(255, 255, 255, 0.7);
}

.formContainer input::placeholder {
color: rgba(255, 255, 255, 0.7);
}

.formContainer .btn {
width: 40px;
height: 40px;
/* display: grid;
place-items: center; */
display: flex;
justify-content: center;
align-items: center;
padding: unset;
border-radius: 100%;
}

.form-container .btn img {

object-fit: contain;
}

/* Form Container End */

/* grant Location */
.grantLocationContainer {
display: none;
}

.grantLocationContainer.active {
display: flex;
}

.grantLocationContainer img {
margin-bottom: 1.5rem;
}

.grantLocationContainer p:first-of-type {
font-weight: 600;
font-size: 1.75rem;
text-align: center;
}

.grantLocationContainer p:first-of-type {
font-weight: 600;
font-size: 1.75rem;
text-align: center;
}

.grantLocationContainer p:last-of-type {
font-size: 0.75rem;
text-align: center;
margin-top: 0.75rem;
margin-bottom: 1.75rem;
font-weight: 300;
letter-spacing: 0.75px;
}

/* Grant Location End */

.loadingContainer {
display: none;
}

.loadingContainer.active {
display: flex;
}

.loadingContainer p {
text-transform: uppercase;
}

.userInfoContainer {
display: none;
}

.userInfoContainer.active {
display: flex;
}

.userInfoContainer p {
font-size: 1.5rem;
font-weight: 200;
}

.userInfoContainer img {
height: 70px;
width: 70px;
}

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

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

.userInfoContainer p[data-temp] {
font-size: 2.25rem;
font-weight: 700;
}

.userInfoContainer p[data-weatherDesc] {
text-transform: capitalize;
font-size: 1.2rem;
}

.parameterContainer {
width: 90%;
display: flex;
 justify-content: center;
gap: 10px 20px;
margin: 1.6rem auto 0;
flex-wrap: wrap;
}

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

.parameter p {
font-size: 1rem;
font-size: 600;
text-transform: uppercase;
}

.parameter img {
width: 50px;
height: 50px;
object-fit: cover;
}

.parameterValue {
font-size: 0.8rem;
font-weight: 200;
}

.errorContainer {
display: none;
}

.errorContainer.active {
display: flex;
gap: 1rem 0;
}

.errorContainer p {
 text-align: center;
}

.errorContainer img {
width: 100%;
max-width: 300px;
aspect-ratio: 1 / 1;
object-fit: cover;
}
 References
[1] Meteorological and Oceanographic Satellite Data Archival Centre(MOSDAC) Web portal and
http://mosdac.gov.in/login.jsp. Accessed 22nd May 2020.

[2] Openweatermap Website.http://www.openweathermap.com/forecast. Accessed 22nd April

2015.

[3] Application on Android App Development, Sourav Kumar. Published in 2018

[4] Weatherbug website.http://weather.weatherbug.com/mobile.html. Accessed 22nd May 2020

[5] Android, “http://en.wikipedia.org/wiki/Android_(operating_system)

[6] B. Rajitha, “Performance of Web Services on Smart Phone Platforms”, IOSR Journal of Computer
Engineering (IOSR-JCE), Volume 14, Issue 5 (Sep. - Oct. 2013).

[7] R. Aher, N.Gupta, A. Khairnar, K. Thanki, A.Gaidhani, "Bluetooth Based Notification System for
Blind People Using JSON Technology", International Conference of Advance Research and Innovation,
2014.

[8] R. Anacleto, N. Luz, and L. Figueiredo. "Personalized sightseeing tours support using mobile
devices" Human-computer interaction. Springer Berlin Heidelberg, 2010. 301-304.

[9] A. Patel, "An efficient location information management system (LIMS) for smartphone
applications", San Diego State University, 2012.

[10] Haversine Formula http://andrew.hedges.name/experiments/haversine Accessed 6th June 2020.

[11] Power Tutor Website. http://ziyang.eecs.umich.edu/projects/powertutor/. Accessed 4th June

2020.