LNCT UNIVERSITY

RAISEN ROAD,BHOPAL,MADHYA PRADESH

DEPARTMENT OF CSE-A.I.M.L

AN REPORT

ON

MINOR PROJECT

“BANK MANAGEMENT SYSTEM ”

SUBMITED BY :- SUBMITED TO:-

Muskan Verma (LNCCBTC11145) Prof. Gaurav Kishor

Saxena Kundan Singh (LNCCBTC11138) Department Of CSE

Himanshu Sakalle (LNCCBTC11128)

APPROVED BY:-
Dr. AK Sachan

Principal

LNCT University, Bhopal

 CANDIDATE’S DECLARATION
I/We Muskan Verma, Himanshu Sakalle, Kundan Singh student of Bachelor of
Technology, Computer Science & Engineering-AIML, Lakshmi Narain College of
Technology University, Bhopal hereby declare that the work presented in the
project entitled "Weather App" is outcome of my own bona-fide work, which is
correct to the best of my knowledge and this work has been carried out taking
care of Engineering Ethics. The work presented does not infringe any previous
work and has not been submitted to any University for the award of any
degree / diploma.

The project entitled “ WEATHER APP ” being submitted by "Muskan Verma"

(LNCCBTC11145) "Himanshu Sakalle " (LNCCBTC11128) and "Kundan Singh"
(LNCCBTC11138) has been examined by us and is hereby approved for the
award of degree "Bachelor of Technology in Computer Science & Engineering-
AIML", for which it has been submitted. It is understood that by this approval
the undersigned do not necessarily endorse or approve any statement made,
opinion expressed or conclusion drawn there in, but approve the project only
for the purpose for which it has been submitted.

MUSKAN VERMA (LNCCBTC11145)

KUNDAN SINGH (LNCCBTC11138)

HIMANSHU SAKALLE (LNCCBTC11128)

 CERTIFICATE
This is to certify that the project entitled " WEATHER APP With HTML, CSS
AND JAVASCRIPT " is the bona-fide work carried out independently by
“MUSKAN VERMA" , "KUNDAN SINGH" and "HIMANSHU SAKALLE" student of
Bachelor of Technology, Department of Computer Science & Engineering-AIML
from Lakshmi Narain College Of Technology University, Bhopal. In the partial
fulfilment of the requirement for the award of the degree of Bachelor of
Technology, and this project has not formed previously the basis for the award
of any degree, diploma, associate ship, fellowship or any other similar title
according to our knowledge.

SUPERVISED BY:- FORWARDED BY:-

Prof. Gaurav Kishor Saxena Dr. Megha Kamble

Department of CSE (Head Department of

CSE) LNCT University ,Bhopal LNCTU ,Bhopal

APPROVED BY:-
Dr. AK Sachan

Principal

LNCT University, Bhopal

 ACKNOWLEDGEMENT
First and foremost, we extend our heartfelt gratitude to our project advisor,
Prof. Gaurav Kishor Saxena,(Dept. of CSE), for his invaluable mentorship,
unwavering support, and expert insights, which played a pivotal role in shaping
the direction of this project. We are immensely thankful for the
encouragement and assistance provided by our friends and fellow students,
who were a constant source of motivation throughout this journey. The library
staff and university resources also deserve our appreciation for providing the
necessary materials and facilities for our research.

We would like to extend our special thanks to Dr. Megha Kamble, (Head of the
Department, CSE AIML) for her continued support and for creating an
environment that fosters learning and research. Additionally, we are deeply
grateful to our respected subject teacher, Lastly, we want to acknowledge the
unwavering support and understanding of our families, who stood by us during
this challenging endeavour. Their encouragement and belief in us were our
constant motivation. This project would not have been possible without their
collective support, and for that, we are truly thankful.

Lastly I would also like to thank my friends who helped me a lot in finalizing
this project within the limited time frame.

I hope you will too acknowledge our efforts optimistically.

MUSKAN VERMA

KUNDAN SINGH

HIMANSHU SAKALLE
 ABSTRACT

Nowadays we face a huge problem that knowing real weather status instantly
in such a place we need to know.it is often complex and challenging skill that
involves observing and processing vast amount of data Weather systems can
range from small, short lived thunderstorms only a few miles in diameter that
last a couple of hours to large scale rain and wind up to a thousand miles in a
diameter, and lasting for days. So most of the time we cannot get the real
weather forecast and face a lot of troubles. We have another problem in
weather forecasting. To do this effectively technology can help a lot. In this
android app is developed with the help of Android Studio and API we will help
the user to get to know about real-time weather updates of a particular place.

Weather forecasting is the attempt by meteorologists to predict the weather

conditions at some future time and the weather conditions that may be
expected. The climatic condition parameters are based on the temperature,
wind, humidity, rainfall and size of data set.

The main aim of this project “WEATHER APP” is to provide knowledge about
the real-time weather updates of a particular place.
S.NO. CONTENTS PAGE NO.
1. DESCRIPTION 07

2. INTRODUCTION OF THE PROJECT 08-15

3. SOURCE CODE 16-23

4. OUTPUT 24-26
 DESCRIPTION

Our WEATHER APP provides the real-time weather updates of different locations .
The interface of ours comes with the facility that help us to find the weather updates
of a particular place . First feature of its allow us to enter the location whose weather
updates we want . After the location is enter it shows the temperature , description ,
humidity and wind-speed of that particular location. And the next feature change the
image of weather as per the description .

The last feature of it shows in any case if we enter some wrong location it will
immediately display the image with location not found .

Some Pros of this project are:

1.It provides the users with an easy and friendly interface.

2.It provides the users with the temperature of a particular region .

3.It will also show humidity ,wind speed and cloud .

 INTRODUCTION OF THE PROJECT

“WEATHER APP”
This proposed system provides the weather of different cities
around the world and the user can view weather for which they
search for. The system can track Local and National Weather .

Weather App is the application of science and technology to

predict the conditions of the atmosphere for a given location and
time. Weather forecasts are made by collecting quantitative data
about the current state of the atmosphere, land, and ocean and
using meteorology to project how the atmosphere will change at a
given place. It is very important to get educated on the current
weather situation of a particular location as preferred since it
affects the day to day life of everyone. It is more effective if we can
get quickly updated on current weather status of a required
location, as it makes it easy to handle not only our activities, but
also our livelihoods too. A huge problem that we are facing
nowadays is inability to know real weather status in such places. So
if we need to know the current situation in a certain place, it is
better to ask from a person who is in that area recently or
currently. He is a better source than any prevailing weather
information.
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
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
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
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
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

PROJECT CATEGORY: Language used in this project are HTML, CSS and
JAVASCRIPT.

ABOUT THE PROGRAMMING LANGUAGE:

HTML

HyperText Markup Language(HTML) is the most basic building block of the Web. It
defines the meaning and structure of web content. Other technologies besides HTML
are generally used to describe a web page's appearance/presentation (CSS) or
functionality/behavior (Javascript).

"Hypertext" refers to links that connect web pages to one another, either within a
single website or between websites. Links are a fundamental aspect of the Web. By
uploading content to the Internet and linking it to pages created by other people, you
become an active participant in the World Wide Web.

HTML uses "markup" to annotate text, images, and other content for display in a
Web browser.

1. User Friendly & Simple

You can write HTML using annotations called tags. Tags give HTML a structure and
make it easy for humans and browsers to read the document efficiently. They also
enable a browser to apply CSS (Cascaded StyleSheets) to the digital document,
making it a powerful visual combination.

While HTML comes with 100s of tags inbuilt, only a handful of them that a developer
needs to learn for everyday use. Of course, all tags hold value; most of them don’t
find usage in normal development.

2. Semantic Structure

HTML5 defines unique tags to annotate different elements for their specific purposes.
The <article> tag, for example, is used to annotate content on a page. The <aside> tag
represents some content that is indirectly related to the document’s primary content.
Other noteworthy elements are <header>, <footer>, <div>, the paragraph
tag <p>, and the one most used for navigation between pages, the <a> tag.

3. SEO – Search Engine Optimisation

SEO is by far the biggest USP (Unique Selling Point) of HTML5. With the advent of
search engines like Google, Yahoo!, DuckDuckGo etc., you have so much information
literally at your fingertips. These search engines accumulate information on the
World Wide Web using computer programs that crawl the internet (also called web
crawlers) and map keywords with respective documents in which they find it. These
web crawlers can assimilate this data only because HTML is well structured, and you
can optimise your web pages for searchability.
To highlight SEO, let me bring to your attention that this page is also SEO optimised
and should appear for the search query “Top features of HTML”. You can even make
use of the semantic structure of HTML for Search Engines using tags
like <title>, <meta> with description, <header> etc., to let the web crawler know
about the critical keywords in the document.

4. localStorage & IndexedDB – Client-side data storage

HTML5 comes with essential improvements in storage capabilities on the client’s

side. The localStorage and sessionStorage are crucial features that help developers
store information on the client’s side. These are essential advancements in browser
storage capabilities because cookies limit data storage size on the client side. One can
store small pieces of information like authentication tokens or usernames on the
client using cookies. Still, localStorage API is where storage comes in handy for users
when they revisit the web application. Imagine not having to repeatedly load some
standard information on the client, which saves a lot of resources for both client and
server. The sessionStorage API enables a developer to persist information just for
that session. Meaning, the data is wiped out as soon as the user closes that tab. This
feature comes in handy for browser-based games or high-security applications that
have a limited session.

IndexedDB takes client-side storage a step beyond what localStorage does. While you
could potentially store a lot of data with localStorage in a key-value form where both
are strings, you can store more complex and significant data in the key-value form
using IndexedDB. The key is a string, and the value to be stored is a native JavaScript
object. Oh, and this object will persist through the IndexedDB until someone explicitly
removes it.

IndexedDB enables the web application to store data on the client-side, i.e. the
browser, and allows your web application to continue functioning even with flaky or a
dropped internet connection. Let us talk more about this in the next feature.

5. Offline Capabilities (PWA) with Cache API & Service Workers

Imagine if you could build a web application that works even when the user’s internet
is down. Well, you don’t have to imagine because, with the advent of Service
Workers, IndexedDB and Cache API, you could very well make this a reality. Your web
application could offer a native-like experience to your users. Many applications
like Flipkart already do this, and it’s called a PWA (Progressive Web Application).
Service Workers act as a proxy between the user’s machine and the internet. They
can store files locally and fetch them when needed via the Cache API and can also
bring information from the IndexedDB to provide the application with data. So, when
there’s no internet on a user’s device, the Service Worker intercepts these requests
and serves them from the locally stored data. You can configure your service worker
to update these files periodically or on-demand.

6. Canvas for Game Development

You can use HTML5 to build some simple games; however, if you’re looking to make a
good video game, you can utilise the <canvas> element along with CSS and
JavaScript. Canvas enables you to build 2D and 3D games. You can make these games
as interactive as you’d like.

7. Platform Independent

HTML runs on a browser, and you can find a browser on almost any device with a
simple Operating System. If you had used mobile phones before smartphones were a
thing, you would know that even old Nokia phones that ran Symbian OS could open
HTML pages.

8. Media Support

HTML can display images, video and audio; therefore, it enjoys excellent media-
running capabilities. HTML5 came up with <video> and <audio> tags making this a lot
easier than before. Of course, with HTML5, you can go beyond just playing media;
you can specify controls, images for buttons and even control the playback
programmatically.

CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation of a document written in a markup language such
as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a
cornerstone technology of the World Wide Web, alongside HTML and Javascript.

CSS is designed to enable the separation of content and presentation , including

layers, colors and fonts. This separation can improve content accessibility ; provide
more flexibility and control in the specification of presentation characteristics; enable
multiple web pages to share formatting by specifying the relevant CSS in a
separate .css file, which reduces complexity and repetition in the structural content;
and enable the .css file to be cached to improve the page load speed between the
pages that share the file and its formatting.

Separation of formatting and content also makes it feasible to present the same
markup page in different styles for different rendering methods, such as on-screen, in
print, by voice (via speech-based browser or screen reader ), and on Braille
based tactile devices. CSS also has rules for alternate formatting if the content is
accessed on a mobile devices.

Some key concepts of CSS are as follows :

 The syntax and forms of the language.

 Specificity, inheritance, and the Cascade.
 CSS units and values and functional notations.
 Box model and margin collapse.
 The containing block.
 Stacking and block-formatting contexts.
 Initial, computed, used, and actual values.
  CSS shorthand properties.

Some important usage of CSS:

1) Faster Page Speed

More code means slower page speed. And CSS enables you to use less code. CSS
allows you to use one CSS rule and apply it to all occurrences of a certain tag within
an HTML document.

2) Better User Experience

CSS not only makes web pages easy on the eye, it also allows for user-friendly
formatting. When buttons and text are in logical places and well organized, user
experience improves.

3) Quicker Development Time

With CSS, you can apply specific formatting rules and styles to multiple pages with
one string of code. One cascading style sheet can be replicated across several website
pages. If, for instance, you have product pages that should all have the same
formatting, look, and feel, writing CSS rules for one page will suffice for all pages of
that same type.
 4) Easy Formatting Changes

If you need to change the format of a specific set of pages, it’s easy to do so with CSS.
There’s no need to fix every individual page. Just edit the corresponding CSS
stylesheet and you’ll see changes applied to all the pages that are using that style
sheet.

5) Compatibility Across Devices

Responsive web design matters. In today’s day and age, web pages must be fully
visible and easily navigable on all devices. Whether mobile or tablet, desktop, or even
smart TV, CSS combines with HTML to make responsive design possible
JAVASCRIPT

JavaScript is a lightweight programming language commonly used by web

developers to add dynamic interactions to web pages, applications, servers, and
even games.
It works seamlessly alongside HTML and CSS, complementing CSS in formatting
HTML elements while providing user interaction, a capability that CSS alone lacks.
JavaScript’s widespread applications in web, mobile app, and game development
make it a valuable language to learn.

JavaScript is both an imperative and declarative type of language. JavaScript contains

a standard library of objects, like Array, Date, and Math, and a core set of language
elements like operators, control structures, and statements

Some key features of javascript are as follows :

 Light Weight Scripting language

 Dynamic Typing

 Object-oriented programming support

 Functional Style

 Platform Independent

 Prototype-based

 Interpreted Language

 Single-threaded

 Async Processing

 Web Workers

 Client-Side Validation

 More control in the browser

 SOURCE CODE

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">
<title>Weather App </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="search-box">
<input type="text" placeholder="Enter your location" class="input-box">

<button class="fa-solid fa-magnifying-glass" id="searchBtn"></button>

</div>
</div>

<div class="location-not-found">
<h1>Sorry, Location not found!!!</h1>
<img src="/images/ 404.png" alt="404 Error">
</div>

<div class="weather-body">
<img src="/images/cloud.png" alt="Weather Image" class="weather-img">

<div class="weather-box">
<p class="temperature">0 ^°C</p>
<p class="description">light rain</p>
</div>

<div class="weather-details">
<div class="humidity">
<i class="fa-sharp fa-solid fa-droplet"></i>
<div class="text">
 <span id="humidity">45%</span>
<p>Humidity</p>
</div>
</div>

<div class="wind">
<i class="fa-solid fa-wind"></i>
<div class="text">
<span id="wind-speed">12Km/H</span>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
</div>

<script src="script.js"></script>
<script src=" https://kit.fontawesome.com/788ac56b09.js "
crossorigin="anonymous"></script>
</body>
</html>
JAVASCRIPT

const inputBox = document.querySelector('.input-box');

const searchBtn = document.getElementById('searchBtn');
const weather_img = document.querySelector('.weather-img');
const temperature = document.querySelector('.temperature');
const description = document.querySelector('.description');
const humidity = document.getElementById('humidity');
const wind_speed = document.getElementById('wind-speed');

const location_not_found = document.querySelector('.location-not-found');

const weather_body = document.querySelector('.weather-body');

async function checkWeather(city){

const api_key = " 63adda9fce04bc7c2735e9f174dfa519";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=$
{api_key}`;

const weather_data = await fetch(`${url}`).then(response => response.json());

if(weather_data.cod === `404`){

location_not_found.style.display = "flex";
weather_body.style.display = "none";
console.log("error");
return;
}

console.log("run");
location_not_found.style.display = "none";
weather_body.style.display = "flex";
temperature.innerHTML = `${Math.round(weather_data.main.temp - 273.15)}°C`;
description.innerHTML = `${weather_data.weather[0].description}`;

humidity.innerHTML = `${weather_data.main.humidity}%`;
wind_speed.innerHTML = `${weather_data.wind.speed}Km/H`;

switch(weather_data.weather[0].main){
case 'Clouds':
weather_img.src = "/images/cloud.png";
 break;
case 'Clear':
weather_img.src = "/images/clear.png";
break;
case 'Rain':
weather_img.src = "/images/rain.png";
break;
case 'Mist':
weather_img.src = "/images/mist.png";
break;
case 'Snow':
weather_img.src = "/images/snow.png";
break;

console.log(weather_data);
}

searchBtn.addEventListener('click', ()=>{
checkWeather(inputBox.value);
});
CSS

*{

margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
outline: none;
font-family: sans-serif;
}

body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}

.container{
width: 400px;
height: min-content;
background-color: #fff;
border-radius: 12px;
padding: 28px;
}

.search-box{
width: 100%;
height: min-content;
display: flex;
justify-content: space-between;
align-items: center;
}

.search-box input{
width: 84%;
font-size: 20px;
text-transform: capitalize;
 color: #000;
background-color: #e6f5fb;
padding: 12px 16px;
border-radius: 14px;
}

.search-box input::placeholder{
color: #000;
}

.search-box button{
width: 46px;
height: 46px;
background-color: #e6f5fb;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
}

.search-box button:hover{
color: #fff;
background-color: #ababab;
}

.weather-body{
justify-content: center;
align-items: center;
flex-direction: column;
margin-block: 20px;
display: none;
}
.weather-body img{
width: 60%;
}

.weather-box{
margin-block: 20px;
text-align: center;
}

.weather-box .temperature{
font-size: 40px;
font-weight: 800;
position: relative;
}

.weather-box .temperature sup{

font-size: 20px;
position: absolute;
font-weight: 600;
}

.weather-box .description{
font-size: 20px;
font-weight: 700;
text-transform: capitalize;
}

.weather-details{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 30px;
}

.humidity, .wind{
display: flex;
align-items: center;
}

.humidity{
margin-left: 20px;
}

.wind{
margin-right: 20px;
}

.weather-details i{
font-size: 36px;
}

.weather-details .text{
margin-left: 10px;
font-size: 16px;
}

.text span{
 font-size: 20px;
font-weight: 700;
}

.location-not-found{
margin-top: 20px;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
}

.location-not-found h1{
font-size: 20px;
color: #6b6b6b;
margin-block-end: 15px;
}
.location-not-found img{
width: 80%;
}
OUTPUT

(1)

(2)

(3)
(4)

(5)
IN CASE WE ENTER WRONG LOCATION: