DEPT OF COMPUTER ENGG.

WEATHER FINDER

CHAPTER I

INTRODUCTION

Defiition :

Weather finder is the application of science and technology to predict the conditions of the
atmosphere for a given city. People have attempted to predict the weather informally for
millennia and formally since the 19th century. Weather forecasts are made by collecting
quantitative data about the current state of the atmosphere, land, and ocean.

Working Of Weather Finder :

There are two different tasks at the core of a weather finder

● User request analysis

● Returning the response

User Request Analysis :

● This is the first task that a weather app performs. It analyzes the user’s request to identify
the user intent and to extract relevant entities.

Returning the Response :

● Once the user’s intent has been identified, the weather must provide the most appropriate
response for the user’s request. The answer return the weather of city request.

1
DEPT OF COMPUTER ENGG. WEATHER FINDER

CHAPTER II

LITERATURE REVIEW

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 first known as LiveScript, but Netscape
changed its name to JavaScript, possibly because of the excitement being generated by Java.
JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The
general-purpose core of the language has been embedded in Netscape, Internet Explorer, and
other web-browsers.

The ECMA-262 Specification defined a standard version of the core JavaScript language.

 JavaScript is a lightweight, interpreted programming language.

 Designed for creating network-centric applications.

 Complementary to and integrated with Java.

 Complementary to and integrated with HTML.

 Open and cross-platform

Client-Side JavaScript :

Client-side JavaScript is the most common form of the language. The script should be
included in or referenced by an HTML document for the code to be interpreted by the
browser. It means that a web page need not be a static HTML, but can include programs that
interact with the user, control the browser, and dynamically create HTML content. The
JavaScript client-side mechanism provides many advantages over traditional CGI server-side
scripts. For example, you might use JavaScript to check if has entered a valid e-mail address
in a form field. The JavaScript code is executed when the user submits the form, and only if
all the entries are valid, they would be submitted to the Web Server. JavaScript can be used to
trap user-initiated events such as button clicks, link navigation, and other actions that the user
initiates explicitly or implicitly.

2
DEPT OF COMPUTER ENGG. WEATHER FINDER

3
DEPT OF COMPUTER ENGG. WEATHER FINDER

CHAPTER III

ARCHITECTURE,METHODOLOGY,CODING,TECHNOLOGIES USED

3.1 ARCHITECTURE OF WEATHER APP :

Online weather forecasts provide a method with which people can check the weather in the
near future for almost every place on earth! It is especially useful for things like preparing for
hazardous weather, or even deciding if things such as picnics can go ahead. Users can usually
choose between hourly forecasts, daily forecasts. Users are informed on things such as wind
speed, temperature, atmospheric pressure, wind direction, and even sometimes pollen count.
Being something that incorporates real time information, online weather forecasts can
automatically update themselves instantly, which means that users can see much more
accurate forecasts for the near future; this is only possible because of the incorporation of
online weather services with real time information.

OpenWeather Response
User
Map api to User
Input

HTTP retrieve

FIG 1 : Architecture of Weather App

4
DEPT OF COMPUTER ENGG. WEATHER FINDER

SYSTEM ANALYSIS :

1. FUNCTIONAL REQUIREMENTS :

● The Administrator will be given power to add the problems and solutions according to their
requirement.

● Using the openweathermap api and js the page seems effective and user interface to their
user comfort.

● The system can be accessed anytime.

2. NON-FUNCTIONAL REQUIREMENTS :

Performance Requirements :

The proposed system that we are going to develop will be used as the weather finder.
Therefore, it is expected that the local storage and List Trainer would perform functionally all
the requirements that are specified.

Safety Requirements :

The local storage may get crashed at any certain time due to interrupt or operating system
failure. Therefore, it is required to take the database backup.

Security Requirements :

● We are going to develop a secured local storage file system.

● We can backup the local file system using the One drive account or use some cloud storage
systems.

● Depending upon the category of user the access rights are decided. It means if the user is an
administrator then he can be able to modify the problems and solutions.

5
DEPT OF COMPUTER ENGG. WEATHER FINDER

3.2 ACTUAL METHODOLOGY FOLLOWED :

DESCRIPTION :

We learn how to build a simple, yet fully functional weather app with JavaScript. First things
first, we have find a provider that will let us incorporate its weather data into our app. Luckily
enough, there are several different providers out there for developing weather apps. Most of
them include a free package along with premium subscriptions that scale depending on the
services/features. In our case, we’re going to use OpenWeatherMap, one of the most popular
free choices. To take advantage of its capabilities, first, we have sign up for an API key

The Page Markup :

The first section will include a heading, a search form, and an empty span element. This
element will become visible with an appropriate message under certain conditions.
Specifically, if there isn’t any weather data available for a requested city or the data for this
city are already known.

Some Basic Styles:

With the markup for the app ready, we’ll forge on with the CSS. The first step, as always, is
to specify some CSS variables and common reset styles.

Add the JavaScript :

On Form Submission

Each time a user submits the form by pressing the Enter key we’ll do two things:

1. Stop the form from submitting, hence prevent reloading the page.

2. Grab the value which is contained in the search field.

6
DEPT OF COMPUTER ENGG. WEATHER FINDER

3.3 CODING :

<html>

<head>

<title>Weather App</title>

<style>

body

background-image: url("bg.jpg");

background-color: grey;

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

color: white;

text-shadow: 2px 2px 1px black;

font-family: "Palatino", "Book Antiqua", serif;

#intro

position: absolute;

padding: 15px 25px;

position: center;

background-color: olive;

7
DEPT OF COMPUTER ENGG. WEATHER FINDER

#weatherContainer

background-color: rgba(0, 0, 0, 0.25);

box-shadow: 1px 1px 5px black;

padding: 35px;

border-radius: 10px;

position: absolute;

visibility: hidden;

#weatherContainer h1

margin: 5px;

font-size: 42px;

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

#searchContainer

padding: 20px;

margin-left: 37%;

8
DEPT OF COMPUTER ENGG. WEATHER FINDER

#searchContainer input

width: 200px;

#searchContainer button

background-color:olive;

color: white;

width: 75px;

.searchControl

box-shadow: #808000;

border: none;

border-radius: 5px;

padding: 8px;

@media (min-width: 768px)

#searchContainer input

width: 50vh;

height: 10vh;

9
DEPT OF COMPUTER ENGG. WEATHER FINDER

#searchContainer button

width: 10vh;

height: 10vh;

#weatherMain

display: block;

margin-bottom: 20px;

#weatherMain div

display: inline-block;

#weatherDescriptionHeader

font-size: 28px;

vertical-align: 50%;

10
DEPT OF COMPUTER ENGG. WEATHER FINDER

#temperature

font-size: 38px;

vertical-align: 25%;

.bottom-details

display: block;

font-size: 24px;

text-align: right;

hr

margin-bottom: 20px;

</style>

</head>

<body>

<h1 id="intro">Welcome to Weather App</h1>

<div id="weatherContainer">

<div id="weatherDescription">

<h1 id="cityHeader"></h1>

<div id="weatherMain">

<div id="temperature"></div>

11
DEPT OF COMPUTER ENGG. WEATHER FINDER

<div id="weatherDescriptionHeader"></div>

<div><img id="documentIconImg"></div>

</div>

<hr>

<div id="windSpeed" class="bottom-details"></div>

<div id="humidity" class="bottom-details"></div>

</div>

</div>

<div id="searchContainer">

<input class="searchControl" type="text" placeholder="Please Enter City Name"

id="searchInput">

<button class="searchControl" id="searchBtn">Go!</button>

</div>

<script>

let appId = '71f6779186cc32448b4c412eea65b982';

let units = 'metric';

let searchMethod; // q means searching as a string.

function getSearchMethod(searchTerm)

if(searchTerm.length === 5 && Number.parseInt(searchTerm) + '' === searchTerm)

searchMethod = 'zip';

else

12
DEPT OF COMPUTER ENGG. WEATHER FINDER

searchMethod = 'q';

function searchWeather(searchTerm)

getSearchMethod(searchTerm);

fetch(`http://api.openweathermap.org/data/2.5/weather?${searchMethod}=$
{searchTerm}&APPID=${appId}&units=${units}`)

.then((result) => {

return result.json();

}).then((res) => {

init(res);

});

function init(resultFromServer)

switch (resultFromServer.weather[0].main)

case 'Clear':

document.body.style.backgroundImage = "url('clearPicture.jpg')";

break;

case 'Clouds':

document.body.style.backgroundImage = "url('cloudyPicture.jpg')";

13
DEPT OF COMPUTER ENGG. WEATHER FINDER

break;

case 'Rain':

case 'Drizzle':

document.body.style.backgroundImage = "url('rainPicture.jpg')";

break;

case 'Mist':

document.body.style.backgroundImage = "url('mistPicture.jpg')";

break;

case 'Thunderstorm':

document.body.style.backgroundImage = "url('stormPicture.jpg')";

break;

case 'Snow':

document.body.style.backgroundImage = "url('snowPicture.jpg')";

break;

default:

break;

14
DEPT OF COMPUTER ENGG. WEATHER FINDER

let weatherDescriptionHeader = document.getElementById('weatherDescriptionHeader');

let temperatureElement = document.getElementById('temperature');

let humidityElement = document.getElementById('humidity');

let windSpeedElement = document.getElementById('windSpeed');

let cityHeader = document.getElementById('cityHeader');

let weatherIcon = document.getElementById('documentIconImg');

weatherIcon.src = 'http://openweathermap.org/img/w/' + resultFromServer.weather[0].icon

+ '.png';

let resultDescription = resultFromServer.weather[0].description;

weatherDescriptionHeader.innerText = resultDescription.charAt(0).toUpperCase() +
resultDescription.slice(1);

temperatureElement.innerHTML = Math.floor(resultFromServer.main.temp) + '&#176;';

windSpeedElement.innerHTML = 'Wind Speed: ' +

Math.floor(resultFromServer.wind.speed) + ' meter/s';

cityHeader.innerHTML = resultFromServer.name;

humidityElement.innerHTML = 'Humidity levels: ' + resultFromServer.main.humidity +

'%';

setPositionForWeatherInfo();

15
DEPT OF COMPUTER ENGG. WEATHER FINDER

function setPositionForWeatherInfo()

let weatherContainer = document.getElementById('weatherContainer');

let weatherContainerHeight = weatherContainer.clientHeight;

let weatherContainerWidth = weatherContainer.clientWidth;

weatherContainer.style.left = `calc(50% - ${weatherContainerWidth/2}px)`;

weatherContainer.style.top = `calc(50% - ${weatherContainerHeight/1.3}px)`;

weatherContainer.style.visibility = 'visible';

document.getElementById('searchBtn').addEventListener('click', () =>

let searchTerm = document.getElementById('searchInput').value;

if(searchTerm)

searchWeather(searchTerm);

});

</script>

</body>

</html>

3.4 TECHNOLOGIES USED IN PROJECT :-

16
DEPT OF COMPUTER ENGG. WEATHER FINDER

S. No. Name of Specifications Qty Remarks

Resource/material

Computer (i3-i5
1 Hardware computer preferable),RAM
system minimum 2 GB and 1 i3 processor

onwards but not

limited
Windows
2 Operating system XP/windows 7/linux 1 Windows 11
version 5 or later

3 Software Notepad 1 x86

17
DEPT OF COMPUTER ENGG. WEATHER FINDER

CHAPTER IV

SCREENSHOTS :

FIG 2 : Cloudy Weather

FIG 3 : Rainy Weather

18
DEPT OF COMPUTER ENGG. WEATHER FINDER

FIG 4 : Mist Weather

19
DEPT OF COMPUTER ENGG. WEATHER FINDER

CHAPTER V

ADVANTAGES,DISADVANTAGES,CONCLUSION AND REFERENCE

5.1 ADVANTAGES OF WEATHER APP :

 Instant information availability

 Improved Weather forecast

 Easy Flow of Information

 Widget Support

 Interactive Maps for better weather information

 Free availability

5.2 DISADVANTAGES OF WEATHER APP :

 Like all weather forecast, online weather forecast can also be unreliable; as such kind
of prediction is not an easy one to determine.
 As users go further from the present time and day in the forecasts, the forecasts
become less and less detailed, and so ultimately become less reliable.
 A strom could be forecast, making people spend money and put in effort in order to
take precautions against the strom, but then the strom may not strike, and so people
would have wasted their time and money.
 Again, the servers may crash, causing the site to be temporarily offline, meaning that
users cannot access this information, which ultimately causes disappointment.

20
DEPT OF COMPUTER ENGG. WEATHER FINDER

5.3 CONCLUSION :

With the advancement of technology weather finder website has developed to our best,
but there is yet to develop. It is user friendly, so that every user can handle it with ease.
This application is developed such that it will not use much of phone RAM and
memory space Weather forecasts still have their limitations despite the use of modern
technology and improved techniques to predict the weather. Weather forecasting is
complex and not always accurate, especially for days further in the future, because the
weather can be chaotic and unpredictable. If weather patterns are relatively stable, the
persistence method of forecasting provides a relatively useful technique to predict the
weather for the next day. Weather observation techniques have improved and there
have been technological advancements in predicting the weather in recent times.
Despite this major scientific and technical progress, many challenges remain regarding
long-term weather predictability. The accuracy of individual weather forecasts varies
significantly.

21
DEPT OF COMPUTER ENGG. WEATHER FINDER

5.4 REFERENCE :

[1] SoumalyaGhosh, A. B. Garg”Krishi-Bharati: An Interface for Indian Farmer”.

SayanSarcar, P.S.V.SSridhar, OjasviMaleyvar and Raveesh kapoor. University of
Petroleum& Energy Studies, Dehradun, India. Indian Institute of Technology Kharagpur,
India. University of Petroleum & Energy Studies, Dehradun, India Indian Institute Of
Technology Kharagpur, India, IEEE, 2014.

[2] “Krishi-Mitra: Expert System for Farmers” Ms. PrachiSawant, Mrs. M.A.Shaikh, Ms.
AartiThorat, Ms. ArtiMhaske, Ms. SamruddhiGhanwat ,Department of Information
Technology,JSPM’s RajarshiShahu College of
Engineering, IJCSMC, Vol. 4, Issue. 4, April 2015.

[3] Namita Mittal, Basant Agarwal, Ajay Gupta, Hemant Madhur, ”Icon Based Information
Retrieval and Disease Identification in Agriculture. ”In International Journal of Advanced
Studies in Computer Science & Engineering IJASCSE, Volume 3, Issue 3, 2014.

[4] Milind K. Tatte, Mangesh K. Nichat, “Enhancement in Agro Expert System for Rice
Crop.” In International Journal of Electronics Communication and Computer Engineering
Volume 4, Issue (2) REACT-2013.

[5] https://openweathermap.org/appid

22