Meerut Instititue of Engineering and Technology,Meerut

Session: 2023-2024
MINI PROJECT
REPORT ON

“THE WEATHER WEBSITE”

BACHELOR OF TECHNOLOGY IN COMPUTER
SCIENCE AND ENGINEERING

Data Science

Submitted to- Mr. Mudassir

Submitted By-

Aman Chhabra - 2100681540007

B Santosh Kr. Achary - 2100681540015
Gulshan Kumar - 2100681540018

5th SEMESTER
Department of CSE (DS)
Meerut Institute of Engineering and
Technology, Meerut (U.P.)
 DECLARATION
We hereby declare that the project entitled “The
Weather Website”, which is being submitted as
Mini Project in department of CSE (DS) to Meerut
Institute of Engineering and Technology, Meerut
(U.P.) is an authentic record of our genuine work
done under the guidance of “ Prof. Mudassir Sir”
of Computer Science and Engineering, Meerut
Institute of Engineering and Technology, Meerut.

Aman Chhabra - 2100681540007

B Santosh Kr. Achary - 2100681540015
Gulshan Kumar - 2100681540018
DATE: _______________

PLACE: ______________
 CERTIFICATE
This is to certify that mini project entitled “The
Weather Website” submitted by B Santosh
kumar , Aman Chhabra and Gulshan Kumar has
been carried out under the guidance of Prof.
Mudassir Sir of Computer Science and
Engineering, Meerut Institute of Engineering and
Technology, Meerut. This project report is
approved for Mini Project (KCS 554) in 5th
semester in CSE (DS) from Meerut Institute of
Engineering and Technology, Meerut.

DATE: _______________
 ACKNOWLEDGEMENT

We express our sincere indebtedness towards our

guide Prof. Mudassir Sir of Computer Science and
Engineering, Meerut Institute of Engineering and
Technology, Meerut for his valuable suggestion,
guidance and supervision
throughout the work. Without his kind patronage
and guidance, the project would not have taken
shape. We would also like to express our gratitude
and sincere regards for his kind approval of the
project time to time counseling and advises.
We would also like to thank our HOD Prof. “Mr.
Rohit Aggrawal”, Department of CSE (DS), Meerut
Institute of Engineering and Technology, Meerut for
his expert advice and counseling from time to time.
We owe sincere thanks to all faculty members in
the department of CSE (DS) for their kind guidance
and encouragement from time to time.

Aman Chhabra - 2100681540007

B Santosh Kr. Achary - 2100681540015
Gulshan Kumar - 2100681540018
 Table of contents

DESCRIPTION PAGE NO.

Declaration 2
Certificate 3
Acknowledgement 4
Introduction 5
Technology Budget 7-9
• Description of HTML
• Description of CSS

• Description of Java Script

Implementation 10-15
CodeAnd
Output screens
References 16
 “THE WEATHER
WEBSITE”
INTRODUCTION

• “The Weather Website” has been developed to

evaluate the knowledge of the participants
about the current weather around the World as
well as beyond academics and to make them
familiar with the prospects of weather and the
objectivity to develop this “Weather Website”
is to make the participants about the current
weather around the World .
• This system is designed for the main purpose to
develop the interest in subject areas of the
Nature and Environment including all the other
aspects of Weather. “Weather Website” is a
type of source of Knowledge & Entertainment in
which the general or specific knowledge of the
players is being increased by a series of
different locations weather as like as the
Weather Forecast. No formal knowledge is
 needed for the user to access this “Weather
Website”. Thus, by all this it proves it is user
friendly website. The main objective of this
project is to help your students to collect or
increase knowledge about the different types of
weather in the different region and different
Environment.

Technologies Used:

•HTML : Hyper Text Markup Language (HTML) is

the standard markup language. This is used to
structure a webpage and its content.
• CSS : Cascading Style Sheets (CSS) is used to style
and layout or create visually engaging webpage’s,
user interfaces for web application, and user
interfaces for many mobile applications.
• JAVA SCRIPT : JAVASCRIPT is the world’s most
popular lightweight, interpreted compiled programming
language. It is also known as scripting language for web
pages. It can be used for client-side as well as server-side
developments.
 TECHNOLOGY BUCKET
DESCRIPTION OF HTML

• The <! DOCTYPE html> declaration defines this

document to be HTML.
• The < html> tag encloses the complete html file and
contains the header i.e. <head>.... </head> tag and the
body tag i.e. <body>.
</body>.

• The <head> tag contains the header of the file

and also contains the <title>... </title> tag and the
<style>. </style> tag of css.
• The <title> tag contains the title of the html file
whichshows in the header of the browser.
• The <body> tag contains all the contents of an html
document such as headings, paragraphs, images,
hyperlinks, tables, lists etc.
• The <h1> tag in html indicates a heading on a website.
Html has six different heading tags – h1, h2, h3, h4, h5,
h6. The <div> tag in html defines a division or a section
in an html document.
 DESCRIPTION OF CSS

• The CSS is used for describing the

presentation of a document written in a
markup language like html.
• The background-image property is used for
set the image in the background. Syntax: body
{background-image: url (‘file name’);}

• In the CSS, a class selector is a name preceded

by a full stop (“.”) and an ID selector is a name
preceded by a hash character (“#”).
• ID is used to identify one element and class is
usedto identify more than one element.

• Margin and padding are the two most

commonly used properties for spacing out
elements. Margin is the space outside
something and padding is the space inside
something.
• The border radius property defines the radius
ofthe element’s corners.
 1.DESCRIPTION OF
JAVASCRIPT JAVASCRIPT
JAVASCRIPT is the world’s most popular lightweight,
interpreted compiled programming language. It is also
known as scripting language for web pages. It can be
used for client- side as well as server-side
developments. JAVASCRIPT can be added to your
HTML file in two ways:
•INTERNAL JAVASCRIPT – We can add JAVASCRIPT
code
directly to your HTML file by writing the code inside
the Example – its is the basic example of JAVASCRIPT
code embedded in HTML file
•EXTERNAL JAVASCRIPT FILE – We can
create a file with.js

extension and paste the

JAVASCRIPT code inside it.
After creating the file, add this
file in <script src=
”file_name.js”> tag inside
<head> tag of the HTML file.

OUTPUT SCREENS
• HOME PAGE:

• OUTPUT PAGE : NEW DELHI

• OUTPUT PAGE : MEERUT

• OUTPUT PAGE : TOKYO
 IMPLEMENTATION CODE

• HTML 1 :
• <!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="preconnect" href="https://fonts.gstatic.com">
• <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet">
• <link rel="stylesheet" href="./style.css">
• <script src="./script.js" defer></script>
• <!-- defer is used to that button will run after the event created -->
• </head>
•
• <body>
• <div class="card">
• <div class="search">
• <input type="text" class="search-bar" placeholder="Search">
• <button><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0
1024 1024" height="1.5em"
• width="1.5em" xmlns="http://www.w3.org/2000/svg">
• <path
• d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-
87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8
112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8
182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4
570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188
412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2
636 412s-23.3 116.1-65.6 158.4z">
• </path>
• </svg></button>
• </div>
• <div class="weather loading">
• <h2 class="city">Weather in New Delhi</h2>
• <h1 class="temp">51°C</h1>
• <div class="flex">
• <img src="https://openweathermap.org/img/wn/04n.png" alt="" class="icon" />
• <!-- default cloud image if u want to chnage in js -->
• <div class="description">Cloudy</div>
• </div>
• <div class="humidity">Humidity: 60%</div>
• <div class="wind">Wind speed: 6.2 km/h</div>
 • </div>
• </div>
• </body>
</html>

• CSS :
body {
display: flex;
/* flex is used to align */
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Open Sans', sans-serif;
background: #222;
background-image: url('https://source.unsplash.com/1600x900/?landscape');
font-size: 120%;
}

.card {
background: #000000d0;
color: white;
padding: 2em;
border-radius: 30px;
width: 100%;
max-width: 420px;
margin: 1em;
}

.search {
display: flex;
align-items: center;
justify-content: center;
}

button {
margin: 0.5em;
 border-radius: 50%;
border: none;
height: 44px;
width: 44px;
outline: none;
background: #7c7c7c2b;
color: white;
cursor: pointer;
/* for cursor to become pointer */
transition: 0.2s ease-in-out;
}

input.search-bar {
border: none;
outline: none;
padding: 0.4em 1em;
border-radius: 24px;
background: #7c7c7c2b;
color: white;
font-family: inherit;
font-size: 105%;
width: calc(100% - 100px);
/* for space b/w search bar and button */
}

button:hover {
background: #7c7c7c6b;
}

h1.temp {
margin: 0;
margin-bottom: 0.4em;
}

.flex {
display: flex;
align-items: center;
}
.description {
text-transform: capitalize;
/* to capitalize text */
margin-left: 8px;
}

.weather.loading {
visibility: hidden;
max-height: 20px;
position: relative;
}
/* after is pesudo element */
.weather.loading:after {
visibility: visible;
content: "Loading...";
color: white;
position: absolute;
top: 0;
left: 20px;
}
 • JAVA SCRIPT :
// creating obejects for storing function and variablr
• let weather = {
• apiKey: "13d926707d93d97cd9826a10800fb76b",
• // fetch function creating city is parameter
• fetchWeather: function (city) {
• fetch(
• "https://api.openweathermap.org/data/2.5/weather?q=" +
• city +
• "&units=metric&appid=" +
• this.apiKey
• )
• .then((response) => {
• if (!response.ok) {
• alert("No weather found.");
• throw new Error("No weather found.");
• }
• return response.json();
• })
• .then((data) => this.displayWeather(data));
• },
• // display function creating data is parameter
• displayWeather: function (data) {
• const { name } = data;
• const { icon, description } = data.weather[0];
• const { temp, humidity } = data.main;
• const { speed } = data.wind;
• document.querySelector(".city").innerText = "Weather in " + name;
• // to display info on page
• document.querySelector(".icon").src =
• "https://openweathermap.org/img/wn/" + icon + ".png";
• // above link is display icon like cloud smoke etc
• document.querySelector(".description").innerText = description;
• document.querySelector(".temp").innerText = temp + "°C";
• document.querySelector(".humidity").innerText =
• "Humidity: " + humidity + "%";
• document.querySelector(".wind").innerText =
• "Wind speed: " + speed + " km/h";
• document.querySelector(".weather").classList.remove("loading");
• document.body.style.backgroundImage =
• "url('https://source.unsplash.com/1600x900/?" + name + "')";
• },
• // code for search button for searching
• search: function () {
• this.fetchWeather(document.querySelector(".search-bar").value);
• },
• };
•
• document.querySelector(".search button").addEventListener("click", function () {
• weather.search();
• });
•
• document
• .querySelector(".search-bar")
• .addEventListener("keyup", function (event) {
• if (event.key == "Enter") {
• weather.search();
• }
• });
•
• weather.fetchWeather("New Delhi");
• // for default
 REFERENCES

There are the following sources which I

have used inthe preparation of web
designing project:

• https://developer.mozilla.org/en-US/
• https://www.google.com/
• https://
chromewebstore.google.com/detail/
weather/
• weatherextension.com
• https://www.w3schools.com/
THANK
YOU