SESSION -2023-24

MINI PROJECT REPORT

ON

WEATHER WEB APPLICATION

Submitted in partial fulfillment of the requirement for the degree of
B. Tech (IT)

DEPARTMENT OF INFORMATION TECHNOLOGY

IIMT COLLEGE OF ENGINEERING, GREATER NOIDA

SUBMITTED TO: SUBMITTED BY:

Mr. SHAKUN GARG,
Assistant Professor,
Department of
Information Technology
 CERTIFICATE

This is to certify that we Akash Prajapati, Subhash Kumar and Sudhanshu

Kumar 3rd Semester from IIMT COLLEGE has presented this project work
entitled “Weather Web Application”, an online auction website in partial
fulfilment of the requirements for the award of the degree of Bachelor of
Technology(IT) under our supervision and guidance

PROJECT GUIDE HOD (IT)

DEPT. OF IT [Link] SHARMA
PROF. SHAKUN GARG
 Table of Contents
CHAPTER- 1 Project PAGE NO
1.1Abstract 05
1.2 Introduction 06
CHAPTER- 2 System Analysis
2.1 Functional Requirements 03
2.2 Analysis Study 04
2.3 Technical Feasibility 05
CHAPTER- 3 DESIGN OF THE SYSTEM
3.1 Hardware Requirement 08
3.2 software requirements 08
3.3 Design Requirement 08
3.4 Language used 09
CHAPTER- 4 Implementation of Code 10
CHAPTER- 5 Snapshots 19

CHAPTER- 6 Conclusions 20
CHAPTER- 7 Bibliography 20
 WEATHER
WEB
APPLICATION
 WEATHER WEB APPLICATION 2024

CHAPTER- 1 ABSTRACT

DynamicWeather is a cutting-edge weather application designed to

provide users with comprehensive and real-time meteorological
information in a user-friendly interface. This application leverages
advanced data analytics and visualization techniques to deliver accurate
and personalized weather forecasts, ensuring users stay informed and
prepared for changing weather conditions.

DynamicWeather sets a new standard for weather applications, offering a

holistic and engaging user experience that goes beyond traditional
forecasting. With its real-time updates, personalized features, and user-
centric design, DynamicWeather aims to empower users with the
information they need to make informed decisions in the face of ever-
changing weather conditions.

Key Features:

Real-Time Updates: DynamicWeather harnesses the power of live

meteorological data feeds to provide users with up-to-the-minute
weather updates. Through seamless integration with reputable weather
APIs, users can rely on the application for timely and accurate information,
enhancing their ability to plan daily activities.

Intuitive User Interface: The user interface of DynamicWeather is crafted

with simplicity and user-friendliness in mind. With visually appealing
graphics and easy-to-understand icons, users can effortlessly navigate
through the app to access detailed weather forecasts, hourly predictions,
and interactive maps.

Location-Based Forecasting: The application utilizes geolocation

services to offer location-specific weather forecasts. Users can receive
hyper-localized weather information, ensuring that the predictions are
tailored to their exact location and enhancing the accuracy of the provided
data.

5
 WEATHER WEB APPLICATION 2024

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

6
 WEATHER WEB APPLICATION 2024

CHAPTER- 2 SYSTEM ANALYSIS

2.1Functional 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.2 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.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.

7
 WEATHER WEB APPLICATION 2024

CHAPTER- 3 DESIGN OF THE SYSTEM

3.1 Software requirements

Platform Platform Independent

Operating System Windows 10/11

Tools HTML,CSS,JS

Browser Google Chrome

API OpenWeatherMap

3.2 Hardware requirements

Processor I3 above

RAM Minimum 4gb

Graphics Integrated graphics card

Hard Disk Upto 500GB

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

8
 WEATHER WEB APPLICATION 2024

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

9
 WEATHER WEB APPLICATION 2024

CHAPTER-4. IMPLEMENTATION AND CODING

HTML:

<!DOCTYPE html>

<html lang="en">

<body>

<head> <div class="loader-container" id="loader">

<meta charset="UTF-8"> <div class="loader"></div>

<meta name="viewport" content="width=device- <p id="loadp">Loading...</p>

width, initial-scale=1.0">
</div>
<title>WEATHERVUE</title>
<div class="data-container" id="data"
<link rel="shortcut icon" href="images/[Link]" style="display: none;">
type="image/x-icon">
<header>
<link rel="preconnect"
href="[Link] <div class="logo">

<link rel="preconnect" <img src="images/[Link]"

href="[Link] crossorigin> id="imageLogo" alt="">

<link </div>
href="[Link]
nito+Sans:opsz,wght@6..12,400;6..12,600&display <div class="searchBar">
=swap"
<span class="searchIcon"><i class="ri-search-line
rel="stylesheet"> searchIcon"></i></span>

<link <form class="weatherSearch">

href="[Link]
0/fonts/[Link]" rel="stylesheet"> <input type="text" placeholder="Enter Location"
class="cityName">

</form>
<link rel="stylesheet"
href="[Link] </div>
[Link]">
<div class="setting">
<link rel="stylesheet"
<p class="degree" id="celsus">&#xb0;C</p>
href="[Link]
/css/[Link]"> <p class="degree" id="frahtine">&#xb0;F</p>
<!-- or --> <a href=""><i class="bx bx-sun settingMenu"
id="icon"></i></a>
<link rel="stylesheet" href="[Link]">
<!-- <a href=""><i class="ri-settings-2-line
</head>
settingMenu"></i></a> -->

10
 WEATHER WEB APPLICATION 2024

<div class="leftCImage">

</div> <h2 id="temp">19 C</h2>

</header> <img src="/images/[Link]" id="weatherIcon"

alt="">
<section class="container">
</div>
<div class="leftContainer">
<h3 id="skyDescription">Clear</h3>
<div class="leftUp">
</div>
<h3>Now</h3>

<div class="leftLow"> </div>

<div class="cal-city"> <div class="contentBox">

<i class="ri-calendar-line"></i> <p>Wind Status</p>

<p class="calendar">Thrusday 5,July</p> <div class="insideContent">

</div> <h1><i class="ri-windy-line"></i></i></h1>

<h2 id="windStatus">43%</h2>

<div class="cal-city"> </div>

<i class="ri-map-pin-2-line"></i>

<p class="city">Mumbai, Maharashtra</p> </div>

</div> <div class="contentBox">

<p>Sunrise & Sunset</p>

<div class="insideContent sunRise">

</div> <div class="sun_moon">

<p><i class="ri-sun-line"></i></p>

<p id="sunRise">6:30</p>

</div> </div>

<div class="rightContainer">

<div class="contentBox">

<p>Pressure</p> <div class="sun_moon">

<div class="insideContent"> <p><i class="ri-moon-line"></i></p>

<h1><i class="ri-slow-down-line"></i></h1> <p id="sunSet">6:30</p>

<h2 id="Pressure">43%</h2>

</div> </div>

11
 WEATHER WEB APPLICATION 2024

</div> <h1><i class="ri-temp-hot-fill"></i></h1>

<h2 id="Feels">43%</h2>

</div> </div>

<div class="contentBox">

<p>Humidity</p> </div>

<div class="insideContent">

<h1><i class="ri-water-percent-line"></i></h1> </div>

<h2 id="Humidity">43%</h2>

</div>

</section>

</div> </div>

<div class="contentBox">

<p>Visibility</p> </body>

<div class="insideContent">

<h1><i class="ri-eye-line"></i></h1>

<h2 id="Visibility">43%</h2> <script

src="[Link]
</div> ></script>

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

</div> <!-- <script

src="[Link]
<div class="contentBox"> ></script> -->
<p>Feels Like</p>

<div class="insideContent"> </html>

CSS:
*{ background: var(--bgColor);
margin: 0;
padding: 0; }
box-sizing: border-box;
list-style: none; :root {
font-family: 'Nunito Sans', sans-serif; /* Black Theme */
--bgColor: #141216;
text-decoration: none; --mainColor: #1D1B1F;
} --textColor: #FCFCFC;

body { /* White Theme

12
 WEATHER WEB APPLICATION 2024

--bgColor:#F3F4F6; .settingMenu {
--mainColor:#FCFCFC; color: var(--textColor);
--textColor:#0000; */ font-size: 1.56rem;
} margin: 0 10px;
}
.whiteTheme {
--bgColor: #F3F4F6; .searchBar {
--mainColor: #FCFCFC; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0
--textColor: #1D1B1F; 6px 20px 0 rgba(0, 0, 0, 0.19);
gap: 12px;
} display: flex;
padding: 12px 24px;
width: 365px;
border-radius: 20px;
.logo img { border: none;
width: 160px; outline: none;
} background: var(--mainColor);
color: var(--textColor);
section { font-size: 1.2rem;
padding: 2px 5%;
} }

header { .searchIcon {
padding: 2px 5%; background: var(--mainColor);
display: flex; color: var(--textColor);
justify-content: space-between; font-size: 1.2rem;
align-items: center; }
position: relative;
top: -25px; /* container */
} .container {
gap: 50px;
input[type="text"] { display: flex;
width: 304px; width: 100%;
border: none; }
outline: none;
background: var(--mainColor); .leftContainer {
color: var(--textColor); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0
font-size: 1rem; 6px 20px 0 rgba(0, 0, 0, 0.19);
} display: flex;
flex-direction: column;

13
 WEATHER WEB APPLICATION 2024

justify-content: space-evenly; display: grid;

padding: 12px 24px; grid-template-columns: repeat(auto-fill,
color: var(--textColor); minmax(220px, 1fr));
/* color: #7B7980; */ background-color: var(--mainColor);
background: var(--mainColor); width: 880px;
border-radius: 20px; height: auto;
/* border: 1px solid red; */ }
width: 300px;
height: 300px; .contentBox {
} padding: 24px 12px;
background: var(--bgColor);
.leftCImage { color: var(--textColor);
gap: 25px; border-radius: 20px;
align-items: center; width: 100%;
display: flex; height: 100%;
} /* transition: all 0.25s ease; */
}
.leftCImage h2 {
font-size: 2rem; .contentBox p {
} text-align: left;
/* padding:5px 0; */
.leftLow { }
border-top: 1px solid;
} .insideContent {
margin-top: 20px;
.leftLow p { display: flex;
margin: 15px 0; justify-content: space-between;
}
}
.leftUp {
line-height: 0; .cal-city {
} margin: 0 0 -15px 0;
display: flex;
.rightContainer { align-items: center;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 gap: 10px;
6px 20px 0 rgba(0, 0, 0, 0.19); }
align-items: center;
border-radius: 20px; .setting {
padding: 12px 24px; cursor: pointer;
gap: 20px; align-items: center;

14
 WEATHER WEB APPLICATION 2024

gap: 12px; display: flex;

display: flex; justify-content: center;
} align-items: center;
height: 100vh;
[Link]:hover { margin: 0;
background: var(--textColor); text-align: center;
color: var(--bgColor); }

} .sun_moon {
display: flex;
[Link] { gap: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 }
6px 20px 0 rgba(0, 0, 0, 0.19);
align-items: center; /* loader */
background: var(--mainColor);
color: var(--textColor); .loader {
border-radius: 50%; border: 4px solid #f3f3f3;
padding: 8px 12px; border-top: 4px solid #3498db;
} border-radius: 50%;
width: 40px;
.insideContent h1 { height: 40px;
font-weight: 100; animation: spin 1s linear infinite;
} margin: 0 auto 10px;
}
.insideContent h2 {
font-weight: 100; #loadp {
} text-align: center;
}
.sunRise {
line-height: 2; @keyframes spin {
align-items: center; 0% {
text-align: center; transform: rotate(0deg);
font-weight: bolder; }
}
100% {
.loader-container { transform: rotate(360deg);
flex-direction: column; }
width: 100%; }
text-align: center;
color: #ffff; /* responsive */

15
 WEATHER WEB APPLICATION 2024

@media (max-width:880px) { }
.rightContainer {
width: 380px; @media (max-width:600px) {
} .container {
} justify-content: center;
flex-wrap: wrap;
@media (max-width:760px) { }

/* .setting{ .rightContainer {
position: absolute; width: 300px;
top: 123px; }
} */ }
.searchBar { @media (max-width:330px) {
position: absolute; [Link]{
top: 123px; padding: 4px 8px;
width: 90%; }
} .setting{
gap: 4px;
input[type="text"] { }
width: 100%; }
}

JAVASRCIPT: [Link](".city").innerText =
[Link] + ", " + countryCode([Link])
let city = "mumbai"
[Link]("temp").innerText =
let userUnit="metric"
[Link]([Link]) + "" +
let DEGREE="C"
[Link](176) + DEGREE
let SPEED="m/s"
[Link]("windStatus").innerTex
const apiKey =
t = ([Link]).toFixed(1) +" "+SPEED
"10d696a846bb58e1b7f8c9abef6f5c4d"
[Link]("Humidity").innerText
= [Link] + " %"
[Link]("Visibility").innerText
async function checkWeather() {
= ([Link]) / 1000 + " km"
const apiURL =
[Link]("Pressure").innerText =
`[Link]
[Link] + " hPa"
units=${userUnit}&q=${city}`
[Link]("Feels").innerText =
const response = await fetch(apiURL +
[Link]([Link].feels_like) + " " +
`&appid=${apiKey}`)
[Link](176) + DEGREE
// [Link](city)
[Link]("sunRise").innerText =
let data = await [Link]();
[Link]([Link],
// [Link](data);

16
 WEATHER WEB APPLICATION 2024

'X').add([Link], 'seconds').format('HH:mm [Link] = "images/[Link]"

') + " AM" } else {
[Link]("sunSet").innerText = [Link] = "images/[Link]"
[Link]([Link], }
'X').add([Link], 'seconds').format('hh:mm ') [Link]()
+ " PM"
[Link]("skyDescription").inner
HTML=([Link][0].description) }
[Link]("weatherIcon").src=
`[Link]
er[0].icon}@[Link]` [Link](".weatherSearch").addEve
ntListener('submit', e => {
} let cityName =
[Link](".cityName");
// [Link]();
const currentDay = () => { city=[Link]
const date = new Date(); checkWeather()
[Link]();
const options = { })
weekday: 'long',
month: 'long', const countryCode = (country) => {
day: 'numeric', let regionNames = new [Link](["en"],
}; { type: "region" });
return [Link](country)
[Link](".calendar").innerText = }
[Link]('en-IN', options) currentDay()

} checkWeather()

[Link]("celsus").addEventListe
let icon = [Link]("icon"); ner('click', ()=> {
let imageLogo = if(userUnit!=="metric"){
[Link]("imageLogo"); userUnit="metric"
[Link] = (event) => { DEGREE="C"
SPEED="m/s"
[Link]("whiteTheme") checkWeather()
[Link]('bxs-moon') }
if
([Link]("whiteTheme")) })
{

17
 WEATHER WEB APPLICATION 2024

[Link]("frahtine").addEventLis const loader =

tener('click', ()=> { [Link]("loader");
if(userUnit=="metric"){ const dataContainer =
userUnit="imperial" [Link]("data");
DEGREE="F"
SPEED="mph" // Simulate API data retrieval
checkWeather() setTimeout(() => {
} [Link] = "none";
[Link] = "block";
}) // Display the API data in the dataContainer
// [Link] = checkWeather();
[Link]("DOMContentLoaded }, 2000); // Simulating a 3-second API data loading
", () => { time
});

18
 WEATHER WEB APPLICATION 2024

CHAPTER – 5 : SNAPSHOTS

19
 WEATHER WEB APPLICATION 2024

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.

CHAPTER– 7 BIBLIOGRAPHY

Website
✓ [Link]
✓ [Link]
✓ [Link]
✓ [Link]
✓ [Link]

20