CHAPTER - 1

INTRODUCTION

1.1.Objective

The objective of the Weather App project is to create a user-friendly and

interactive tool that provides real-time weather forecasts. The app aims to
seamlessly integrate HTML, CSS, and JavaScript to offer an intuitive interface,
dynamic weather updates, and an engaging user experience. By utilizing these
technologies, the app seeks to bridge the gap between the user’s need for accurate
weather data and an accessible, aesthetically pleasing platform that enhances daily
interactions with weather information.

1.2.Overview

The Weather App is a digital application built using HTML, CSS, and
JavaScript to provide real-time weather updates to users. HTML serves as the
structural foundation of the app, CSS is used for styling and responsive design,
while JavaScript adds interactivity by fetching live weather data from external
APIs and updating the interface dynamically. The app aims to offer an easy-to-use,
visually appealing, and responsive platform for users to check weather forecasts
and track conditions in various locations. The project highlights the synergy
between these technologies in creating a functional, accessible, and engaging
weather tool.

1
 CHAPTER-2
FLOW CHART

FIGURE NO_2.1 – FLOW CHART

2
 CHAPTER-3
SYSTEM DESIGN

3.1.ARCHITECTURE OVERVIEW
The Weather App's architecture hinges on the fusionof HTML, CSS, and
JavaScript. HTML forms the structural base, CSSenhances visuals, and JavaScript
enables dynamic interactions.Leveraging weather APIs, the app fetches and
processesreal- time data, presenting users with an intuitive interfacefor
easyweather tracking. This layered approach ensures a responsive, user-friendly
experience.

3.2.COMPONENTS

3.2.1.HTML STRUCTURE
Forms the foundational structure, outliningthe layout and content
presentation of the application.
 DOCTYPE: Specifies that this is an HTML5 document.
 HTML Element: The root container for all content, with a language set to
English (lang="en").
 Head Section: Contains metadata, the document title, and viewport settings.
 Body Section: Contains all the visible content of the page, including the header,
navigation, main content, and footer.
 Header: Contains the page's title and navigation menu.
 Main: Holds the primary content of the webpage (e.g., articles, sections).
 Footer: Typically contains copyright information or other relevant links.

3
3.2.2.CSS STYLING:

Enhances the visual appeal and user experienceby applying styles,

designs, and responsive elementstotheHTML framework.
 Selectors: Used to target HTML elements (e.g., class, ID, or element).
 Properties: Define the style to be applied, such as color, font-size, or
background-color.
 Values: Specify the value for the property (e.g., blue for color, 16px for font-
size).

3.2.3.JAVASCRIPT FUNCTIONALITY

Drives the dynamic aspects, enablinguser interactions, data processing,

and seamless integrationwith weather APIs.
 Variables: Store data values (e.g., numbers, text).
 Functions: Blocks of code that perform tasks, such as calculations or actions
when called.
 Event Handling: Reacts to user actions like clicks or keypresses.
 DOM Manipulation: Changes HTML elements, like text or style, on the page.
 Conditionals: Makes decisions (e.g., if statements).
 Loops: Repeats code a set number of times or until a condition is met.
 Arrays/Objects: Stores multiple values or key-value pairs.

4
3.2.4.WEATHER APIS INTEGRATION:

Allows the app to retrievereal-timeweather data based on user inputs,

ensuring accurateandup-to-date information.
 Get an API key by registering on a weather service like OpenWeatherMap.
 Send a request to the weather API, providing details like the city or
coordinates.
 Parse the response from the API to extract weather data.
 Display the data (e.g., temperature, weather condition) on your site.

3.2.5.USER INTERFACE (UI):

Presents the processed weather information in a user-friendly format,

facilitating easy interpretation and interaction. These components work
synergistically, forming thecoreelements of the Weather App, to provide users
withafunctional, visually appealing, and informative platform for weather tracking.
 Layout: How content is arranged on the screen.
 Design Elements: Buttons, icons, and forms that users click or fill out.
 Typography: The style of text (font, size, color).
 Colors and Branding: Visual style that matches the brand.
 Responsiveness: Ensures the app looks good on all devices (phones, tablets,
computers).
 User Feedback: Provides messages like confirmations or errors (e.g., "form
submitted successfully").

5
 CHAPTER-4
TECHNOLOGY USED

4.1. HTML

FIGURE NO 4.1 -HTML SYMBOL

 Hypertext Markup Language (HTML) is the standard”markup language for
archives intended to be shown in an internet browser. It very well may
be”helped by advancements, for example, Cascading Style Sheets (CSS) and
scripting dialects, for example, JavaScript.
 Internet browsers get HTML reports from a web server or from nearby
capacity and render the records into mixed media site pages.
 HTML portrays the” structure of a site page semantically and initially
included signals” for the presence of the” archive.
 HTML components are the structure squares of HTML pages. With HTML
builds, pictures and different “items, for example, intelligent structures
might be implanted into the rendered page.
 HTML gives a way to make organized archives by indicating basic
semantics for content, for example, headings, passages, “records,
connections, cites and different things.

6
4.2.CSS

FIGURE NO 4.2 -CSS SYMBOL

 Cascading Style Sheets (CSS) is a template language utilized for”portraying
the introduction of a record written in a markup language like”HTML.
 CSS is a foundation innovation of the World Wide Web, close by HTML
and JavaScript”.
 CSS is “intended to empower the partition of introduction and substance,
including design, hues, and fonts. This detachment “can improve content
availability, give greater adaptability and control in the detail of introduction
qualities,“empower different site pages to share arranging by determining
the significant CSS in a different .css record, and lessen intricacy and
redundancy in the auxiliary substance”. Partition”of organizing and
substance likewise makes it attainable to introduce a similar markup page in
various styles for various rendering techniques, for example, on-screen, in
print, by voice and on Braille-based material gadgets.
 CSS additionally has rules for substitute designing if the substance is gotten
to on a versatile device.
 The name cascading originates from the predefined need plan to figure out
which style rule applies if more than one principle coordinates a specific
component. This falling need conspire is unsurprising.

7
4.3.JAVASCRIPT

FIGURE NO 4.3 – JAVASCRIPT SYMBOL

 JavaScript frequently”shortened as JS, is a programming language that fits in
with the ECMAScript determination.
 JavaScript is elevated level, regularly in the nick of time”gathered, and
multi-worldview. It has wavy section linguistic structure, dynamic
composing, model based article direction, and top of the line capacities.
 Nearby HTML and CSS, JavaScript is one of the center advances of the
World Wide Web. “JavaScript empowers intuitive site pages and is a
fundamental piece of web applications. Most by far of sites use it for
customer side page conduct,” and all significant internet browsers have a
devoted JavaScript motor to execute it.
 As”a multi-worldview language, JavaScript underpins occasion driven,
practical, and basic programming styles.

8
4.4.Weather APIs (Application Programming Interfaces)

TheseAPIs serve as the bridge between the app and external

weatherservices. They enable the retrieval of live weather databasedon user inputs.
The integration with weather APIs ensuresthatthe app constantly receives accurate
and updatedweather information.

4.5.Technology Integration

The Weather App’s integration of HTML, CSS, JavaScript, andweather

APIs is pivotal. HTML structures the app’s layout, CSSstyles it for a visually
appealing interface, and JavaScript addsfunctionality, orchestrating user
interactions and API communication. The integration with weather APIs
enablestheapp to fetch current and accurate weather data, ensuringusersreceive up-
to-date forecasts and conditions.

9
 CHAPTER -5
CONCLUSION

 Integrating a Weather Finder with a Location API allows users to receive

real-time weather updates based on their geographic location.
 By leveraging location data (like latitude and longitude), the application can
automatically detect the user's location and fetch the relevant weather
information without requiring the user to manually input a city.
 This improves the user experience by providing personalized and accurate
weather data instantly.
 Using a Weather API ensures that the data is up-to-date, while the Location
API simplifies the process by identifying the user's position.
 Whether it's current weather, forecasts, or alerts, this integration offers a
dynamic, seamless, and user-friendly interface for checking weather
conditions on any device.
 This setup enhances functionality by automating weather retrieval based on
location, making it more convenient for users to stay informed about their
surroundings.

10
 ANNEXURES
ANNEXURE A: 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">

11
<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{

12
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;

13
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;

14
}
.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;

15
font-size: 14px;
margin-top: 10px;
display: none;
}
-WEATHER.JS
const apiKey = "8ce6268382acb2c82d8070f889bd33b9";
const api url = "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"){

16
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);
})

ANNEXURE B:SCREENSHOTS

17
18
19
FIGURE NO 5.1 -OUTPUT SCREEN

20
BIBLIOGRAPHY
1. MDN Web Docs
2. W3Schools
3. Stack Overflow
various online forums offered comprehensive insights and solutions to
intricate coding challenges.
Additionally, tutorials and guides fromreputablesources like YouTube
channels and tech blogs offeredstep-by-step instructions and practical examples
that significantly contributed to our understanding and implementation of crucial
app functionalities.

21