lOMoARcPSD|35402258

Minor Project Report

Bachelors of Computer Applications (Vivekananda Institute of Professional Studies)
Studocu is not sponsored or endorsed by any college or university
Downloaded by Moses Karisa ([email protected])

PROJECT REPORT
ON
"Weather Web App"
Submitted in partial fulfilment of the
Requirement for the award of the degree of
Bachelor of Computer Application

Submitted To Submitted
By
Dr Vani Aditya
Ray(006)
VSIT Adarsh
Kr. Singh(005)
BCA-5 EA
(Batch: 2020-2023)
Vivekananda Institute of Professional Studies
(Affiliated to Guru Gobind Singh Indraprastha University) CERTIFICATE
This is to certify that we Aditya Ray and Adarsh Kr. Singh of BCA 5th Semester from
Vivekananda Institute of Professional Studies, Delhi has presented this project
work entitled "Weather WebApp", an online auction website in partial fulfilment of
the requirements for the award of the degree of Bachelor of Computer Applications
under our supervision and guidance.

ACKNOWLEDGEMENT
It is our proud privilege to express our profound gratitude to the entire
management of Vivekananda Institute of Professional Studies and the teachers of the
institute for providing us with the opportunity to avail ourselves of the excellent
facilities and infrastructure. The knowledge and values inculcated have proved to
be of immense help at the very start of my career. Special thanks to the Hon'ble
Founder, Vivekananda Institute of Professional Studies, Delhi for having provided
us with an excellent infrastructure at VSIT.
I am grateful to Prof. (Dr.) Supriya Madan (Dean, VSIT), and Dr Vani for their
astute guidance, constant encouragement and sincere support for this project work.
Sincere thanks to all my family members, seniors and friends for their support and
assistance throughout the project.
Aditya Ray and Adarsh Kr Singh
1. INTRODUCTION 5
1.1.Objec*ve of the System 5
1.2.Jus*fica*on and need for the system 5
1. 3.Advantage of the system
6
1.4 Previous work or related
systems, how they
are used. 6
2 REQUIREMENT ANALYSIS 7

2.1 Analysis Study 7-8

2.2 User Requirements 9
2.3 Final Requirements 9 10
3 DESIGN OF THE SYSTEM
3.1 Hardware, SoJware requirements
 10
3.2 System
requirements 10-11
3.3 Design
Requirement 11-12

3.4 DFDs 13
4 IMPLEMENTATION & CODING 14-15
16
4.1 Opera*ng System 16
4.2. Languages
17-43
4.3 Coding
44
5 TESTING & TEST RESULTS 44-47 1. SoJware Tes*ng and Objec*ve of Tes*ng
5.2 Sample test data/ Output screen printouts 48-49
etc.
6 CONCLUSION 50
1. Conclusion 50
50
2. Future Scope

51
Biblography

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.
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 people resources 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.
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.
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
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 selfexplanatory to the user and he/she is satisfied with the
data.

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 APIOpenWeatherMap3.1 Hardware Requirements
ProcessorIntel Pentium IV 2.9 GHz Other RAMMinimum 4 GBGraphicsIntegrated
graphics cardHard DiskMinimum 500 GB3.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.
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.
Func*onal Requirements
Func)onal requirements are the requirements that describe the func)onali)es of the
system elements. It may involve func)onal user requirements or func)onal system
requirements.
For example:
The operator shall be able to input the region to the system to view the desired
weather parameters.
The system shall provide the following weather parameters: temperature, pressure,
wind speed & direc)on, rainfall, and humidity.
3.3 Design Requirements
The main objectives of input design are:
(a) Controlling the amount of input
(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

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 3.4 DFD
A DFD shows what kinds of information will be input into and output from the
system, where the data will come from and go to, and where the data will be stored.
It does not show information about the timing of processes, or information about
whether processes will operate in sequence or in parallel (which is shown on a
flowchart).
Chapter 4
IMPLEMENTATION AND CODING

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.
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/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive-style.css">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.1.2/css/all.min.css"
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>
</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/119.png" alt="#"></div> -->
<div class="weather-name text-white justify-content-center
d-flex pt-1 ms-2 mt-4 animatecharacter" ><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>
</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>
<!-- 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>
<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>
<script src="./js/index.js"></script>
<script src="./js/api.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/
+/ 3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?
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;
/* background-image: url("../images/bg1.jpg"); background-size: cover;
background-position: center; */
}
.imageCycle1{ background-image: url("../images/bg1.jpg"); background-size:
cover; background-position: center;

}
.imageCycle2{ background-image: url("../images/bg2.jpg"); background-size:
cover; background-position: center;
}
.imageCycle3{ background-image: url("../images/bg3.jpg"); background-size:
cover; background-position: center;
}
.imageCycle4{ background-image: url("../images/bg4.jpg"); background-size:
cover; background-position: center;
}
.imageCycle7{ background-image: url("../images/bg7.jpg"); background-size:
cover; background-position: center;
}
.imageCycle8{ background-image: url("../images/bg8.jpg"); 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;

}
.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); /* 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;

}
.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;
} 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; 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); }
.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;
}
.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+ */
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;
}
JavaScript
let input; let cities;
const temp_small = document.getElementById('degree_small'); const temp_large =
document.getElementById('degree_large'); const place_name_small =
document.getElementById('place_small'); const place_name_large =
document.getElementById('place_large'); const time_small =
document.getElementById('time_small'); const time_large =
document.getElementById('time_large'); const day_small =
document.getElementById('day_small'); const day_large =
document.getElementById('day_large'); const date_small =
document.getElementById('date_small'); const date_large =
document.getElementById('date_large'); const month_small =
document.getElementById('month_small'); const month_large =
document.getElementById('month_large'); const year_small =
document.getElementById('year_small'); const year_large =
document.getElementById('year_large'); const weather_name_small =
document.getElementById('weather_name_small'); const weather_name_large =
document.getElementById('weather_name_large'); const cloud_small =
document.getElementById('cloud_small'); const cloud_large =
document.getElementById('cloud_large'); const humidity_small =
document.getElementById('humidity_small'); const humidity_large =
document.getElementById('humidity_large'); const wind_small =
document.getElementById('wind_small'); const wind_large =
document.getElementById('wind_large'); const form1 =
document.getElementById('form1'); const formLarge =
document.getElementById('form1Large'); const ulSmall =
document.getElementById("city_ul_small"); const ulLarge =
document.getElementById("city_ul_large"); const search_button_small =
document.getElementById("button_color_small"); const search_button_large =
document.getElementById("button_color_large");
//31c3cdeea4869ee00e5589a3b2aa6aab
window.onload = 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']; var randomNumber = Math.floor(Math.random() *
classCycle.length); var button_color_small=
document.getElementById("button_color_small"); var button_color_large=
document.getElementById("button_color_large"); console.log(randomNumber);
if(randomNumber==0){ button_color_small.style.backgroundColor =
"#0d6efd"; button_color_large.style.backgroundColor = "#0d6efd";
}else if(randomNumber==1)
{ button_color_small.style.backgroundColor = "#2C3639";
button_color_large.style.backgroundColor = "#2C3639";
}
else if(randomNumber==2)
{ button_color_small.style.backgroundColor = "#1A1D24";
button_color_large.style.backgroundColor = "#1A1D24";
}
else if(randomNumber==3)
{ button_color_small.style.backgroundColor = "#191E29";
button_color_large.style.backgroundColor = "#191E29";
}
 else if(randomNumber==4)
{ button_color_small.style.backgroundColor = "#FF7615";
button_color_large.style.backgroundColor = "#FF7615";
}
else{
button_color_small.style.backgroundColor = "#0F3D3E";
button_color_large.style.backgroundColor = "#0F3D3E";
}
var classToAdd = classCycle[randomNumber];

$('body').addClass(classToAdd);
});
readTextFile("./js/cities.json",function(text){ cities =
JSON.parse(text); console.log(cities); showInitialCities();
}) }
function setData(data){ const temp = convertToCelcius(data.main.temp);
const humidity = data.main.humidity; const cloud = data.clouds.all; const
wind = data.wind.speed; temp_small.innerHTML = temp+'&#176';
temp_large.innerHTML = temp+'&#176'; 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 = data.name;
place_name_large.innerHTML = data.name; weather_name_large.innerHTML =
data.weather[0].main; weather_name_small.innerHTML = data.weather[0].main;
// const icon = data.weather[0].icon.replaceAt(data.weather[0].icon.length-
1,"n");
// const src = "http://openweathermap.org/img/w/"+icon+".png";
// console.log(src);
// icon_small.src = src;
// icon_large.src =src;
}
function convertToCelcius(temp){ return (temp - 273.15).toFixed(0);
}
async function getWeather(city,country){
if(city.length > 0){
const weatherResponse = await fetch(config.base_url+'data/2.5/weather?
q='+city+','+country+'&APPID='+config.apiKey); const data = await
weatherResponse.json(); console.log(data); setData(data);
}

}
String.prototype.replaceAt = function(index, replacement) { return
this.substring(0, index) + replacement + this.substring(index +
replacement.length);
}
const date = new Date();
// ? Get a String representing the given Date using UTC (= GMT) time zone.
// ?? "Fri, 14 Jan 2022 17:30:20 GMT" var timeZone =
Intl.DateTimeFormat().resolvedOptions().timeZone console.log(timeZone)
date.toLocaleString("en-US", {timeZone: timeZone})
// const result = date.toUTCString();
// console.log(result) const day = (date.getMonth()+1); console.log(date); var d =
date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate(); const t =
date.toString().split(" "); console.log(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];
form1.addEventListener('input', updateValue); formLarge.addEventListener('input',
updateValue); function showInitialCities() { const i = ""; const result =
cities.filter(city => city.name.toLowerCase().includes(i.toLowerCase()));
console.log(result); removeItems();
let length; if(result.length>4){ length =
4; }else{ length = result.length;
} for(let i = 0; i<length; i++){ addCity(result[i]);
}
}
function updateValue(e) { console.log(e); const i = e.target.value;
//input=i; console.log(i); const result = cities.filter(city =>
city.name.toLowerCase().includes(i.toLowerCase())); console.log(result);
removeItems(); let length; if(result.length>4){ length =
4; }else{ length = result.length;
} for(let i = 0; i<length; i++){ addCity(result[i]);
}
if(length<4){ const tempCities = cities.filter(city => !
city.name.toLowerCase().includes(i.toLowerCase())); for(let i = 0; i<4-
length; i++){ addCity(tempCities[i]);
}
}
} function readTextFile(file, callback) { var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json"); rawFile.open("GET", file, true);
rawFile.onreadystatechange = function() { if (rawFile.readyState === 4 &&
rawFile.status == "200") { callback(rawFile.responseText);
}
}
rawFile.send(null);
}
function addCity(city) { const br = document.createElement("br");
const liSmall = document.createElement("li"); liSmall.classList.add("mt-
4"); liSmall.classList.add("fs-5"); liSmall.classList.add("fw-bolder");
liSmall.appendChild(document.createTextNode(city.name));
liSmall.setAttribute('id','li_1'); ulSmall.appendChild(liSmall); const
liLarge = document.createElement("li"); liLarge.classList.add("mt-4");
liLarge.classList.add("fs-5"); liLarge.classList.add("fw-bolder");
liLarge.appendChild(document.createTextNode(city.name));
liLarge.setAttribute('id','li_2'); ulLarge.appendChild(liLarge);
console.log(ulLarge); liLarge.addEventListener("click", function(){
input = city.name formLarge.value =input
getWeather(city.name,'in');
});
liSmall.addEventListener("click", function(){ input = city.name
form1.value =input getWeather(city.name,'in');
}); }
function removeItems() {

ulSmall.innerHTML = ''; ulLarge.innerHTML = '';

}
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:
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 reused to check its performance e.g. after maintenance.
� 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 are given 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 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 the structure of the software under test.
5.2.6 VALIDATION TESTING

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

Fig 2

Fig 3
It will not show any other loca)on different to Delhi if our input is wrong.
Chapter 6
CONCLUSION
6.1CONCLUSION
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.
BIBLOGRAPHY
� http://www.w3schools.com
� http:// www .stackoverflow.com
� http://wikipedia.com

lOMoARcPSD|35402258

lOMoARcPSD|35402258

2
Downloaded by Moses Karisa ([email protected])

Downloaded by Moses Karisa ([email protected])

lOMoARcPSD|35402258

Downloaded by Moses Karisa ([email protected])