A

Project Based Learning Report on

“Weather Application”
Submitted in Partial Fulfillment of the
Requirements for the Degree of
Bachelor of Technology In
Information Technology

Under Guidance of
Er. Pawan Gupta
Lecturer

Head of Department
Dr. Yashpal Singh
Professor
By
Students: Anamika Patel (2004313006)

Department of Information Technology

Bundelkhand Institute of Engineering & Technology
(An Autonomous Institute)
Jhansi (U.P.) India - 284128
Session 2022-2023
 CERTIFICATE
Department of Information Technology
Bundelkhand Institute of Engineering & Technology
Jhansi (U.P.) India - 284128

This is to certify that Project based Learning Project on “Weather Application” has been
successfully delivered by “ Anamika Patel (B.Tech 3rd year)” under my guidance in fulfillment
of a Bachelor’s degree from Bundelkhand Institute of Engineering and Technology, Jhansi
during the academic year 2022-2023.

Coordinator: Head of Department

Er. Pawan Gupta Dr. Yashpal Singh
Dept. Of Information Technology
I. INTRODUCTION

Weather forecasting has been one amongst the foremost scientifically and technologically
difficult issues round the world within the last century. Weather Forecast systems are among
the foremost advanced equation systems that computer needs to solve. This most advances
scientifically and technological modification is attributable to two factors: 1st, it’s used for
several human activities and second, attributable to the resourcefulness created by the varied
technological advances that are directly associated with this concrete analysis field, just like
the evolution of computation and therefore the improvement in activity systems. Sometimes
beauty cannot be defined in just words and statements. Those lovely flowers and blossoms in
the spring, warm sunshiny days in the summer, freezing mornings and the beautiful snow in
the winter. Certain changes in weather are always wonderful and cherishable. In some or other
way our daily lives are dependent on the weather conditions. It has been always essential to
know the regular updates of weather, as it continuously varies with every passing day. No one
can imagine how the weather is going to be on a subsequent day. Definitely, the Weather
forecast is a big thing that enabled many of us to stay notified about the changes in climatic
conditions beforehand. It can be said that it is one of the greatest advancements of all time,
mothered by innovative technologies and creative thoughts. The furtherance of the weather
forecasting is the weather app development.

II. PROPOSED SYSTEM

A. Exciting Features
Under web based Weather Report project application, some exciting features has been
added such as managing and handling exception error directly by the system which will
be not visible by the user to make it bug free. We will also try to provide many more
exciting features in the upcoming updates for our weather application

B. Multiple Choices
Multiple choice provided to the user by which they can even select different weather
channel as per their requirement and interest in it. They work better, have more detailed
and accurate information, and the weather widgets generally look better and more
modern. There are a ton of great options, but we think we narrowed down the best of
 the best. Our weather application will provide the best weather widgets currently
available on Android.

C. Pattern Recognition
Its pattern recognition system will able to notify abut bad weather condition previously
before it begins with digital graphics is another added advantage of this system. A major
component of flood alert broadcasting is the short-term prediction of extreme rainfall
events, which remains a challenging task, even with the improvements of numerical
weather prediction models. Such prediction is a high priority research challenge,
specifically in highly urbanized areas like Mumbai, India, which is extremely prone to
urban flooding.

D. Default Location
Once location selected by the user for its system use, it will make it default location and
remembered by the system so that users do not have to change every time they use this
system. Whether you're planning a trip or just like to keep tabs on the weather in other
places, our Weather app allows you to bookmark multiple cities so you can flip through
forecasts with just a few swipes. Here's how to add, delete, and rearrange cities in the
app.

E. Higher Accuracy
On a worldwide scale, large numbers of attempts have been made by different
researchers to forecast Weather accurately using various techniques. But due to the
nonlinear nature of Weather, prediction accuracy obtained by these techniques is still
below the satisfactory level. AccuWeather is also first in high temperature forecast
accuracy measured through mean absolute error and forecasts within three degrees, in
addition to the #1 ranking in low temperature forecast accuracy measured in mean
absolute error (tied) and forecasts within three degrees.
III.MAIN OBJECTIVE

A. Earth timelapse:
The changes in the weather conditions across the globe are simply displayed by using
images and pictures. This feature explains the previous climatic conditions, at the
present moment and how it will be in the next consequences. For the past 15 years,
billions of people have turned to Google Earth to explore our planet from endless
vantage points. You might have peeked at Mount Everest or flown through your
hometown. Since launching Google Earth, we've focused on creating a 3D replica of
the world that reflects our planet in magnificent detail with features that both entertain
and empower everyone to create positive change.

B. Predictions about the rainfall:

This is another fundamental attribute that shows the forecasts for the rain. It also
showcases the percentage of likelihood of the rainfall and it is classified into various
elements like cloudy, sunny, semi-cloudy, etc. We compare our results with various
deep-learning approaches like MLP, LSTM and CNN, which are observed to work well
in sequence-based predictions. Experimental analysis and comparison shows the
applicability of our proposed method for rainfall prediction in Rajasthan.

C. Time of sunrise and sunset:

This feature shows the duration of day and night. It will also mention the sunrise time
and the sunset time. Predictions of Wind: This feature is an added benefit for the
fishermen, sailors, windsurfers, paragliders. Also, people who are planning to spend
their weekends in outside places are also profited. For general users, this attribute is not
that useful.

D. Updates about Humidity:

For, the people who are planning for a long drive or to have a long journey. It is always
essential to monitor the humidity level and to start the journey. Beyond sunshine and
rain, our Weather application can give details on wind speed, solar ultraviolet radiation
(UV) levels, humidity, cloud cover, visibility, and more. It's undoubtedly one of the
best weather apps out there for the depth and precision of its
 E. UV Weather Map:
This attribute displays the ultraviolet radiation of the sun across the globe by the Solar
UV index. This is one of those unique features of the weather app development and it
is generally most helpful in the summer season.

F. Map about Climatic conditions:

You can get a clear picture of the climate data with this feature. It comprises of humidity
level, the temperature of the surroundings, and level of carbon dioxide. This attribute is
highly beneficial for scholarly people who are carrying out scientific experiments.
Weather Forecast: It is a fundamental factor of any weather app. This feature displays
the prevailing status of the weather on a weekly, monthly, daily and hourly basis.

IV.WEATHER APPLICATION IMPLEMENTATION

The methodology discussed above in system approach for website is implemented in Visual
Studio with JavaScript.

i. User Case Diagram

ii. UI Diagram
CODING:

1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Weather App</title>
<link rel="stylesheet" href="style1.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="column side">
<p id="demo"></p>
<p id="demo1"></p>
</div>
<div class="column side">
<h1>Weather Forecast</h1>
</div>
<div class="abc">
<form id="form">
<input type="text"
id="search" placeholder="Search by location" autocomplete="off" />
<p id="write">City , Country</p>
</form>
<main id="main"></main>
</div>
</body>
</html>

2. Style.css *
{
box-sizing: border-box;
}
Body
{ padding:
0px; margin:
0px;
/background-image: url("weather.jpg");/
background: linear-gradient( rgba(100, 77, 202, 0.37), rgba(231, 237, 238, 0.418) ),
url('weather.jpg');
background-repeat: no-repeat; background-
size: cover; background-position: top center;
min-height: 100vh;
}
.column {
float: left;
padding: 0px;
margin: 0px; }
.column.side
{width: 50%;
}
.abc { text-align:
center; }
#demo{ padding: 5px;
margin:5px; font-size: 50px;
font-weight: bold; font-family:
Times New Roman; color:
white; }
#demo1{ padding: 5px; margin: 5px; font-
size: 40px; font-weight: bold; font-family:
Comic Sans MS; color: white; }
input[type=text]{ background-color: #fff;
border: none; border-radius: 30px; box-
shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
font-family: Comic Sans MS; font-size:
1.5rem; padding: 1.5rem; min-width:
350px;
}
input:focus { outline:
none;
}
#main{
text-align: center; font-family:
Comic Sans MS;
font-size: 40px; font-weight:
bold; color: black; } #write{
margin: 0px; padding: 0px;
font-size: 40px; color: black;
font-weight:bold; font-
family:Comic Sans MS;
} h1{ padding: 0px; font-size:
60px; text-shadow: 6px 6px
8px red;
text-align: right;
padding-bottom: 30px;
text-align:center; color:
yellow;
}

3. script.js
const apikey = "4d8fb5b93d4af21d66a2948710284366";
const main = document.getElementById("main"); const
form = document.getElementById("form"); const search
= document.getElementById("search");
Const url = (city) =>
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apikey`; async
function getWeatherByLocation(city)
{
const resp = await fetch(url(city), { origin: "cors" });
const respData = await resp.json(); console.log(respData);
addWeatherToPage(respData);
}
function addWeatherToPage(data)
{
const temp = KtoC(data.main.temp); const
weather = document.createElement("div");
weather.classList.add("weather");
weather.innerHTML = ` <h2><img
src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" />
${temp}°C
<img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png"
/></h2>
<small>${data.weather[0].main}</small> `;
// cleanup main.innerHTML
= "";
main.appendChild(weather);
}
function KtoC(K)
{
return Math.floor(K - 273.15);
}
form.addEventListener("submit", (e) => {
e.preventDefault(); var a =
document.getElementById("search").value;
document.getElementById("write").innerHTML = a;
const city = search.value;
if (city) {
getWeatherByLocation(city);
}
});
var myVar = setInterval(myTimer, 0);
function myTimer() { var d = new
Date(); var t =
d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
Myfunction(); function
Myfunction(){
var day; switch(new
Date().getDay()){ case 0:
day="Sunday";
break; case 1:
day="Monday"; break;
case 2:
day="Tuesday";
break; case 3:
day="Wednesday";
break; case 4:
day="Thursday"; break;
[0:48 am, 06/04/2023] Shaloo Biet: case 5:
day="Friday"; break; case 6:
day="Saturday"; break; } var
month; switch(new
Date().getMonth()){ case 0:
month="January";
break; case 1:
month="February";
break; case 2:
month="March";
break; case 3:
month="April";
break; case 4:
month="May";
break; case 5:
month="June";
break; case 6:
month="July";
break;
month="August";
break; case 8:
 month="September"; break;
case 9:
month="October";
break; case
10:
month="November";
break; case 11:
month="December";
break; }
var date=new Date().getDate()
document.getElementById("demo1").innerHTML = day+", "+month+" "+date;

IV. OUTPUTS
V. ADVANTAGES

A. Understanding the behavior of the customer:

In this competitive market, it has become essential for business organizations to
understand the requirements of the customers. Furthermore, designing the applications
that satisfy their demands helps you to generate high revenue for your business.

B. Build Customer Loyalty:

The primary aim of your weather app development Company is to obtain customer
loyalty. By using the intuitive user interfaces you can engage your users efficiently

C. Amplify your profit rate:

You can simply notice the escalation of traffic to your application, with the increase in
consumer satisfaction. One simple thing that you have to follow is to render your
customers with the best services.

D. A powerful tool for marketing:

An application is always a great medium to market your business. By justing offering
the users with the fundamental features that can be easily understood by them, you can
amplify your business.

E. Forecast:
Indubitably, this is the most popular and widely used type of weather application. Using
location services, forecasts provide weekly and daily weather report. Some of the apps
offer numerous added widgets, including hourly forecasts as well. Generally, the basic
features are free, but for some additional ones, you will have to pay.

F. Image of changes:
This type of app is much less popular in comparison to the above mentioned two,
however it is quite fascinating. It displays the overall climate change that has taken
place over the years or a specific period of time. It is mostly used for learning purposes.
VI. COST CONSTRAINTS

A. Actual motive and functionality of the Application:

The weather apps are excessively broad and the principal objective of the application
basically directs the budget of the development of the application.

B. Design of the application:

You cannot neglect the design of your app. UI/UX designs always play a key role when
designing an application. So consequently it demands some huge chunks. But there are
many mobile app development companies that can provide you the best services at an
affordable price tag.

C. App platforms:
The platform on which you are going to launch the application also determines the cost.
For example there are two types of devices Android and Iphone. Android is the open
source software so the cost will be less as compared to the Apple's Iphone devices which
are not open source.

D. Post-Developmental Updates of the application:

When your app is live on the play store, customers will be coming up with the defects
and bugs in the application. In order to solve these, it demands some amount of time
and money.

E. Security of your Application:

Security and privacy are always of primary concern these days. Nobody wants to expose
the data of their application so it is better to take some measures in order to maintain
perfect privacy and secure the information. So, assign some budget for security
purposes beforehand.
VII. CONCLUSION

So we conclude that we made a useful application for day to day life uses through which people
can choose where and when to take their holidays to take advantages of good weather. Regions
can be evacuated if hurricanes or floods are expected. Farmers can known when to plant or
harvest their crops. As our aim to is to provide the better weather forecasting than other
platform so to take a edge we will not charge and it will be free of cost. So here we conclude
that we have made a successful application.

weather forecasts are increasingly accurate and useful, and their benefits extend widely across
the economy. While much has been accomplished in improving weather forecasts, there
remains much room for improvement. The forecasting community is working closely with
multiple stakeholders to ensure that forecasts and warnings meet their specific needs.
Simultaneously, they are developing new technologies and observational networks that can
enhance forecaster skill and the value of their services to their users.
VIII. REFERENCES

1. https://www.javatpoint.com/javascript-tutorial
2. https://www.geeksforgeeks.org/web-technology/html-css/
3. https://www.youtube.com/results?search_query=code+with+harry+web+development
4. https://www.youtube.com/watch?v=MIYQR-Ybrn4&list=WL&index=4&t=1428s