Professional Documents
Culture Documents
Submitted To Submitted By
Dr Vani Aditya Ray(006)
VSIT Adarsh Kr. Singh(005)
BCA-5 EA
(Batch: 2020-2023)
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.
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.
1.1.
2 REQUIREMENT ANALYSIS 7
44
5 TESTING & TEST RESULTS
1. Software Testing and Objective of Testing 44-47
5.2 Sample test data/ Output screen 48-49
printouts
etc.
6 CONCLUSION 50
1. Conclusion 50
50
2. Future Scope
51
Biblography
INTRODUCTION
the state of the atmosphere for a given location. Ancient weather forecasting
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
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. 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.
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.
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.
REQUIREMENT ANALYSIS
Functional Requirements
Functional requirements are the requirements that describe the functionalities of the
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.
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.
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
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.
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.
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. Must be interactive
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.
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.
RAM Minimum 4 GB
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.
10
Functional Requirements
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.
11
(c) The best thing in the input design is to achieve all the objectives mentioned in the simplest manner
possible.
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
12
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).
13
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.
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.
16
4.3 CODING
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather</title>
</head>
<body>
<h5>the weather</h5>
17
<div class="place-time">
</div>
</div>
</div>
<div class="line"></div>
</div>
</button>
18
<ul id="city_ul_small">
<li class="mt-4"><p>Manchester</p></li>
</ul>
</div>
<div class="details">
<ul>
<span><p>Cloud</p></span>
</li>
<span><p>Humidity</p></span>
</li>
<span><p>Wind</p></span>
</li>
</ul>
</div>
</div>
19
<div class="line"></div>
</div>
</button>
</div>
<ul id="city_ul_large">
<li class="mt-5"><p>Manchester</p></li>
</ul>
</div>
<div class="details">
<ul>
<span><p>Cloud</p></span>
20
</li>
<span><p>Humidity</p></span>
</li>
<span><p>Wind</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>
<div class="icon-name">
</div>
</div>
</div>
21
<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>
</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;
22
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;
23
.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;
24
/* background-color: red; */
color: white;
.Search{ widt
h: 30%;
height: 100vh;
box-shadow: rgba(0, 0, 0,
0.3); backdrop-filter:
blur(10px);
-webkit-backdrop-filter: blur(10px);
rgba(255,255,255,0.18);
/* opacity: 0.5; */
.Search-small{
width: 100%;
/* height: 100%; */
box-shadow: rgba(0, 0, 0,
0.3); backdrop-filter:
blur(10px);
-webkit-backdrop-filter: blur(10px);
rgba(255,255,255,0.18);
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{ backg
round: none;
border: none;
26
.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;
27
input[type="search"]::placeholder {
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;
28
color: white;
#city_ul_small{ fo
nt-size: 18px;
font-weight: 100;
color: white;
cursor: pointer;
#city_ul_large{ fon
t-size: 18px;
font-weight: 100;
color: white;
cursor: pointer;
.weather-icon{
-webkit-backdrop-filter: blur(10px);
rgba(255,255,255,0.18);
29
.temperature-small .degree p{
font-weight: 400;
font-size: 50px;
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;
30
top: 5rem;
#button_color_large{ back
ground-color: black;
#button_color_small{ back
ground-color: black;
input {
caret-color: white;
.animate-character
background: linear-gradient(to right, #ffffff, #fffc00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+,
Opera 12+, Safari 7+ */
31
background-clip: border-box;
color: #fff;
background-clip: text;
/* text-fill-color: transparent; */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
font-size: 20px;
@keyframes textclip {
to {
#weather_name_large{
font-size: 40px;
font-weight: 600;
32
let cities;
33
const formLarge =
document.getElementById("city_ul_large");
//31c3cdeea4869ee00e5589a3b2aa6aab
cloud_small.innerHTML = 50+"%"
cloud_large.innerHTML = 50+"%"
getWeather('New Delhi','in');
$(document).ready(function(){
var
classCycle=['imageCycle1','imageCycle2','imageCycle3','imageCycle4','imageCycle7','imageCycle8'];
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";
35
button_color_small.style.backgroundColor = "#0F3D3E";
button_color_large.style.backgroundColor = "#0F3D3E";
$('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;
temp_small.innerHTML = temp+'°';
temp_large.innerHTML = temp+'°';
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;
// console.log(src);
// icon_small.src = src;
// icon_large.src =src;
function convertToCelcius(temp){
37
console.log(data);
setData(data);
// ✅ Get a String representing the given Date using UTC (= GMT) time zone.
console.log(timeZone)
// console.log(result)
38
console.log(t);
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 = "";
city.name.toLowerCase().includes(i.toLowerCase())); console.log(result);
removeItems();
39
if(result.length>4){
length = 4;
}else{
length = result.length;
addCity(result[i]);
function updateValue(e)
{ console.log(e);
const i = e.target.value;
//input=i;
console.log(i);
city.name.toLowerCase().includes(i.toLowerCase())); console.log(result);
removeItems();
let length;
if(result.length>4){
length = 4;
}else{
length = result.length;
40
addCity(result[i]);
if(length<4){
addCity(tempCities[i]);
rawFile.overrideMimeType("application/json");
rawFile.onreadystatechange = function() {
callback(rawFile.responseText);
rawFile.send(null);
41
const br = document.createElement("br");
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 = '';
43
RESULTS
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
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:
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.
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:
45
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
46
47
Fig 1
By default, it will show the weather in Delhi, if we haven’t added any specified location
48
Fig 3
It will not show any other location different to Delhi if our input is wrong.
49
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.
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.
50
http://wikipedia.com
51