MEERUT INSTITUTE OF TECHNOLOGY

SESSION : 2023-24
MINI PROJECT REPORT on

WEATHER APP
BACHELOR OF TECHNOLOGY IN COMPUTER
SCIENCE AND TECHNOLOGY

Submitted to

(Department of Computer Science & Engineering)

Submitted By
NAME : ANMOL GARG
ROLL No. : 2102920100020

SECTION :A
SEMESTER : 5TH
[ DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING/IT/EC/EE/BT/ME(MIT)
MEERUT ]
 DECLARATION

We hereby declare that the project entitled - “WEATHER INFO”,

which is being submitted as Mini Project in department of
Computer Science and engineering to Meerut Institute of
Technology, Meerut (U.P.) is an authentic record of our genuine
work done under the guidance of Prof. “Mohd Ansari” of
Computer Science and Engineering, Meerut .
 CERTIFICATE

This is to certify that mini project report entitled – “WEATHER

INFO” submitted by “ANMOL GARG” has been carried out
under the guidance of Prof. “MOHD. ANSARI ” of Computer
Science and Engineering, Meerut Institute of Technology,
Meerut. This project report is approved for MINI PROJECT(KCS
554) in 5TH semester in “Computer Science and Engineering ”
from Meerut Institute of Technology, Meerut.

INTERNAL EXAMINER
Mohd. ANSARI
DATE : 08-02-2023
 ACKNOWLEDGEMENT

I express my sincere gratefulness towards our guide Prof.,

“MOHD. ANSARI” of Computer Science and Engineering, Meerut
Institute of Technology, Meerut for his valuable suggestion,
guidance and supervision throughout the work. Without his king
patronage and guidance the project would not have taken
shape. I would also like to express my gratitude and sincere
regards for his kind approval of the project. Time to time
counseling and advises.I would also like to thank to our faculty
members in the department of Computer Science and
engineering, Meerut Institute of Engineering and Technology,
for their kind guidance and encouragement time to time.

DATE : 08-02-2023 NAME: ANMOL GARG

 TABLE OF CONTENT

 Description
 Declaration
 Certificate
 Acknowledgement
 Introduction
 Flowchart
 System Design
 Technologies Used
 Source Code
 Output Screen
 References
 INTRODUCTION

Welcome to the unveiling of our Weather App project—a digital

creation born from the amalgamation of HTML, CSS, and
JavaScript, aimed at revolutionizing how we interact with
weather forecasts. In today's fast-paced world, access to real-
time weather updates is a necessity. Our project endeavors to
bridge this gap by crafting an intuitive and accessible Weather
App. This application serves as a testament to the seamless
integration of HTML, CSS, and JavaScript, each playing a
unique role in shaping the user experience. HTML, the
backbone of the web, structures the app's layout and content.
CSS steps in to style and beautify, ensuring an appealing and
user-friendly interface. Meanwhile, JavaScript adds the magic,
making the app dynamic by enabling live updates and
interactive features. This report provides an in-depth
exploration of our journey in conceptualizing, designing, and
coding this Weather App. We'll delve into the intricacies of each
language's contribution, uncovering how their synergy brings
forth an application that not only provides weather data but
also simplifies its interpretation for users. Join us as we
navigate through the coding intricacies and design decisions,
aiming to create a tool that amalgamates technology with
meteorological insights, making weather tracking an effortless
and engaging experience for all.
 System Design
Architecture Overview
The Weather App's architecture hinges on the fusion of HTML,
CSS, and JavaScript. HTML forms the structural base, CSS
enhances visuals, and JavaScript enables dynamic interactions.
Leveraging weather APIs, the app fetches and processes real-
time data, presenting users with an intuitive interface for easy
weather tracking. This layered approach ensures a responsive,
user-friendly experience.
Components
HTML Structure: Forms the foundational structure, outlining
the layout and content presentation of the application.
CSS Styling: Enhances the visual appeal and user experience
by applying styles, designs, and responsive elements to the
HTML framework.
JavaScript Functionality: Drives the dynamic aspects, enabling
user interactions, data processing, and seamless integration
with weather APIs.
Weather APIs Integration: Allows the app to retrieve real-time
weather data based on user inputs, ensuring accurate and up-to
-date information.
User Interface (UI): Presents the processed weather
information in a user-friendly format, facilitating easy
interpretation and interaction.

These components work synergistically, forming the core

elements of the Weather App, to provide users with a functional,
visually appealing, and informative platform for weather
tracking.
 Technology Used

 HTML (Hypertext Markup Language): This serves as the

backbone language, structuring the content and layout of the
Weather App. HTML provides the fundamental framework for
presenting data and elements on the web page.
 CSS (Cascading Style Sheets): Working hand-in-hand with
HTML, CSS embellishes the app's appearance by styling and
designing the HTML elements. It ensures a visually appealing
and user-friendly interface, enhancing the overall user
experience.
 JavaScript: As the dynamic engine, JavaScript facilitates the
app's interactivity. It handles user inputs, triggers actions, and
communicates with the weather APIs. JavaScript enables the
seamless integration of real-time weather updates and user
interactions within the app.
 Weather APIs (Application Programming Interfaces): These
APIs serve as the bridge between the app and external weather
services. They enable the retrieval of live weather data based
on user inputs. The integration with weather APIs ensures that
the app constantly receives accurate and updated weather
information.
Technology Integration:
The Weather App’s integration of HTML, CSS, JavaScript, and
weather APIs is pivotal. HTML structures the app’s layout, CSS
styles it for a visually appealing interface, and JavaScript adds
functionality, orchestrating user interactions and API
communication. The integration with weather APIs enables the
app to fetch current and accurate weather data, ensuring users
receive up-to-date forecasts and conditions.
 SOURCE CODE

WEATHER.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="weather.css">
</head>

<body>
<div class="card">

<div class="search">
<input type="text" placeholder="enter city name" spellcheck="false">
<button><img src="icons/search.png"></button>
</div>

<div class="error">
<p>Invalid City Name</p>
</div>

<div class="weather">
<img src="icons/clear.png" class="weather-icon">
<h1 class="temp">22°c</h1>
<h2 class="city">Meerut</h2>

<div class="details">
<div class="col">
<img src="icons/humidity.png">
<div>
<p class="humidity">50 %</p>
<p>Humidity</p>
</div>
</div>
<div class="col">
<img src="icons/wind.png">
<div>
<p class="wind">15 Km/h<p>
<p>Wind Speed</p>
</div>
 </div>
</div>
</div>

</div>

<script src="weather.js"></script>
</body>
</html>

WEATHER.CSS
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}

body{
background: #222;
}

.card{
width: 90%;
max-width: 470px;
background: linear-gradient(135deg, #00feba, #5b548a);
color: #fff;
margin: 100px auto 0;
border-radius: 20px;
padding: 40px 35px;
text-align: center;
}

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

.search input{
border: 0;
outline: 0;
background: #ebfffc;
color: #555;
 padding: 10px 25px;
height: 60px;
border-radius: 30px;
flex: 1;
margin-right: 16px;
font-size: 18px;
}

.search button{
border: 0;
outline: 0;
background: #ebfffc;
border-radius: 50%;
width: 60px;
height: 60px;
cursor: pointer;
}

.search button img{

width: 18px;
}

.weather-icon{
width: 170px;
margin-top: 30px;
}

.weather h1{
font-size: 80px;
font-weight: 500;
}

.weather h2{
font-size: 45px;
font-weight: 400;
margin-top: -10px;
}

.details{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
margin-top: 50px;
}

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

.col img{
width: 40px;
margin-right: 10px;
}

.humidity, .wind{
font-size: 28px;
margin-top: -6px;
}

.weather{
display: none;
}
.error{
text-align: left;
margin-left: 10px;
font-size: 14px;
margin-top: 10px;
display: none;
}

WEATHER.JS

const apiKey = "8ce6268382acb2c82d8070f889bd33b9";

const apiurl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";

const searchbox = document.querySelector(".search input");

const searchbtn = document.querySelector(".search button");
const weatherIcon = document.querySelector(".weather-icon");

async function checkWeather(city){

const response = await fetch(apiurl + city + `&appid=${apiKey}`);

if(response.status == 404){
document.querySelector(".error").style.display = 'block';
document.querySelector(".weather").style.display = 'none';
}
else{
var data = await response.json();
 document.querySelector(".city").innerHTML = data.name;
document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
document.querySelector(".humidity").innerHTML = data.main.humidity+"%";
document.querySelector(".wind").innerHTML = data.wind.speed + " Km\h";

if(data.weather[0].main == "Clouds"){
weatherIcon.src = "icons/clouds.png"
}
else if(data.weather[0].main == "Clear"){
weatherIcon.src = "icons/clear.png"
}
else if(data.weather[0].main == "Rain"){
weatherIcon.src = "icons/rain.png"
}
else if(data.weather[0].main == "Drizzle"){
weatherIcon.src = "icons/drizzle.png"
}
else if(data.weather[0].main == "Mist"){
weatherIcon.src = "icons/mist.png"
}
document.querySelector(".error").style.display = 'none';
document.querySelector(".weather").style.display = 'block';
}

}
searchbtn.addEventListener("click", ()=>{
checkWeather(searchbox.value);
})
OUTPUT SCREEN
 REFERENCES

In crafting the Weather App, we extend our gratitude to the

plethora of online resources, including technical documentation,
tutorials, and forums. These references provided invaluable
guidance throughout the development process, aiding in
comprehending the nuances of HTML, CSS, JavaScript, and the
integration of weather APIs. Platforms such as MDN Web Docs,
W3Schools, Stack Overflow, and various online forums offered
comprehensive insights and solutions to intricate coding
challenges. Additionally, tutorials and guides from reputable
sources like YouTube channels and tech blogs offered step-by-
step instructions and practical examples that significantly
contributed to our understanding and implementation of crucial
app functionalities. The collaborative nature of these resources
not only assisted in troubleshooting but also provided
innovative approaches to enhance the app's performance and
user interface. Their collective contribution played a pivotal role
in the successful realization of the Weather.