Trinity institute of technology and research

Bhopal
Rajiv Gandhi Proudyogiki Vishwavidyalaya
MINOR PROJECT
Academic year: 2023-2024
WHEATHER FORCAST
--------------------------------------------------------------------------------------------------------------
Program: COMPUTER SCIENCE ENGINEERING

Group Details:
Sr.No Name of Group Roll Enrollment No
members No
1 ANUJ PRAJAPATI 15 0198CS211015
2 FAIZAN QURESHI 34 0198CS211034
3 CHETAN KALE 26 0198CS211026
4 KANTESH PRATAP 49 0198CS211049
SINGH
Name of Project Guide: Mrs. SHAILJA SHARMA
SHUKLA

TRINITY INSTITUTE OF TECHNOLOGY AND RESEARCH

BHOPAL.AFFI

1
 Acknowledgments
We would like to extend our heartfelt gratitude to everyone who
contributed to the development and success of this weather app.

First and foremost, we thank our dedicated team of developers,

designers, and project managers whose tireless efforts and
innovative ideas have brought this project to life. Your
commitment to excellence and attention to detail are truly
appreciated.

We are deeply grateful to the meteorological experts and data

providers who have supplied us with accurate and reliable weather
information. Special thanks to [Weather API Provider] for their
robust and comprehensive weather data services, which form the
backbone of our app’s functionality.

A special mention goes to our beta testers, who provided

invaluable feedback and suggestions during the development
phase. Your insights have been crucial in refining the user
experience and ensuring the app meets the highest standards.

We also express our appreciation to our marketing and customer

support teams, whose efforts have been instrumental in promoting
the app and assisting our users with their queries.

Lastly, we extend our sincere thanks to our users. Your support

and trust inspire us to continuously improve and innovate. We are
committed to delivering the best weather forecasting experience
and are grateful for the opportunity to serve you.

Thank you all for your contributions and support.

Abstract
This document presents the design and
functionality of a comprehensive weather
application aimed at providing accurate and
2
real-time weather information to users. The
app caters to a diverse audience, including the
general public, travelers, and outdoor
enthusiasts, offering features such as current
weather conditions, detailed forecasts, severe
weather alerts, and air quality indices. With an
intuitive and user-friendly interface, the app
ensures easy navigation and accessibility for
all users, including those with visual
impairments. Core features include interactive
weather maps, customizable widgets,
historical weather data, and integration with
virtual assistants and calendars. The app
leverages reliable weather APIs to ensure
accurate data, while emphasizing performance
optimization and data security. User
engagement is enhanced through push
notifications, social sharing options, and a
feedback system. The app’s monetization
strategy incorporates ad-supported models,
subscription plans, and in-app purchases. This
weather app aims to be a comprehensive tool
for all weather-related needs, ensuring users
are well-informed and prepared for any
weather conditions.

3
 Certificate
This is to certify that Mr. FAIZAN QURESHI, ANUJ
PRAJAPATI, CHETAN KALE, KANTESH PRATAP
SINGH, Roll No. 34,15,26,49 of 6th Semester of BTECH
in COMPUTER SCIENCE Engineering Rajiv Gandhi
Proudyogiki Vishwavidyalaya (Code: 0198) has
completed the MI NOR Project satisfactorily in the
academic year 2023- 2024. as prescribed in the
curriculum.
Place:BHOPAL, MADHYA PRADESH Enrollment No:
0198CS211015. 0198CS211034,

0198CS211026, 0198CS211034
Date: …………………… Exam Seat No:
………………………….
Subject TeacherHead of the Department Principal

Seal of
Institution

4
 Annex
ure– I Title of Project : Weather App 1.0 Aim /Benefits of the
Minor-Project:
This Micro-Project aims at:
1. Build a Weather App that fetches weather data from an API
by using HTML, JavaScript, CSS.
2. To show the weather forecast of an particular region.
3. To show current timing and date.
2.0Course Outcomes Addressed
(Tick appropriate COs)
1. Create interactive web pages using program flow control
structure [✔]
2. Implement Arrays and functions in javascript [✔]
3. Create event based web forms using javascript [✔]
4. Use javascript for handling cookies [ ]
5. Create interactive webpage using regular expressions for
validations.[ ]
6. Create menu and navigation in webpage [ ]
3.0Proposed Methodology
First Phase:- Data Gathering, rquirements, information
collection.

5
Second Phase:- Analysis will be done to define the functional
requirements of the project.
Third Phase :- Based on analysis the next step will be writing an
abstract.Abstract which gives a brief introduction about
the project.
Fourth Phase:- Step-wise procedure writing which explains the
working and the functionality of the project.
Fifth Phase:- Code was tested and write the code and display the
output.
Sixth Phase: A project report was made
Seventh Phase: The project was demonstrated and submitted.
4.0Action Plan (Sequence and time required for major activities
for 8 Weeks)

Sr. Details of Planned Planned Finish Name of

No. activity Start date Responsible
date Team
Members
1 Finalization of
project Title and
Scope
2 Project
6
 Definition and
design structure
3 Design procedure
(algorithm)
4 Draw Design

5 Coding

6 Coding

7 Testing and error

correction
8 Demonstration
of project and
final submission
Making of report
5.0Resources Required

S. Name of Specifications Qty Remarks

No. Resource/material
1 Hardware Computer (i3-i5 1 i3
computer system preferable),RAM Processor
minimum 2 GB
and onwards but
7
 not
limited to
2 Operating system Windows 1 Windows
XP/windows 7/ 7
Linux version 5 or
later
3 Software Notepad++ 1 Latest
version
Names of Team Members with Roll Nos.
15-anuj Prajapati
34-faizan qureshi
26-chetan kale
49-kantesh pratap singh
Annexure – II A
1.0 Rationale
Importance :
JavaScript is limited featured client side programming language.
JavaScript runs at the client end through the user's browser
without sending message back and forth to the server. It is
widely used by the developers to do things such as build
dynamic webpages, respond to events, create interactive forms,
8
validate data that the visitors enters into a form, control the
browser etc. This course helps student to create highly
interactive web pages using these features.Client-side JavaScript
is the most common form of the language. The script should be
included in or referenced by an HTML document for the code to
be interpreted by the browser.It means that a web page need not
be a static HTML, but can include programs that interact with
the user, control the browser, and dynamically create HTML
content.The JavaScript client-side mechanism provides many
advantages over traditional CGI server-side scripts. For example,
you might use JavaScript to check if the user has entered a valid
e-mail address in a form field.The JavaScript code is executed
when the user submits the form, and only if all the entries are
valid, they would be submitted to the Web Server.JavaScript can
be used to trap userinitiated events such as button clicks, link
navigation, and other actions that the user initiates explicitly or
implicitly.
2.0Aim of the Micro-Project:
This Minor-Project aims at:
1. Build a Weather App that fetches weather data from an API
by using HTML, JavaScript, CSS.

9
 2. To show the weather forecast of an particular region.
3. To show current timing and date.
3.0Course Outcomes Addressed
1. Create interactive web pages using program flow control
structure
2. Implement Arrays and functions in javascript
3. Create event based web forms using javascript
4.0Literature Review
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.
The ECMA-262 Specification defined a standard
version of the core JavaScript language.

10
 • JavaScript is a lightweight, interpreted programming
language.
• Designed for creating network-centric applications.
• Complementary to and integrated with Java.
• Complementary to and integrated with HTML.
• Open and cross-platform
Client-Side JavaScript :
Client-side JavaScript is the most common form of the language.
The script should be included in or referenced by an HTML
document for the code to be interpreted by the browser.
It means that a web page need not be a static HTML, but can
include programs that interact with the user, control the browser,
and dynamically create HTML content.
The JavaScript client-side mechanism provides many advantages
over traditional CGI server-side scripts. For example, you might
use JavaScript to check if the user has entered a valid e-mail
address in a form field.
The JavaScript code is executed when the user submits the form,
and only if all the entries are valid, they would be submitted to
the Web Server.

11
JavaScript can be used to trap user-initiated events such as
button clicks, link navigation, and other actions that the user
initiates explicitly or implicitly.
Advantages of JavaScript:
The merits of using JavaScript are −
1. Less server interaction − You can validate user input before
sending the page off to the server. This saves server traffic,
which means less load on your server.
2. Immediate feedback to the visitors − They don't have to
wait for a page reload to see if they have forgotten to enter
something.
3. Increased interactivity − You can create interfaces that react
when the user hovers over them with a mouse or activates
them via the keyboard.
4. Richer interfaces − You can use JavaScript to include such
items as drag-anddrop components and sliders to give a Rich
Interface to your site visitors.
Limitations of JavaScript:
We cannot treat JavaScript as a full-fledged programming
language. It lacks the following important features −

12
1. Client-side JavaScript does not allow the reading or writing
of files. This has been kept for security reason.
2. JavaScript cannot be used for networking applications
because there is no such support available.
3. JavaScript doesn't have any multi-threading or multiprocessor
capabilities.
Once again, JavaScript is a lightweight, interpreted
programming language that allows you to build interactivity into
otherwise static HTML pages.
5.0 Actual Methodology Followed
Description :
We learn how to build a simple, yet fully functional weather app
with
JavaScript.First things first, we have find a provider that will let
us incorporate its weather data into our app. Luckily enough,
there are several different providers out there for developing
weather apps. Most of them include a free package along with
premium subscriptions that scale depending on the
services/features. In our case, we’re going to use
OpenWeatherMap, one of the most popular free choices. To take

13
advantage of its capabilities, first, we have sign up for an API
key
The Page Markup:
The first section will include a heading, a search form, and an
empty span element. This element will become visible with an
appropriate message under certain conditions. Specifically, if
there isn’t any weather data available for a requested city or the
data for this city are already known.
Some Basic Styles:
With the markup for the app ready, we’ll forge on with the CSS.
The first step, as always, is to specify some CSS variables and
common reset styles:
Add the JavaScript :
On Form Submission
Each time a user submits the form by pressing the Enter key
we’ll do two things:
1. Stop the form from submitting, hence prevent reloading the
page.
2. Grab the value which is contained in the search field.
CODING:
1. index.html

14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Weather App</title>
<link rel="stylesheet" href="style1.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="column side">
<p id="demo"></p>
<p
id="demo1"></
p> </div>
<div class="column side">
<h1>Weather Forecast</h1>
</div>

15
 <div class="abc">
<form id="form">
<input type="text"
id="search"
placeholder="Searc
h by location"
autocomplete="off"
/>
<p id="write">City , Country</p>
</form>
<main id="main"></main>
</div>
</body>
</html>
2. Style.css
*{
box-sizing: border-box;
}
Body

16
{ padding:
0px;
margin:
0px;
/*background-image: url("weather.jpg");*/
background: linear-gradient( rgba(100, 77, 202, 0.37),
rgba(231, 237, 238, 0.418) ),
url('weather.jpg');
background-repeat:
no-repeat;
background-size:
cover; background-
position: top
center;
min-height: 100vh;
}
.column
{
float: left;

17
 padding:
0px; margin:
0px;
}
.column.side
{width: 50%;
}
.ab
c{
text-align:
center; }
#demo{ padd
ing: 5px;
margin:5
px; font-
size:
50px;

18
 font-weight: bold;
font-family: Times
New Roman;
color: white;
}
#demo1{ padding:
5px; margin: 5px;
font-size: 40px;
font-weight:
bold; font-family:
Comic Sans MS;
color: white;
}
input[type=text]
{ background-
color: #fff;
border: none; border-
radius: 30px; box-shadow:
0 4px 10px rgba(0, 0, 0,

19
0.2); font-family: Comic
Sans MS; font-size:
1.5rem; padding: 1.5rem;
min-width: 350px; }
input:focus {
outline: none;
}
#main{
text-align: center;
font-family:
Comic Sans MS;
font-size: 40px;
font-weight:
bold; color:
black;
}
#write{ margi
n: 0px;
padding:

20
 0px;
font-size:
40px;
color:
black;
font-weight:bold;
font-family:Comic
Sans MS;
}
h1{ padding: 0px;
font-size: 60px;
text-shadow: 6px
6px 8px red;
text-align:
right;
padding-
bottom:
30px; text-
align:center;

21
color:
yellow;

22
3. script.js
const apikey =
"4d8fb5b93d4af21d66a29487102
84366"; const main =
document.getElementById("main
"); const form =
document.getElementById("form
"); const search =
document.getElementById("searc
h");
Const url = (city) =>
`https://api.openweathermap.org/data/2.5/weather?
q=${city}&appid=${apikey`; async function
getWeatherByLocation(city)
{ const resp = await
fetch(url(city), { origin:
"cors" }); const respData =
await resp.json();
console.log(respData);

23
 addWeatherToPage(respData);
}
function addWeatherToPage(data)
{
const temp =
KtoC(data.main.temp); const
weather =
document.createElement("di
v");
weather.classList.add("weather")
; weather.innerHTML = `
<h2><imgsrc="https://openweathermap.org/img/wn/$
{data.weather[0].icon}@2x.png" />
${temp}°C
<img src="https://openweathermap.org/img/wn/$
{data.weather[0].icon}@2x.png" /></h2> <small>$
{data.weather[0].main}</small> `;
// cleanup
main.innerHTM

24
L = "";
main.appendChil
d(weather);
}
function KtoC(K)
{ return
Math.floor(K -
273.15);
}
form.addEventListener("
submit", (e) => {
e.preventDefault();
var a = document.getElementById("search").value;
document.getElementById("write").innerHTML = a;
const city = search.value;
if (city)
{ getWeatherByLo
cation(city);
}

25
});
var myVar =
setInterval(myTimer, 0);
function myTimer() {
var d = new Date(); var t =
d.toLocaleTimeString();
document.getElementById("de
mo").innerHTML = t;
} Myfunction();
function
Myfunction()
{ var day;
switch(new
Date().getDay()){
case 0:
day="Sunday";
break;

26
case 1:
day="Monda
y"; break;
case 2:
day="Tuesda
y"; break;
case 3:
day="Wednesd
ay"; break;
case 4:
day="Thursd
ay"; break;
case 5:
day="Frida
y"; break;
case 6:
day="Saturday";
break; } var
month; switch(new

27
Date().getMonth())
{ case 0:
month="January";
break;
case 1:
month="Febru
ary"; break;
case 2:
month="Mar
ch"; break;
case 3:
month="Apr
il"; break;
case 4:
month="Ma
y"; break;
case 5:
month="Jun
e"; break;

28
case 6:
month="Jul
y"; break;
case 7:
month="Augu
st"; break;
case 8:
month="Septem
ber"; break;
case 9:
month="Octo
ber"; break;
case 10:
month="Novem
ber"; break;
case 11:
month="Decemb
er";

29
brea
k; }
var date=new Date().getDate()
document.getElementById("demo1").innerHTML =
day+", "+month+" "+date;
}
6.0Actual Resources Used

S. Name of Specifications Qt Remarks

No Resource/ y
. material
1 Hardware Computer (i3-i5 1 I3
computer system preferable),RA Processso
M r
minimum 2 GB
and
onwards but not
limited to
2 Operating system Windows 1 Windows
XP/windows 7
7/linux version

30
 5 or later
3 Software Visual studio 1 x86
code

31
32
8.0 Skills developed out of this project.
1. Develop a JavaScript Program Using different Concepts
2. Able to debug and run a Javascript Program
3. Documentation of Project
4. Time management
5. Technical Writing

6. Team work
7. Problem solving
9.0 Applications of this Micro-Project
1. Websites

2. Web application
3. Information
Annexure - III

Suggested Rubric for Assessment of Minro-

Project
Annexure – IV
Micro Project Evaluation Sheet
Name of Student: faizan Qureshi,anuj Prajapati, Chetan
kale,kantesh Pratap singh

33
Name of Program: Computer Engineering Semester: 6th
Course Code:
Title of the Micro-Project: WHEATHER APP
Course Outcomes Addressed
(Tick appropriate COs)
1. Create interactive web pages using program flow control
structure [ ✔]
2. Implement Arrays and functions in javascript [ ✔]
3. Create event based web forms using javascript [ ✔]
4. Use javascript for handling cookies [ ]
5. Create interactive webpage using regular expressions for
validations [ ]
6. create menu and navigation on webpages [ ]
*Comments/Suggestions
about teamwork/leadership/interpersonal communication
The project was implemented with good leadership &
teamwork with active co-operation of all the team members.
Everyone contributed equally and met with good outcomes.
Hence, the overall project was done in harmony with good
team spirit.

34
Name and designation of the Faculty Member: Mrs. Shailaja
Sharma Shukla
Signature________________

35