lOMoARcPSD|7058505

MINOR PROJECT
ON
“Weather Whimsy” -The Wacky Weather
Telling Website!

Submitted in partial fulfillment of the Requirement for the

award of the degree of
Master in Computer Application
By

Under the guidance of Submitted By

Prof. DEBRUPA IMBESAT FIRDOUS
PAL Roll No. 434122020036
Registration No. 221270510017

Narula Institute of Technology

NOV-2023
81, Nilgunj Road, Agarpara
Kolkata - 700109
West Bengal

１
 lOMoARcPSD|7058505

CERTIFICATE

This is to certify that me Imbesat Firdous of MCA 3rd Semester from Narula Institute of
technology, Kolkata has presented this project work entitled “Weather Whimsy”-The
Wacky Weather Telling Website!, an online auction website in partial fulfillment of the
requirements for the award of the degree of Master in Computer Applications under our
supervision and guidance.

Prof. Debrupa Pal

Department of Computer Application
Narula Institute Of Technology, Agarpara- Kolkata

２
 lOMoARcPSD|7058505

DECLARATION

I declare that this written submission represent my ideas in my own words and where others
ideas or words have been included, I have adequately cited and referenced the original
sources. I also declare that I have adhered to all principles of academic honesty and
integrity and have not misrepresented or fabricated or falsified any idea/data/fact/source in
my submission. I understand that my violation of the above will be cause for disciplinary
action by the institute and can also evoke penal action from the sources which have thus not
been properly cited or from whom proper permission has not been taken when needed.

Imbesat Firdous

Date: ____________

３
 lOMoARcPSD|7058505

ACKNOWLEDGEMENT

It is our proud privilege to express our profound gratitude to the entire management of
Narula 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 Honorable Founder, Narula Institute of Professional
Studies, Kolkata for having provided us with an excellent infrastructure at VSIT.

I am grateful to Prof. Debrupa Pal 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.

Imbesat Firdous

４
 lOMoARcPSD|7058505

ABSTRACT

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.

Here this system will predict weather based on parameters such as temperature, humidity
and wind. User will enter current temperature; humidity and wind, System will take this
parameter and will predict weather(rainfall in inches) from previous data in
database(datasets). The role of the admin is to add previous weather data in database, so
that system will calculate weather(estimated rainfall in inches) based on these data.
Weather forecasting system takes parameters such as temperature, humidity, and wind and
will forecast weather based on previous record therefore this prediction will prove reliable.
This system can be used in Air Traffic, Marine, Agriculture, Forestry, Military, and Navy
etc.

５
 lOMoARcPSD|7058505

６
 lOMoARcPSD|7058505

1. INTRODUCTION

1.1 Objective of the system 7

1.2 Justification and need for the system 7
1.3 Advantage of the system 8
1.4 Previous work or related systems, how they are used 8

2. REQUIREMENT ANALYSIS

2.1 Analysis Study 9-10

2.2 User Requirement 11
2.3 Final Requirement 11

3. DESIGN OF THE SYSTEM

3.1 Hardware, software requirement 12

3.2 System requirement 12-13
3.3 Design requirement 13-14
3.4 DFDs 15

4. IMPLEMENTAION & CODING

4.1 Operating System 18

4.2 Languages 18-19
4.3 Coding 19-38

5. TESTING

1. Software Testing and Objective of Testing 39-42

6. CONCLUSION

1. Conclusion 43
2. Future Scope 43

7. BIBLIOGRAPHY 44

７
 lOMoARcPSD|7058505

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 forecastingmethods 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 helpusers to make informed decisions. With weather apps for iOS and
Android, people can exactly knowwhen 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 amatter of minutes, then what is the easiest way to make sure
to be prepared? A suitable answer is a weather application.

８
 lOMoARcPSD|7058505

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 thatthey 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 theproposed 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.

９
 lOMoARcPSD|7058505

Chapter 2
REQUIREMENT ANALYSIS

Functional Requirements
Functional requirements are the requirements that describe the

functionalities of thesystem 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 peoplewill be able to browse it.

１０
 lOMoARcPSD|7058505

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

１１
 lOMoARcPSD|7058505

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 feelare 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 nota part of the transaction

Confidentiality: Whatever the user is providing to the organization, the user has the
full rights tomodify 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 theinformation 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.

１２
 lOMoARcPSD|7058505

Chapter 3
DESIGN OF THE SYSTEM
3.1 Software requirements

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

3.1 Hardware Requirements

Processo Intel Pentium IV 2.9 GHz

r Other
RAM Minimum 4 GB
Graphics Integrated graphics card
Hard Minimum 500 GB
Disk

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 thesoftware meets their requirements.

１３
 lOMoARcPSD|7058505

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 thesystem 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

１４
 lOMoARcPSD|7058505

(b)Keeping the process simple.

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

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.

１５
 lOMoARcPSD|7058505

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).

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).

１６
 lOMoARcPSD|7058505

Chapter 4

IMPLEMENTATION AND CODING

１７
 lOMoARcPSD|7058505

１８
 lOMoARcPSD|7058505

4.1 OPERATING SYSTEM

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

4.2 Languages used

HTML
The Hyper Text 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 StyleSheets (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 andoriginally 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. Itis 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
webapplications and user interfaces for many mobile applications.

JavaScript

JavaScript is a dynamic computer programming language. It is lightweight and most

commonly used asa 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.

１９
 lOMoARcPSD|7058505

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.0in 1995 with the name LiveScript. The general-purpose core
of the language has been embedded in Netscape, Internet Explorer, and other web
browsers.

4.1 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, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title>Weather App </title>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-
icons/2.0.9/css/weather-icons.min.css">
</head>
<body>
<div class="loading">
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
<section id="main">
<div class="bg-primary w-section text-shadow">
<div class="container">
<div class="row text-white w-header">
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="row">
<div class="col-xs-7">
<form id="f_locator">
<div id="w-search-tip" class="tooltiptext text-light">
２０
 lOMoARcPSD|7058505

<p>You can get weather by city name or city name and <a
href="https://www.iso.org/obp/ui/#search" class="text-accent" target="_blank">iso country
code (alpha-2 code)</a> divided by comma.</p>
<h5>Example:</h5>
<p class="text-white"><strong>London, uk</strong></p>
</div>
<input type="text" id="location" data-tooltip="#w-search-tip">
</form>
<span class="glyphicon glyphicon-map-marker"></span>
</div>
<div class="col-xs-5 text-right"><span id="date"></span></div>
</div>
<div class="row">
<div class="col-xs-3 col-xs-offset-9 text-right">
<div class="unit-block text-accent text-left">
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-
checkbox" id="unit-switch" checked>
<label class="onoffswitch-label" for="unit-switch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row text-white w-main">
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="text-center">
<i id="wicon-main" class="wi wi-main"></i>
<span id="temperature"></span>
</div>
<div class="row">
<div class="col-xs-12 w-desc-box">
<p id="description" class="text-capitalize"></p>
<p><span id="humidity"></span> <i class="wi wi-humidity"></i>
Humidity</p>
</div>
</div>
</div>
</div>
</div>
</div>
２１
 lOMoARcPSD|7058505

<div class="container card-section">

<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="days-box row text-center bg-white">
<div class="col-xs-3 day-first">
<p class="day"></p>
<hr class="hr-title hr-title-primary">
<p><i class="wi"></i></p>
<p><span class="d-min-temp"></span> <span class="d-max-
temp"></span></p>
</div>
<div class="col-xs-3">
<p class="day"></p>
<hr class="hr-title hr-title-primary">
<p><i class="wi"></i></p>
<p><span class="d-min-temp"></span> <span class="d-max-
temp"></span></p>
</div>
<div class="col-xs-3">
<p class="day"></p>
<hr class="hr-title hr-title-primary">
<p><i class="wi"></i></p>
<p><span class="d-min-temp"></span> <span class="d-max-
temp"></span></p>
</div>
<div class="col-xs-3">
<p class="day"></p>
<hr class="hr-title hr-title-primary">
<p><i class="wi"></i></p>
<p><span class="d-min-temp"></span> <span class="d-max-
temp"></span></p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="app.js"></script>
</body>
</html>

２２
 lOMoARcPSD|7058505

CSS

/* Loading css animation by tobias ahlin. http://tobiasahlin.com/spinkit/

Weather icons by erik flowers. https://erikflowers.github.io/weather-icons/
*/
body {
background: #e0e0e0;
background-repeat: no-repeat;
background-size: cover;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a:hover, a:focus {
color: inherit;
text-decoration: none;
opacity: 0.7;
}
#pMe,#pBy {
display: inline-block;
margin-left: 5px;
margin-top: 20px;
}

#pMe a {
z-index: -1;
color: #666666;
font-weight: bold;
transition: opacity 0.3s ease-in;
}
#pMe a:hover {
opacity: 0.7;
text-decoration: none;
}
#pMe a:visited {
color: #666666;
}

@keyframes pMe {
from {
-webkit-transform: translate(-50px,0px); opacity: 0;
transform: translate(-50px,0px); opacity: 0;
}
to {
-webkit-transform: translate(0px,0px); opacity: 1;
transform: translate(0px,0px); opacity: 1;
}
２３
 lOMoARcPSD|7058505

@keyframes pBy {
from {
-webkit-transform: translate(0px,-50px); opacity: 0;
transform: translate(0px,-50px); opacity: 0;
}
to {
-webkit-transform: translate(0px,0px); opacity: 1;
transform: translate(0px,0px); opacity: 1;
}
}

.bg-primary {
background-color: #039be5;
}
.bg-white {
background-color: #FFFFFF;
}
.text-white {
color: #FFFFFF;
}
.text-light {
color: rgba(255, 255, 255, 0.7);
}
.text-accent {
color: #b2ff59;
}
.text-capitalize {
text-transform: capitalize;
}
.text-shadow {
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
}
.hr-title {
border-width: 2px;
max-width: 30%;
margin: 15px auto;
}
.hr-title-primary {
border-color: #039be5;
}

/* weather top section */

.w-section {
２４
 lOMoARcPSD|7058505

padding: 30px 0 90px 0;

}
.w-header, .w-main {
margin-bottom: 20px;
}
.w-header .glyphicon-map-marker {
margin-top: 5px;
}
.w-header input {
float: left;
min-width: 85%;
max-width: 90%;
}

/* Tooltip text */
.tooltiptext {
visibility: hidden;
width: 100%;
background-color: #555;
text-align: center;
padding: 5px 0;
border-radius: 6px;

/* Position the tooltip text */

position: absolute;
z-index: 1;
top: 90%;

/* Fade in tooltip */
opacity: 0;
transition: opacity 0.5s;
}

/* Tooltip arrow */
.tooltiptext::after {
position: absolute;
top: -12px;
left: 20px;
content: ' ';
border: 6px solid transparent;
border-bottom-color: #555;
}
#location {
background-color: transparent;
２５
 lOMoARcPSD|7058505

border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 0;
outline: none;
width: 100%;
margin: 0 0 15px 0;
padding: 0;
box-shadow: none;
box-sizing: content-box;
transition: all 0.3s;
line-height: 30px;
}
#date {
line-height: 30px;
}
.wi-main {
font-size: 5.5em;
position: relative;
vertical-align: top;
top: 15px;
margin-bottom: 30px;
margin-right: 20px;
}
#temperature {
font-size: 4em;
line-height: 1.7em;
vertical-align: top;
}
.unit-block, .min-max-block {
display: inline-block;
}
.unit-block {
margin-left: -9px;
vertical-align: top;
}
.min-max-block {
margin-top: 30px;
margin-left: 10px;
}
.min-max-block p {
margin: 0;
}
.w-desc-box {
margin-top: 30px;
}
２６
 lOMoARcPSD|7058505

/* end weather top section */

/* weather card section */

.card-section {
margin-top: -80px;
}
.thumbnail {
padding: 0;
border: none;
border-radius: 3px;
background-color: #FFF;
-webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.30);
}
.card-header {
background-color: #DDD;
position: relative;
}
.card-header > img {
display: block;
max-width: 100%;
height: auto;
}
.card-title {
color: #fff;
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
}
.card-image {
max-height: 60%;
overflow: hidden;
position: relative;
}
.thumbnail .caption {
padding: 20px;
}
.card-content p {
margin: 0;
}

.days-box {
２７
 lOMoARcPSD|7058505

padding: 30px 0;
-webkit-box-shadow: 0 3px 15px rgba(0,0,0,0.7);
/*box-shadow: 0 0 10px rgba(0,0,0,0.4);*/
box-shadow: 0 6px 5px -5px rgba(0,0,0,.5), 0 7px 0 -2px rgb(255, 255, 255), 0
11px 5px -5px rgba(0,0,0,.5), 0 13px 0 -4px rgba(255, 255, 255, 0.7), 0 16px 5px -5px
rgba(0, 0, 0, 0.5), 0 20px 0 -8px rgba(255, 255, 255, 0.5);
}
.days-box .wi {
font-size: 2.5em;
}
.days-box > div {
border-left: 1px solid #ddd;
}
.days-box .day-first {
border: none;
}
.d-min-temp {
color: #039be5;
}
.d-max-temp {
color: #ef5350;
}
/* end weather card section */
/* https://codepen.io/sinapsis7 */
/* weather icon animation */
@keyframes wi-scale {
0%,100% {
transform: scale(1);
}
50% {
transform: scale(0.8);
}
}
@keyframes wi-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(45deg);
}
}
@keyframes wi-moveX {
0%,100% {
transform: translate(0,0);
}
２８
 lOMoARcPSD|7058505

50% {
transform: translate(-20px,0);
}
}
@keyframes wi-moveY {
0%,100% {
transform: translate(0,0);
}
50% {
transform: translate(0,20px);
}
}
@keyframes wi-fade {
0%,100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
/* end weather icon animation */

/* main animation */
@keyframes scale {
from { transform: scale(0,0) translate(0px,-550px); }
to { transform: scale(1,1) translate(0px,0px); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

/*loading animation*/
.loading {
width: 100%;
height: 100%;
background-color: #039be5;
display: none;
position: absolute;
z-index: 1;
}
.spinner {
top: 40%;
margin: 100px auto;
width: 40px;
２９
 lOMoARcPSD|7058505

height: 40px;
position: relative;
text-align: center;

-webkit-animation: sk-rotate 2.0s infinite linear;

animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #333;
border-radius: 100%;

-webkit-animation: sk-bounce 2.0s infinite ease-in-out;

animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
top: auto;
bottom: 0;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}

@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform:
rotate(360deg) }}

@-webkit-keyframes sk-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
３０
 lOMoARcPSD|7058505

/* Switch button */
.onoffswitch {
position: relative; width: 80px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #CCC; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
font-size: 21px; color: white; font-family: Trebuchet, Arial, sans-serif; font-
weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "°C";
padding-left: 10px;
background-color: #333; color: #B2FF59;
}
.onoffswitch-inner:after {
content: "°F";
padding-right: 10px;
background-color: #333; color: #B2FF59;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 32px; margin: 0px;
background: #EEE;
position: absolute; top: 0; bottom: 0;
right: 48px;
border: 2px solid #CCC; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
３１
 lOMoARcPSD|7058505

}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

３２
 lOMoARcPSD|7058505

JavaScript
"use strict";
//Weather definition
var Weather = function () {};

Weather.prototype.setDate = function () {
var d = new Date();
var n = d.toDateString();
$("#date").text(n);
};
Weather.prototype.getLocation = function () {
//get location from ip address
var res = {
"city": "Delhi",
"country": "India",
"countryCode": "India",
"query": "200.61.38.44",
"regionName": "Buenos Aires F.D.",
"status": "success"
};
if (res.status === "success") {
document.getElementById("location").value = res.city + ", " + res.countryCode;
this.location = res.city + ", " + res.countryCode;
this.currentWeather();
this.forecast();
}
};
Weather.prototype.setLocation = function () {
//set location from input text
$("#f_locator").on("submit", function (e) {
e.preventDefault();
this.location = $("#location").val();
document.body.style.backgroundImage="url('https://source.unsplash.com/random/1600x9
00/?"+ this.location +")";
this.currentWeather();
this.forecast();
this.loadAnimation();
}.bind(this));
};
Weather.prototype.getWeatherIcon = function (wId, sunrise, sunset) {
//get weather icon passing returned ID of openweather API. Optional sunrise and sunset
time, to determine if is day or night type icon. Return an object with icon name and icon
animation properties.
if (wId) {
３３
 lOMoARcPSD|7058505

var icon = {};

icon.name = "na";
icon.animation = "wi-scale";
function between(min, max, group, animation) {
if (wId >= min && wId < max) {
icon.name = group ? group : "na";
icon.animation = animation ? animation : "wi-scale";
}
}
between(200, 300, "thunderstorm", "wi-fade");
between(300, 400, "showers", "wi-moveY");
between(500, 600, "rain", "wi-moveY");
between(600, 700, "snow", "wi-moveY");
between(700, 800, "na", "wi-fade");
between(801, 900, "cloudy", "wi-moveX");
between(900, 1000, "na");
var cond = {
200: "storm-showers",
201: "storm-showers",
202: "thunderstorm",
500: "rain-mix",
501: "rain-mix",
502: "rain",
511: "sleet",
520: "rain-mix",
521: "rain-mix",
600: "snow",
611: "sleet",
701: "fog",
741: "fog",
905: "windy",
906: "hail"
};
var neutralCond = {
711: "smoke",
731: "sandstorm",
761: "dust",
762: "volcano",
781: "tornado",
900: "tornado",
902: "hurricane",
903: "snowflake-cold",
904: "hot",
958: "gale-warning",
959: "gale-warning",
960: "storm-warning",
961: "storm-warning",
962: "hurricane"
};
var dayCond = {
721: "haze",
３４
 lOMoARcPSD|7058505

800: "sunny"
};
var nightCond = {
800: "clear",
701: "fog",
741: "fog"
};
icon.name = cond[wId] ? cond[wId] : icon.name;
icon.name = neutralCond[wId] ? neutralCond[wId] : icon.name;
icon.name = dayCond[wId] ? dayCond[wId] : icon.name;
var time = "day";
if (sunrise && sunset) {
var now = Date.now() / 1000;
var srDate = new Date(sunrise * 1000);
if (srDate.getDate() == new Date().getDate()) {
if (now <= sunrise && now >= sunset) {
time = nightCond[wId] ? "night" : "night-alt";
icon.name = nightCond[wId] ? nightCond[wId] : icon.name;
}
} else {
time = nightCond[wId] ? "night" : "night-alt";
icon.name = nightCond[wId] ? nightCond[wId] : icon.name;
}
}
if (icon.name != "na" && !neutralCond[wId]) {
icon.name = "wi-" + time + "-" + icon.name;
} else {
icon.name = "wi-" + icon.name;
}
icon.animation = icon.name == "wi-day-sunny" ? "wi-rotate" : icon.animation;
return icon;
}
}; //end getWeatherIcon

Weather.prototype.displayWeatherIcon = function (selector, icon) {

//display weather icon. first arg is where to display. Second arg is what returned from
getWeatherIcon method.
if (selector && typeof icon == "object") {
if (icon.name != "na") {
$(selector).addClass(icon.name);
animate(selector, icon.animation, 2000, 0, "linear", "infinite");
}
}
};
Weather.prototype.currentWeather = function () {
//get current weather from openweather API, format, and display it.
if (this.location) {
３５
 lOMoARcPSD|7058505

function setMain(res) {
if (res.main) {
$("#temperature").text(Math.round(res.main.temp) + "°");
$("#description").text(res.weather[0].description);
if (res.main.humidity) {
$("#humidity").text(res.main.humidity);
} else {
$("#humidity").text("0");
}
}
}
$.getJSON("https://api.openweathermap.org/data/2.5/weather", {
q: this.location,
units: "metric",
appid: "bc1301b0b23fe6ef52032a7e5bb70820"
}, function (json) {
var wId = json.weather[0].id;
if (wId) {
var icon = this.getWeatherIcon(wId, json.sys.sunrise, json.sys.sunset);
this.displayWeatherIcon("#wicon-main", icon);
}
setMain(json);
}.bind(this));
}
}; //end currentWeather

Weather.prototype.forecast = function () {
//get forecast (4 days) weather from openweather API, format, and display it.
function setForecast(res) {
this.daily = [];
var list = res.list;
for (var i = 0, len = list.length; i < len; i++) {
this.daily[i] = this.daily[i] ? this.daily[i] : {};
this.daily[i].maxTemp = Math.round(list[i].temp.max);
this.daily[i].minTemp = Math.round(list[i].temp.min);
this.daily[i].day = new Date(list[i].dt * 1000).getDay();
var iconId = list[i].weather[0].id;
this.daily[i].icon = this.getWeatherIcon(iconId);
}
}
function displayForecast() {
var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
_this = this;
$(".days-box").children(".col-xs-3").each(function (index) {
$(this).children('.day').text(days[_this.daily[index].day]);
３６
 lOMoARcPSD|7058505

$(this).find('.d-min-temp').text(_this.daily[index].minTemp + "°");
$(this).find('.d-max-temp').text(_this.daily[index].maxTemp + "°");
$(this).find('.wi').addClass(_this.daily[index].icon.name);
});
}
$.getJSON("https://api.openweathermap.org/data/2.5/forecast/daily", {
q: this.location,
cnt: 4,
units: "metric",
appid: "bc1301b0b23fe6ef52032a7e5bb70820"
}, function (json) {
setForecast.call(this, json);
displayForecast.call(this);
}.bind(this));
};
Weather.prototype.setUnit = function () {
//Switch between Celsius and Farhenheit
var prevUnit = "C";
$("#unit-switch").on("click", function () {
var newUnit = prevUnit == "C" ? "F" : "C";
$("span:contains('°')").each(function (index, el) {
var temp_current = parseFloat($(el).text());
if (newUnit == "F") {
var temp_new = Math.round(temp_current * 1.8 + 32);
} else if (newUnit == "C") {
var temp_new = Math.round((temp_current - 32) / 1.8);
}
$(el).text(temp_new + "°");
animate(el, "fadeIn", 400, 0, "ease-out");
});
prevUnit = newUnit;
});
};
Weather.prototype.loadAnimation = function () {
$(".loading").css("display", "block");
var countAjax = 0;
$(document).ajaxComplete(function () {
countAjax++;
if (countAjax == 2) {
$(".loading").fadeOut();
loadTooltips();
animate(".days-box", "scale", 400, 500, "ease-out");
var delayAnim = 1300;
$(".days-box").children(".col-xs-3").each(function () {
animate(this, "fadeIn", 350, delayAnim, "ease-out");
delayAnim += 350;
});
３７
 lOMoARcPSD|7058505

}
});
}; //Animation using CSS @keyframes

function animate(selector, keyFrameName, duration, delay = 0, timing = "ease", iteration

= 1) {
//jQuery selector; CSS keyframes name; duration in ms; delay in ms;
$(selector).css({
"visibility": "hidden"
});
setTimeout(function () {
$(selector).css({
"visibility": "visible"
});
$(selector).css({
"animation": keyFrameName + " " + duration + "ms " + timing + " " + iteration
});
}, delay);
if (iteration != "infinite") {
setTimeout(function () {
$(selector).css({
"animation": ""
});
}, (delay + duration) * iteration);
}
}
;
/* https://codepen.io/sinapsis7 */
function loadTooltips() {
//search for elements that have data-tooltips attributes on the web page, and display it.
$("[data-tooltip]").each(function () {
var tag = $(this)[0].tagName.toLowerCase();
var tooltip = $(this).attr("data-tooltip");
var tooltipParentH = $(this).outerHeight();
var parentPosition = $(this).position();
$(tooltip).insertAfter(this);
$(tooltip).css({
"max-width": document.body.clientWidth - parentPosition.left - 5 + "px",
"transition": "opacity 0.3s"
});
function showTooltip() {
$(tooltip).css({
"visibility": "visible",
"opacity": 1,
"top": parentPosition.top + tooltipParentH + 10 + "px",
"left": parentPosition.left + "px"
});
}
３８
 lOMoARcPSD|7058505

function hideTooltip() {
$(tooltip).on("mouseenter", stopTimerHide);
function stopTimerHide() {
clearTimeout(timerHide);
$(tooltip).on("mouseleave", hideTooltip);
}
var timerHide = setTimeout(function () {
$(tooltip).css({
"visibility": "hidden",
"opacity": 0
});
}, 100);
}
var _this = $(this);
if (tag == "input") {
$(this).on("focus", function () {
showTooltip();
_this.off("mouseleave", hideTooltip);
});
$(this).on("blur", function () {
hideTooltip();
_this.on("mouseleave", hideTooltip);
});
$(this).on("mouseenter", showTooltip);
$(this).on("mouseleave", hideTooltip);
} else {
$(this).on("mouseenter", showTooltip);
$(this).on("mouseleave", hideTooltip);
}
});
} //Run

var weather = new Weather();

$(document).ready(function () {
$("#unit-switch").prop('checked', true);
weather.loadAnimation();
weather.setDate();
weather.getLocation();
weather.setLocation();
weather.setUnit();
});

３９
 lOMoARcPSD|7058505

Chapter 5
TESTING

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 costsavings. 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 reworkcosts and schedule delays.

 Systems are not designed as entire systems nor are they tested as single systems

４０
 lOMoARcPSD|7058505

the analyst mustperform 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:
４１
 lOMoARcPSD|7058505

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.
 Coverage of the relevant state of the art test methods like equivalence class
building, boundary value analysis and condition coverage are used.

5.2.4 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 needof stubs is eliminated.

5.2.5 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
４２
 lOMoARcPSD|7058505

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.6 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

４３
 lOMoARcPSD|7058505

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 themain 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 Whimsy”- The Wacky Weather Telling Website
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

４４
 lOMoARcPSD|7058505

BIBLIOGRAPHY

 http://www.w3schools.com

 http:// www .stackoverflow.com

 http://wikipedia.com

４５