hjfjhvhj

PROJECT REPORT
ON
“Weather Web App”

Submitted in partial fulfilment of the

Requirement for the award of the degree of
Bachelor of Computer Application

Under the Guidance of Submitted By

Prof. Dhwani Garg Muskan singh(R210919106159)
School of IT Joban jeet singh(R210919106119)
IMS Noida Jonish rana(R210919106120)

(Batch: 2020-2024)

INSTITUTE OF MANAGEMENT STUDIES, NOIDA

(Chaudhary charan singh university, meerut)
 PERFORMA FOR APPROVAL OF THE BCA MINOR PROJECT PROPOSAL

Roll No.: R210919106159

Name of the Student: Muskan singh

E-mail: muskansinghbcr.21134@[Link]

Mob. No.: 8595774010

Title of the Project: Weather web application

Name of the Project Guide: Prof. Dhwani Garg

For Office Use Only:

Signature of the Guide

Approved Not Approved Date :

Suggestions(if any):
1.
2.
3.
4.
5.
6.
7.
8.
 CERTIFICATE

I here by declare that Minor Project (BCA-606P) titled “WEATHER WEB APPLICATION” has been
submitted to School of IT, IMS Noida, which is affiliated with CHAUDHARY CHARAN SINGH
UNIVERSITY,MEERUT(U.P.), for the partial fulfillment of the degree of Bachelor of Computer
Application, in 2021-2024. This has not previously formed the basis for the award of any other degree,
diploma or other title from any other University.

PLACE: IMS NOIDA Date………………

NAME OF STUDENT: MUSKAN SINGH

ROLLNUMBER: R210919106159

…………………
Signature
 ACKNOWLEDGEMENT
.
I would like to express my profound gratitude to Prof. Monika Dixit Bajpai ,HoD
School of IT and IMS Noida for their contributions to the completion of my project
titled weather web application

I would like to express my special thanks to my project guide Prof. Dhwani Garg
Ma’am for her time and efforts that she provided throughout the year. Her useful
advice and suggestions were really helpful to me during the project’s completion.
I am eternally grateful to my project guide.

I would like to acknowledge that this project was completed entirely by me and not by
someone else.

signature

Muskan singh(R210919106159)
NO. DESCRIPTION PAGE
NO.
1. INTRODUCTION 5
1.1 Object of the system 5
1.2 Justification and need for the system 5
1.3 Advantage of the system 6
1.4 Previous work or related system 6

2. REQUIREMENT ANALYSIS 7
2.1 Analysis study 7-8
2.2 User Requirement 9
10
2.3 Final Requirement

3. DESIGN OF THE SYSTEM 10

3.1 Hardware, software requirements 10-11
3.2 System requirements 11-12
13
3.3 DFDs

4. IMPLEMENTATION & CODING 14-15

4.1 Operating system 16
4.2 Languages 16
17-43
4.3 Coding

5. TESTING & TEST RESULTS 44

5.1 Software Testing and Object of Testing 44-47
5.2 Sample Test data/ Output screen printout 48-49

6. CONCLUSION 50
1. Conclusion 50
2. Future scope 50

7. BIBLOGRAPHY 51
 [Document title]

Chapter 1

INTRODUCTION

Weather forecasting is the application of science and technology to predict

the state of the atmosphere for a given location. Ancient weather forecasting

methods usually relied on observed patterns of events, also termed pattern

recognition. For example, it might be observed that if the sunset was particularly

red, the following day often brought fair weather. However, not all of these

predictions prove reliable

1.1 OBJECTIVE OF THE SYSTEM

This project will serve the following objectives:-

1. Provides the user with an easy and friendly interface

2. Provides the user with the temperature of a particular region

3. It will also show humidity, wind speed and cloud

1.2 JUSTIFICATION AND NEED FOR THE SYSTEM

Weather is something everybody deals with, and accurate data about it like what is coming can help
users to make informed decisions. With weather apps for iOS and Android, people can exactly know
when to expect a change in the weather conditions. Weather apps can give urgent alerts too.

Undoubtedly, weather forecasting has come a long way, helping people to know about weather
conditions. So, if you are in an area where weather frequently changes from sunny to torrential rain in a
matter of minutes, then what is the easiest way to make sure to be prepared? A suitable answer is a
weather application.

WEATHER WEB APPLICATION 8

 [Document title]

1.3 Advantages of the system

1. Real-Time Data
One of the biggest advantages of weather monitoring systems and also the reason why people have
been going in for weather stations is because of the ability to get their information in real-time.

2. Accurate Local Forecast

In reality, the meteorological department may be located far from your home and weather forecasts are
made for regions, not a specific area. That’s a reason why in these instances, the weather predictions that
they give are not always the most accurate.

3. Ease Of Use
Ease to use is definitely a big advantage of the weather monitoring system. Weather stations like all
other weather devices are designed to be efficient and straightforward, therefore, everyone can use them.
It is so convenient and comfortable for users to get the most accurate information in the simplest way
possible.

1.4 Previous work or related systems; how they are used.

Before we begin a new system it is important to study the system that will be improved or replaced (if
there is one). We need to analyze how this system uses hardware, software, network and peopleresources
to convert data resources, such as transaction data, into information products.

Following are the problems associated with the previous project which led to the creation of the
proposed project:-

1. Not user-friendly: The existing system is not user-friendly because the information like humidity cloud
and wind etc are not in one place.

2. Not a good UI: The user interface of the previous systems are not that good.

WEATHER WEB APPLICATION 9

 [Document title]

Chapter 2

REQUIREMENT ANALYSIS

Functional Requirements
Functional requirements are the requirements that describe the functionalities of the

system elements. It may involve functional user requirements or functional system

requirements.

For example:

The operator shall be able to input the region to the system to view the desired weather parameters.

The system shall provide the following weather parameters: temperature, pressure, wind speed ,date /
time and humidity.

2.1 ANALYSIS STUDY

1. Lower Installation Charges:

We neither require any high-configuration systems for the smooth running of the server program nor do
we require any high-configuration systems for the smooth running of a client program. This application is
designed with ease to support any ordinary system having an internet connection.

2. Secured and Reliable:

The reliability of the system is to make sure the website does not go offline

3. Availability

The availability of the system is that the website will be active on the Internet and people

will be able to browse it.

WEATHER WEB APPLICATION 10

[Document title]

2.2 Feasibility Study

All projects are feasible if they have unlimited resources and infinite time. But the development of
software is plagued by the scarcity of resources and difficult delivery rates. It is necessary and prudent to
evaluate the feasibility of a project at the earliest possible time. The three considerations are involved in
the feasibility analysis.

2.3 Technical Feasibility

Technical feasibility centres on the existing mobile system (hardware, software…etc) and to what extent it can
support the proposed addition if the budget is a serious constraint, then the project is judged not feasible. The
technical feasibilities are an important role in our project because here we’re using HTML,CSS and JavaScript . It
requires Visual Studio Code(software) to develop this application. A easily available software and easy to use.

2.4 Economical Feasibility

This procedure is to determine the benefits and savings that are expected from a candidate system and
compare them with cost. If the benefits outweigh the cost then the decision is made to design and
implement the system. Otherwise, further justification or alterations in proposed systems have to be made
if it is having a chance of being approved. This is an ongoing effort that improves any feasibility costs
spent on this project because here we’re using open-source environments.

2.5 Operational Feasibility

People are inherently resistant to change and mobiles have been known to facilitate change. There is no
need of technical background is required to work on the application. All the information needed can be
seen with just one click

WEATHER WEB APPLICATION 11

[Document title]

2.2 USER REQUIREMENTS

The system specifications that a user may want are as follows:

1. It should be easy to understand

2. Must be interactive

3. Should provide a good user interface

4. Security should be maintained

2.3 Final Requirements

User Oriented: A system should be more user friendly not from the technical point of view

Better GUI: All the elements used in the system should be interactive in nature so that its look and feel
are not so boring that the user could get bored while using it.

Reliability: The system should be reliable and fast in processing

Data security: Access to the organizational data is not to be granted to any unknown person who is not
a part of the transaction

Confidentiality: Whatever the user is providing to the organization, the user has the full rights to
modify it and it could be not be accessed/modified without the user's permission

Better Management of information: All the information should be managed so that is the flow of the
information is to be in the right track

Presentation: The content that is to be presented to the user is to be presented in such a way that is self-
explanatory to the user and he/she is satisfied with the data.

WEATHER WEB APPLICATION 12

[Document title]

Chapter 3

DESIGN OF THE SYSTEM

3.1 Software requirements

Platform Platform Independent

The Operating System Windows 7
Framework Bootstrap
Front-End Tool Google Chrome
API OpenWeatherMap

3.1 Hardware Requirements

Processor Intel Pentium IV 2.9 GHz Other

RAM Minimum 4 GB

Graphics Integrated graphics card

Hard Disk Minimum 500 GB

3.2 System Requirements

To know the detailed system requirements an SRS has to be prepared. Software requirement specification
abbreviated as SRS is a means of translating the idea of files into a formal document. The main features
of SRS include:
 Establishing the basis for an agreement between the client and the developer.

 Producing a reference for validation of the final product. SRS assist clients in determining if the
software meets their requirements.

WEATHER WEB APPLICATION 13

[Document title]

Mainly there are six requirements which an SRS must satisfy.

(a) It should specify the external behaviour.

(b) It should specify the constraints.

(c) It should be easy to change.

(d) It should be a reference tool.

(e) It should record throughout the lifecycle.

(f) It should have the capacity to expect an undesired event.

Functional Requirements

Functional requirements are the requirements that describe the functionalities of the

system elements. It may involve functional user requirements or functional system

requirements.

For example:

The operator shall be able to input the region to the system to view the desired weather parameters.

The system shall provide the following weather parameters: temperature, pressure, wind speed &
direction, rainfall, and humidity.

3.3 Design Requirements

The main objectives of input design are:

(a) Controlling the amount of input.

WEATHER WEB APPLICATION 14

[Document title]

(b) Keeping the process simple.

(c) The best thing in the input design is to achieve all the objectives mentioned in the simplest manner
possible.

The main objectives of output design are:

(a) Identifying the specific outputs.

The primary goal of the system analysis is to improve the efficiency of the existing system. For that the
study of specification of the requirements is very essential. For the development of the new system, a
preliminary survey of the existing system will be conducted. Investigation done whether the upgradation
of the system into an application program could solve the problems and eradicate the inefficiency of the
existing system

WEATHER WEB APPLICATION 15

[Document title]

3.5 DATA FLOW DIAGRAM (DFD)

A data flow diagram (DFD) is a graphical representation of the "flow" of data through an information
system, modelling its process aspects. Often they are a preliminary step used to create an overview of
the system which can later be elaborated. DFDs can also be used for the visualization of data processing
(structured design).

FIG 1: LEVEL ZERO DFD

FIG 2: LEVEL ONE DFD

WEATHER WEB APPLICATION 16
[Document title]

FIG 3: USE CASE DIAGRAM

WEATHER WEB APPLICATION 17

[Document title]

FIG 4: APPLICATION FLOWCHART

WEATHER WEB APPLICATION 18

 CHAPTER 4

IMPLEMENTATION AND CODING

14
WEATHER WEB APPLICATION 20
4.1 OPERATING SYSTEM

Platform Independent: Since the project is done completely in HTML, CSS and JavaScript, it also
executes the main properties of the language. The application is platform-independent.

4.2 Languages used

HTML
The HyperText Markup Language or HTML is the standard markup language for documents
designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style
Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a web page semantically and
originally included cues for the appearance of the document.

CSS

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look
and formatting of a document written in markup language. It provides an additional feature to HTML. It
is generally used with HTML to change the style of web pages and user interfaces. It can also be used
with any kind of XML documents including plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web
applications and user interfaces for many mobile applications.

JavaScript
JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as
a part of web pages, whose implementations allow client-side script to interact with the user and make
dynamic pages. It is an interpreted programming language with object-oriented capabilities.

WEATHER WEB APPLICATION 21

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.

4.3 CODING
HTML
<!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,height=device-height, initial-scale=1.0">

<title>Weather</title>

<link rel = "icon" href = "mountain_logo.png" type = "image/x-icon">

<link rel="stylesheet" type="text/css" href="css/[Link]">

<link rel="stylesheet" type="text/css" href="css/[Link]">

<link href="[Link] rel="stylesheet"

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">

<link rel="stylesheet" href="[Link]

integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85p
km9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>

<body>

<div class="position-relative main_content">

<div class="bg" class="container">

<div class="logo mt-4 ms-4 mt-lg-5 ms-lg-5 position-absolute">

<h5>the weather</h5>

WEATHER WEB APPLICATION 22

 </div>

<!-- display on small and mid screens -->

<div id="div1" class="temperature-small d-lg-none d-sm-flex d-flex position-absolute ms-4 shimmer">

<div class="degree text-white mt-auto"><p id="degree_small">16&#176</p></div>

<div class="place-time">

<div class="place text-white ms-3"><p id="place_small">London</p></div>

<div class="time d-flex text-white"><h6 id="time_small" class="ms-3">06:09</h6><h6

id="day_small" class="ms-1">Monday</h6><h6 id="date_small" class="ms-1">9</h6><h6 id="month_small"
class="ms-1">Sep</h6><h6 id="year_small" class="ms-1">21</h6></div>

</div>

<div class="icon-name ms-2">

<!-- <div class="weather-icon"><img id="weather_icon_small" src="../icons/day/[Link]"

alt="#"></div> -->

<div class="weather-name text-white justify-content-center d-flex pt-1 ms-2 mt-4 animate-

character" ><p id="weather_name_small">Cloudy</p></div>

</div>

</div>

<div class="Search-small d-lg-none position-absolute top-50 start-0">

<div class="input-group search-bar ">

<div id="search-autocomplete" class="form-outline ms-auto">

<input type="search" id="form1" Placeholder="Another Location..." class="form-control

shadow-none " style="color: white;"/>

<!-- <label class="form-label" for="form1">Search</label> -->

<div class="line"></div>

</div>

<button type="button" onclick="getWeather(input,'in')" class="button-icon"

id="button_color_small">

<i class="fas fa-search text-white"></i>

</button>

WEATHER WEB APPLICATION 23

 </div>

<div class="cities ms-4">

<ul id="city_ul_small">

<!-- <li class="mt-4"><p>Birmingham</p></li>

<li class="mt-4"><p>Manchester</p></li>

<li class="mt-4"><p>New York</p></li>

<li class="mt-4"><p>California</p></li> -->

</ul>

</div>

<div class="line2 ms-5"></div>

<div class="details">

<ul>

<h4 class="ms-3 text-white mt-4 mb-4">Weather Details</h4>

<li class="d-flex justify-content-between ms-3 me-5 ">

<span><p>Cloud</p></span>

<span class="cloud"><p id="cloud_small">89%</p></span>

</li>

<li class="d-flex justify-content-between ms-3 me-5 ">

<span><p>Humidity</p></span>

<span class="humidity"><p id="humidity_small">64%</p></span>

</li>

<li class="d-flex justify-content-between ms-3 me-5 ">

<span><p>Wind</p></span>

<span class="wind"><p id="wind_small">8km/h</p></span>

</li>

</ul>

</div>

</div>

WEATHER WEB APPLICATION 24

 <!-- display above large screens -->

<div class="Search d-none d-lg-block ms-auto">

<div class="input-group search-bar ">

<div id="search-autocomplete" class="form-outline ms-auto">

<input type="search" id="form1Large" Placeholder="Another Location . . ." class="form-control

shadow-none " style="color: white;" />

<!-- <label class="form-label" for="form1">Search</label> -->

<div class="line"></div>

</div>

<button type="button" onclick="getWeather(input,'in')" class="button-icon"

id="button_color_large">

<i class="fas fa-search text-white"></i>

</button>

</div>

<div class="cities ms-4">

<ul id="city_ul_large">

<!-- <li class="mt-5"><p>Birmingham</p></li>

<li class="mt-5"><p>Manchester</p></li>

<li class="mt-5"><p>New York</p></li>

<li class="mt-5 mb-5"><p>California</p></li> -->

</ul>

</div>

<div class="line2 ms-5"></div>

<div class="details">

<ul>

<h4 class="ms-3 mt-5 mb-5 text-white">Weather Details</h4>

<li class="d-flex justify-content-between ms-3 me-5 mt-4">

<span><p>Cloud</p></span>

WEATHER WEB APPLICATION 25

 <span class="cloud"><p id="cloud_large">89%</p></span>

</li>

<li class="d-flex justify-content-between ms-3 me-5 mt-4">

<span><p>Humidity</p></span>

<span class="humidity"><p id="humidity_large">64%</p></span>

</li>

<li class="d-flex justify-content-between ms-3 me-5 mt-4">

<span><p>Wind</p></span>

<span class="wind"><p id="wind_large">8km/h</p></span>

</li>

</ul>

</div>

</div>

</div>

<div class="temperature d-none d-lg-flex position-absolute d-flex align-items-center bottom-0 start-0 mb-5
ms-5 shimmer">

<div class="degree text-white"><p id="degree_large">16&#176</p></div>

<div class="place-time me-4">

<div class="place text-white"><h1 id="place_large">London</h1></div>

<div class="time d-flex text-white"><h5 id="time_large" class="ms-0">06:09</h5><h5 id="day_large"

class="ms-1">Monday</h5><h5 id="date_large" class="ms-2">9</h5><h5 id="month_large"
class="ms-1">Sep</h5><h5 id="year_large" class="ms-1">21</h5></div>

</div>

<div class="icon-name">

<!-- <div class="weather-icon"><img id="weather_icon_large" src="" alt="#"></div> -->

<div class="weather-name text-white ms-2 animate-character"><h5

id="weather_name_large">Cloudy</h5></div>

</div>

</div>

</div>

WEATHER WEB APPLICATION 26

 <script src="./js/[Link]"></script>

<script src="./js/[Link]"></script>

<script src="[Link]
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/
3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="[Link] integrity="sha384-

MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

</body>

</html>

CSS
@import url('[Link]
family=Montserrat&family=Quicksand:wght@300;400;500;600;700&family=Roboto:wght@400;700;9
00&display=swap');

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body{

font-family: 'Rubik',sans-serif;

background: #111;

WEATHER WEB APPLICATION 27

 /* background-image: url("../images/[Link]");

background-size: cover;

background-position: center; */

.imageCycle1{

background-image: url("../images/[Link]");

background-size: cover;

background-position: center;

.imageCycle2{

background-image: url("../images/[Link]");

background-size: cover;

background-position: center;

.imageCycle3{

background-image: url("../images/[Link]");

background-size: cover;

background-position: center;

.imageCycle4{

background-image: url("../images/[Link]");

background-size: cover;

background-position: center;

WEATHER WEB APPLICATION 28

}

.imageCycle7{

background-image: url("../images/[Link]");

background-size: cover;

background-position: center;

.imageCycle8{

background-image: url("../images/[Link]");

background-size: cover;

background-position: center;

.main-content{

height: 100%;

.bg{

width: 100%;

height: 100vh;

display: flex;

justify-content: space-between;

transition: 500ms;

opacity: 1;

WEATHER WEB APPLICATION 29

.logo{

/* background-color: red; */

color: white;

.Search{

width: 30%;

height: 100vh;

background: rgba(110, 110, 110, 0.25);

box-shadow: rgba(0, 0, 0, 0.3);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

border: 1px solid rgba(255,255,255,0.18);

/* opacity: 0.5; */

.Search-small{

width: 100%;

/* height: 100%; */

background: rgba(110, 110, 110, 0.25);

box-shadow: rgba(0, 0, 0, 0.3);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

border: 1px solid rgba(255,255,255,0.18);

WEATHER WEB APPLICATION 30

 /* opacity: 0.5; */

p{

font-weight: 700;

font-size: 7rem;

font-family: 'Rubik',sans-serif;

.form-outline{

width: 70%;

display: flex;

flex-direction: column;

justify-content: flex-end;

#form1{

background: none;

border: none;

#form1Large{

background: none;

border: none;

WEATHER WEB APPLICATION 31

}

.search-bar{

height: 12%;

.button-icon{

width: 20%;

border: none;

.line{

background-color: white;

height: 1px;

width: 85%;

.line2{

background-color: white;

height: 1px;

width: 78%;

margin-top: 1.5rem;

WEATHER WEB APPLICATION 32

}

input[type="search"]::placeholder {

/* Firefox, Chrome, Opera */

color: white;

li{

list-style: none;

.cities p{

/* margin-top: 2rem; */

font-size: 18px;

font-weight: 100;

color: white;

.details p{

/* margin-top: 2rem; */

font-size: 18px;

WEATHER WEB APPLICATION 33

 font-weight: 100;

color: white;

#city_ul_small{

font-size: 18px;

font-weight: 100;

color: white;

cursor: pointer;

#city_ul_large{

font-size: 18px;

font-weight: 100;

color: white;

cursor: pointer;

.weather-icon{

background: rgba(255, 255, 255, 0.25);

box-shadow: rgba(255, 255, 255, 0.3);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

border: 1px solid rgba(255,255,255,0.18);

WEATHER WEB APPLICATION 34

}

.temperature-small .degree p{

font-weight: 400;

font-size: 50px;

.temperature-small .place-time .place p{

font-weight: 900;

font-size: 30px;

display: inline;

/* text-size-adjust: auto; */

.time p{

width: 100%;

font-weight: 100;

font-size: 15px;

display: inline;

.weather-name p{

font-weight: 900;

font-size: 20px;

WEATHER WEB APPLICATION 35

.temperature-small{

top: 5rem;

#button_color_large{

background-color: black;

#button_color_small{

background-color: black;

input {

caret-color: white;

.animate-character

background: #fffc00; /* fallback for old browsers */

background: -webkit-linear-gradient(to right, #ffffff, #fffc00); /* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to right, #ffffff, #fffc00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+,
Opera 12+, Safari 7+ */

WEATHER WEB APPLICATION 36

 background-size: auto auto;

background-clip: border-box;

background-size: 200% auto;

color: #fff;

background-clip: text;

/* text-fill-color: transparent; */

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation: textclip 2s linear infinite;

display: inline-block;

font-size: 20px;

@keyframes textclip {

to {

background-position: 200% center;

#weather_name_large{

font-size: 40px;

font-weight: 600;

WEATHER WEB APPLICATION 37

JavaScript
let input;

let cities;

const temp_small = [Link]('degree_small');

const temp_large = [Link]('degree_large');

const place_name_small = [Link]('place_small');

const place_name_large = [Link]('place_large');

const time_small = [Link]('time_small');

const time_large = [Link]('time_large');

const day_small = [Link]('day_small');

const day_large = [Link]('day_large');

const date_small = [Link]('date_small');

const date_large = [Link]('date_large');

const month_small = [Link]('month_small');

const month_large = [Link]('month_large');

const year_small = [Link]('year_small');

const year_large = [Link]('year_large');

const weather_name_small = [Link]('weather_name_small');

const weather_name_large = [Link]('weather_name_large');

WEATHER WEB APPLICATION 38

const cloud_small = [Link]('cloud_small');

const cloud_large = [Link]('cloud_large');

const humidity_small = [Link]('humidity_small');

const humidity_large = [Link]('humidity_large');

const wind_small = [Link]('wind_small');

const wind_large = [Link]('wind_large');

const form1 = [Link]('form1');

const formLarge = [Link]('form1Large');

const ulSmall = [Link]("city_ul_small");

const ulLarge = [Link]("city_ul_large");

const search_button_small = [Link]("button_color_small");

const search_button_large = [Link]("button_color_large");

//31c3cdeea4869ee00e5589a3b2aa6aab

[Link] = async (event) => {

cloud_small.innerHTML = 50+"%"

cloud_large.innerHTML = 50+"%"

getWeather('New Delhi','in');

$(document).ready(function(){

var
classCycle=['imageCycle1','imageCycle2','imageCycle3','imageCycle4','imageCycle7','imageCycle8'];

WEATHER WEB APPLICATION 39

 var randomNumber = [Link]([Link]() * [Link]);

var button_color_small= [Link]("button_color_small");

var button_color_large= [Link]("button_color_large");

[Link](randomNumber);

if(randomNumber==0){

button_color_small.[Link] = "#0d6efd";

button_color_large.[Link] = "#0d6efd";

}else if(randomNumber==1){

button_color_small.[Link] = "#2C3639";

button_color_large.[Link] = "#2C3639";

else if(randomNumber==2){

button_color_small.[Link] = "#1A1D24";

button_color_large.[Link] = "#1A1D24";

else if(randomNumber==3){

button_color_small.[Link] = "#191E29";

button_color_large.[Link] = "#191E29";

else if(randomNumber==4){

button_color_small.[Link] = "#FF7615";

button_color_large.[Link] = "#FF7615";

WEATHER WEB APPLICATION 40

 else{

button_color_small.[Link] = "#0F3D3E";

button_color_large.[Link] = "#0F3D3E";

var classToAdd = classCycle[randomNumber];

$('body').addClass(classToAdd);

});

readTextFile("./js/[Link]",function(text){

cities = [Link](text);

[Link](cities);

showInitialCities();

})

function setData(data){

const temp = convertToCelcius([Link]);

const humidity = [Link];

const cloud = [Link];

const wind = [Link];

temp_small.innerHTML = temp+'&#176';

temp_large.innerHTML = temp+'&#176';

WEATHER WEB APPLICATION 41

 humidity_small.innerHTML = humidity+"%";

humidity_large.innerHTML = humidity+"%";

cloud_small.innerHTML = cloud+"%";

cloud_large.innerHTML = cloud+"%";

wind_small.innerHTML = wind+"km/h";

wind_large.innerHTML = wind+"km/h";

place_name_small.innerHTML = [Link];

place_name_large.innerHTML = [Link];

weather_name_large.innerHTML = [Link][0].main;

weather_name_small.innerHTML = [Link][0].main;

// const icon = [Link][0].[Link]([Link][0].[Link]-1,"n");

// const src = "[Link]

// [Link](src);

// icon_small.src = src;

// icon_large.src =src;

function convertToCelcius(temp){

return (temp - 273.15).toFixed(0);

async function getWeather(city,country){

WEATHER WEB APPLICATION 42

 if([Link] > 0){

const weatherResponse = await fetch(config.base_url+'data/2.5/weather?

q='+city+','+country+'&APPID='+[Link]);

const data = await [Link]();

[Link](data);

setData(data);

[Link] = function(index, replacement) {

return [Link](0, index) + replacement + [Link](index + [Link]);

const date = new Date();

// ✅ Get a String representing the given Date using UTC (= GMT) time zone.

// 👉 "Fri, 14 Jan 2022 [Link] GMT"

var timeZone = [Link]().resolvedOptions().timeZone

[Link](timeZone)

[Link]("en-US", {timeZone: timeZone})

// const result = [Link]();

// [Link](result)

const day = ([Link]()+1);

WEATHER WEB APPLICATION 43

[Link](date);

var d = [Link]() + "/" + ([Link]() + 1) + "/" + [Link]();

const t = [Link]().split(" ");

[Link](t);

const hour = t[4].split(":")[0];

const min = t[4].split(":")[1];

time_large.innerHTML = hour+":"+min;

time_small.innerHTML = hour+":"+min;

day_large.innerHTML = "-"+t[0]+",";

day_small.innerHTML = "-"+t[0];

date_large.innerHTML = t[2];

date_small.innerHTML = t[2]+",";

month_large.innerHTML = t[1];

month_small.innerHTML = day;

year_large.innerHTML = t[3];

year_small.innerHTML = t[3];

[Link]('input', updateValue);

[Link]('input', updateValue);

function showInitialCities() {

const i = "";

const result = [Link](city => [Link]().includes([Link]()));

[Link](result);

removeItems();

WEATHER WEB APPLICATION 44

 let length;

if([Link]>4){

length = 4;

}else{

length = [Link];

for(let i = 0; i<length; i++){

addCity(result[i]);

function updateValue(e) {

[Link](e);

const i = [Link];

//input=i;

[Link](i);

const result = [Link](city => [Link]().includes([Link]()));

[Link](result);

removeItems();

let length;

if([Link]>4){

length = 4;

}else{

length = [Link];

WEATHER WEB APPLICATION 45

 }

for(let i = 0; i<length; i++){

addCity(result[i]);

if(length<4){

const tempCities = [Link](city => ![Link]().includes([Link]()));

for(let i = 0; i<4-length; i++){

addCity(tempCities[i]);

function readTextFile(file, callback) {

var rawFile = new XMLHttpRequest();

[Link]("application/json");

[Link]("GET", file, true);

[Link] = function() {

if ([Link] === 4 && [Link] == "200") {

callback([Link]);

[Link](null);

WEATHER WEB APPLICATION 46

function addCity(city) {

const br = [Link]("br");

const liSmall = [Link]("li");

[Link]("mt-4");

[Link]("fs-5");

[Link]("fw-bolder");

[Link]([Link]([Link]));

[Link]('id','li_1');

[Link](liSmall);

const liLarge = [Link]("li");

[Link]("mt-4");

[Link]("fs-5");

[Link]("fw-bolder");

[Link]([Link]([Link]));

[Link]('id','li_2');

[Link](liLarge);

[Link](ulLarge);

[Link]("click", function(){

input = [Link]

[Link] =input

getWeather([Link],'in');

WEATHER WEB APPLICATION 47

 });

[Link]("click", function(){

input = [Link]

[Link] =input

getWeather([Link],'in');

});

function removeItems() {

[Link] = '';

[Link] = '';

WEATHER WEB APPLICATION 48

 Chapter 5

TESTING & TEST RESULTS

5.1 SOFTWARE TESTING

Software testing is a critical element of software quality assurance and represents the ultimate review of
specification design and coding. Testing is an exposure of a system to trial input to see whether the
software meets the correct output. Testing cannot be determined whether the software meets the user’s
needs, only whether it appears to conform to requirements. Testing can show that a system is free of errors,
only that it contains errors. Testing finds errors, it does not correct errors. Software success is a quality
product, on time and within cost. Testing can reveal critical mistakes. Testing should, therefore,

Validate Performance

Detects Errors

Identify Inconsistencies

5.2 Test Objective

 There is strong evidence that effective requirement management leads to overall project cost
savings. The three primary reasons for this are,

 Requirement errors typically cost well over 10 times more to repair than other errors.

 Requirement errors typically comprise over 40% of all errors in a software project.

 A small reduction in the number of requirement errors pays a big dividend in avoided rework
costs and schedule delays.

 Systems are not designed as entire systems nor are they tested as single systems the analyst must
perform both unit and system testing. For this different level of testing are used:

WEATHER WEB APPLICATION 49

5.2.1 Unit Testing

In unit testing Module is tested separately and the programmer simultaneously along with the coding of
the module performs it.

In unit testing the analyst tests the programs making up a system. For this reason, unit testing is sometime
called program testing. Unit testing gives stress on modules independently of one another, to find errors.
This helps the tester in detecting errors in coding and logic that are contained within that module alone.
The errors resulting from the interaction between modules are initially avoided.

Unit testing can be performed from the bottom up, Starting with smallest and lowest-level modules and
proceeding one at a time., for each module in Bottom-up testing a short program is used to execute the
module and provides the needed data, so that the module is asked to perform the way it will when
embedded within the larger system.

5.2.2 System Testing

This is performed after the system is put together. The system is tested against the system requirement to
check if all the requirements are met and if the system performs by specifying the requirements.

Testing is an important function of the success of the system. System testing makes a logical assumption
that if all the parts of the system are correct, the goal will be successfully activated. Another reason for
system testing is its utility as a user-oriented vehicle before implementation.

The function of testing is to detect defects in the Software. The main goal of testing is to uncover
requirement, design and coding errors in the programs. The types of testing are discussed below:

5.2.3 MODULE TESTING

Module tests are typically dynamic white-box tests. This requires the execution of the software or parts of
the software. The software can be executed in the target system, an emulator, simulator or any other
suitable test environment.
The focus of the tests is:
 Set up of regression tests. This means the test environment once set up for a function can be re-
used to check its performance e.g. after maintenance.

WEATHER WEB APPLICATION 50

  Coverage of the relevant state of the art test methods like equivalence class building, boundary
value analysis and condition coverage are used.

5.2.3 INTEGRATION TESTING

“If they all work individually, they should work when we put them together.” The problem of course is
“putting them together “. This can be done in two ways:
1. Top down integration: Modules are integrated by moving downwards through the control
hierarchy, beginning with main control module are incorporated into the structure in either a depth
first or breadth first manner.
2. Bottom up integration: It begins with construction and testing with atomic modules i.e. modules
at the lowest level of the program structure. Because modules are integrated from the bottom up,
processing required for the modules subordinate to a given level is always available and the need
of stubs is eliminated.

5.2.4 BLACK-BOX TESTING

Black-box testing is a method of software testing that tests the functionality of an application as opposed
to its internal structures or workings.
The system is tested just to assure whether it is meeting all the expectations or requirements from it, tester
is not concerned with the internal logic of the module or system to be tested. Some inputs aregiven
to system and it is observed whether the system is working as per the client’s requirements or not or
according to the requirements specified in SRS document. Specific knowledge of the application's
code/internal structure and programming knowledge in general is not required.
Test cases are built around specifications and requirements, i.e., what the application is supposed to do.
It uses external descriptions of the software, including specifications, requirements, and designs to derive
test cases. These tests can be functional or non-functional, though usually functional. The test designer
selects valid and invalid inputs and determines the correct output. There is no knowledge of the test object's
internal structure. This method of test can be applied to all levels of software testing: unit,
integration, functional, system and acceptance. It typically comprises most if not all testing at higher
levels, but can also dominate unit testing as well. Black box testing or functional testing is used to check
that the outputs of a program, given certain inputs, conform to the functional specification of

WEATHER WEB APPLICATION 51

the program. The term black box indicates that the tester does not examine the internal implementation
of the program being executed

5.2.5 WHITE-BOX TESTING

A software testing technique where by explicit knowledge of the internal workings of the item being tested
are used to select the test data. Unlike black box testing, white box testing uses specific knowledge of
programming code to examine outputs. The test is accurate only if the tester knows what the program is
supposed to do. He or she can then see if the program diverges from its intended goal. White box testing
does not account for errors caused by omission, and all visible code must also be readable.
Contrary to black-box testing, software is viewed as a white-box, or glass-box in white-box testing, as the
structure and flow of the software under test are visible to the tester. Testing plans are made according to
the details of the software implementation, such as programming language, logic, and styles. Test cases
are derived from the program structure. White-box testing is also called glass-box testing, logic-driven
testing or design-based testing. There are many techniques available in white-box testing, because the
problem of intractability is eased by specific knowledge and attention on thestructure of the software
under test.

WEATHER WEB APPLICATION 52

5.2.6 VALIDATION TESTING

Fig 1

By default, it will show the weather in Delhi, if we haven’t added any specified location

WEATHER WEB APPLICATION 53

 Fig 2

Fig 3

It will not show any other location different to Delhi if our input is wrong.

WEATHER WEB APPLICATION 54

 Chapter 6

CONCLUSION

6.1 CONCLUSION

Now a day’s there is a big demand of different types of applications, which is because IT has become the
main part of our New World. There is a big need of different applications. People want application for
every specific task from work to entertainment. We have developed the application “Weather WebApp”
which works easy on any given web browser.

The application has been tested and found to be working as per the given criteria. It can be safely
concluded that the application possesses a highly efficient UI system and is working properly and meeting
to all the requirements of the user. The application gives the user maximum flexibility in the types of touch
and other device movements.

6.2 FUTURE SCOPE

Every project whether large or small has some limitations no matter how diligently developed.
In some cases, limitations are small while in other cases they may be broad also. The new system has got
some limitations. Major areas where modifications can be done are as follows:

 Our system does not have weather information for foreign countries or cities.

 There is no provision for complaint handling so further it can be added.

WEATHER WEB APPLICATION 55

 BIBLOGRAPHY
 [Link]

 http:// www .[Link]

 [Link]

WEATHER WEB APPLICATION 56