BUNDELKHAND INSTITUTE OF ENGINEERING AND

TECHNOLOGY, JHANSI, INDIA 2024-2025

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

PROJECT BASED LEARNING

WEB TECHNOLOGY
A Project on

WEATHER FORECAST WEBSITE

Under the guidance of
Niharika Gupta
Submitted by

MANISH KR. PANDEY (2200430100035)

VINEET SINGH(2200430100063)

SOURAV SHARMA(2200430100054)

1
 Bundelkhand Institute of Engineering & Technology
Jhansi (U.P.) India – 284128
Department of Computer Science and Engineering

CERTIFICATE
This is to certify that the project entitled “WEATHER FORECAST
WEBSITE” has been successfully delievered by MANISH KR. PANDEY
(2200430100035), VINEET SINGH(2200430100063) SOURAV
SHARMA(2200430100054), under the guidance of NIHARIKA GUPTA for
fulfilment of Bachelor degree from Bundelkhand Institute of Engineering and
Thechnology,Jhansi during academic year 2024-2025.

Date:
Place - Jhansi.

Supervisor

Niharika Gupta

Department of Computer Science & Engineering

Bundelkhand Institute of Engineering & Technology

2
 Acknowledgment

I hereby certify that the work which is being presented in the Project Based
Learning (PBL) entitled, “Service Website”, in partial fulfillment of the
requirements for the award of degree of Bachelor in Technology in Information
Technology submitted in Bundelkhand Institute of Engineering & Technology,
Jhansi, is an authentic record of my own work carried out under the supervision of
Niharika Gupta and refers other researcher’s works which are duly listed in the
reference section.

Submitted By :

MANISN [Link](2200430100035)

VINEET SINGH(2200430100063)

SOURAV SHARMA(2200430100054)

3
 ABSTRACT
This project presents a weather forecasting website designed to provide real-time
meteorological information using data fetched from a weather API. Built with a
user-friendly interface, the app displays current weather conditions, including
temperature, humidity, wind speed, and a brief forecast. Developed using modern
web technologies, the app integrates [Link] for dynamic user interactions and
API handling, ensuring a seamless experience across devices. The application also
features location-based weather updates, allowing users to retrieve weather data
for their current location or any city worldwide. The simplicity and efficiency of
the app make it an essential tool for users seeking accurate and up-to-date weather
information.

4
 TABLE OF CONTENT
CONTENT Page NO.
INTRODUCTION 6
TECHNOLOGIES USED 7
SOURCE CODE 8-17
RESULT 18
CONCLUSION 19
REFERENCE 19

5
 INTRODUCTION
Weather forecasting has become an essential part of daily life, guiding people in
making informed decisions about travel, work, outdoor activities, and events. With
the increasing reliance on accurate, up-to-date weather data, this project
introduces a weather forecast website designed to provide real-time
meteorological information in a simple yet efficient manner.
The website is built using core web technologies: plain JavaScript, HTML, and
CSS, demonstrating the power of these fundamental languages in creating
dynamic, interactive web applications. By integrating the OpenWeather API, the
website can fetch live weather data for any city worldwide, offering users a
detailed breakdown of current conditions, including temperature, humidity, wind
speed, and a concise forecast. Additionally, users have the option to automatically
retrieve weather data based on their current location, thanks to built-in geolocation
capabilities.
The design of the weather forecast website focuses on user accessibility and
responsiveness, ensuring compatibility across different devices and screen sizes,
from desktops to mobile phones. Despite its simplicity, the website provides all
the necessary functionality for users to easily access and understand the weather
conditions in any region, with an intuitive interface that requires no prior technical
knowledge.
The decision to use plain JavaScript, HTML, and CSS instead of more advanced
frameworks or libraries was intentional, emphasizing the flexibility and
robustness of basic web technologies. This approach not only enhances the
learning experience but also ensures broader compatibility and faster loading
times, making the website lightweight and quick to respond.
By offering an accessible and user-friendly weather forecast website, the project
aims to meet the everyday needs of users seeking accurate weather information in
real time, supporting better decision-making and planning in relation to weather
conditions.

6
 TECHNOLOGIES USED
• HTML (Hypertext Markup Language):

HTML is the backbone of the website, providing the structure and layout of the various elements
on the page. It defines the essential components, such as the input fields, buttons, and display
areas for weather information. By using semantic HTML, the website ensures that content is
organized in a way that enhances accessibility and search engine optimization (SEO).

• CSS (Cascading Style Sheets):

CSS is used to style the website, ensuring a clean, modern, and responsive design. It handles
the presentation layer, determining how the website looks across different devices and screen
sizes. With CSS, the site is visually appealing and adaptable, providing users with a consistent
experience whether they are accessing it on a desktop or a mobile device. Techniques like
Flexbox and media queries are utilized to ensure responsiveness.

• JavaScript:

JavaScript brings interactivity and functionality to the website. It allows the website to
dynamically retrieve weather data from the API and update the content without needing to
reload the page. JavaScript handles user inputs (e.g., city name), processes API requests, and
manages the display of real-time weather data like temperature, humidity, and wind speed.
Additionally, JavaScript is responsible for integrating geolocation functionality, enabling the
website to fetch weather data for the user's current location.

• OpenWeather API:

The OpenWeather API serves as the data source for the weather forecast information. By
connecting to this API, the website is able to fetch accurate and up-to-date weather details for
any specified city or location. The API provides comprehensive weather data, including current
conditions, forecasts, and meteorological information. JavaScript's fetch API is used to send
requests to the OpenWeather API and receive the necessary data in real time.

7
 SOURCE CODE
• HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather report</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="wrapper">
<h1> Weather App</h1>
<div class="tab-container">
<p class ="tab" data-userWeather>Your Weather</p>
<p class="tab" data-searchWeather>Search Weather</p>
</div>
<div class="weathercontainer">
<!--grant location container-->
<div class="sub-container grant-location-container">
<img src="./assets/[Link]" alt="location" width="80" height="80" loading="lazy">
<p>Grant your location</p>
<p>allow access to get weather information</p>
<button class="btn" data-grantAcess>Grant acsess</button>
</div>

<!--search weather form-->

<form action="" class="form-container" data-searchForm>
<input type="text" placeholder="search your city..." data-searchInput>
<button class="btn" type="submit" >
<img src="./assets/[Link]" width="20" height="20 " loading="lazy" alt="">
</button>
</form>
<!--loading screan-->

<div class="custom-loader sub-container loading-container"></div>

<!--your weather ui-->

<div class=" sub-container1 user-weather-info ">
<!--city and flag-->
<div class="name">
<p data-cityName></p>
<img data-countryicon>
</div>
<!--weather discription-->
<p data-weatherDesc></p>
<!--weather icon-->
<img data-weatherIcon>
<!--temperature-->
<p data-temperature></p>
<!--3 cards-->
<div class="parameter-container">
<!--card1-->
<div class="parameter">
<img src="./assets/[Link]" alt="" width="80" height="80" loading="lazy">
<p>windspeed</p>
<p data-windspeed></p>
</div>
<!--card2-->
<div class="parameter">

8
 <img src="./assets/[Link]" alt="" width="80" height="80" loading="lazy">
<p>humidity</p>
<p data-humidity></p>
</div>
<!--card3-->
<div class="parameter">
<img src="./assets/[Link]" alt="" width="80" height="80" loading="lazy">
<p>clouds</p>
<p data-cloudiness></p>
</div>
</div>
</div>
<!--error-->
<div class="error-container">
<img src="./assets/[Link]" alt="">
</div>
</div>
</div>
<script src="./[Link]"></script>
</body>
</html>

• CSS
*,*::before,*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Merriweather Sans', sans-serif;
}
:root {
--colorDark1: #112D4E;
--colorDark2: #3F72AF;
--colorLight1: #DBE2EF;
--colorLight2: #F9F7F7;
--colorLight3: #2c90ce;

}
.wrapper{
width:100vw;
height: 120vh;
overflow-x: hidden;
overflow-y: hidden;
overflow: hidden;
color: var(--colorLight2);
/* background-image: linear-gradient(160deg, #112d4e 0%,#3f72af 100%); */
background-image:url('./assets/[Link]');
background-repeat: no-repeat;
background-size:cover;
background-attachment: fixed;
background-position: center ;
@media(max-width:640px){
height:70rem;
};
}
h1{
text-align: center;
text-transform: uppercase;
padding-top: 20px;
font-size:3.125rem;
@media (max-width: 640px) {
font-size:2rem;

9
 }
}
.tab-container{
width: 90%;
display: flex;
justify-content: space-between;
max-width: 550px;
margin: 0 auto;
margin-top: 4rem;
}
.tab{
cursor: pointer;
font-size: 0.875rem;
letter-spacing: 1.75px;
padding: 5px 8px;
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 0, 0, 0, 0.37 );
backdrop-filter: blur( 6px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );

}
.[Link]-tab{
background-color: rgba(38, 79, 99,0.1);
box-shadow: 0 8px 32px 0 rgba( 0, 0, 0, 0.37 );
backdrop-filter: blur( 6px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
border-radius: 4px;
}
/* .[Link]{
scale:1;
opacity: 1;
display:flex;
} */
.weathercontainer{
display: flex;
justify-content:center;
align-items: center;
flex-direction: column;
margin-block: 4rem;

}
.btn{
/* to un set the default property of button */
all:unset;
font-size: 0.85rem;
text-transform: uppercase;
border-radius: 5px;
background-color: var(--colorLight3);
cursor: pointer;
padding: 10px 30px;
margin-bottom: 10px;
background: rgba( 255, 255, 255, 0.01 );
box-shadow: 0 8px 32px 0 rgba( 0, 0, 0, 0.37 );
backdrop-filter: blur( 6px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );

}
/* .btn:focus{
background-color: var(--colorDark2);
} */

10
.sub-container{
display:flex;
flex-direction:column;
align-items:center;
width:19rem;

}
.sub-container1{
display:flex;
flex-direction:column;
justify-content: center;
align-items:center;
height: 70vh;
width:70vw;
background: rgba( 255, 255, 255, 0.01 );
box-shadow: 0 8px 32px 0 rgba( 0, 0, 0, 0.37 );
backdrop-filter: blur( 6px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
@media(max-width:768px){
height:43rem;
width:43rem;
};
@media(max-width:640px){
height:43rem;
width:20rem;
};
}
.grant-location-container{

display:none;
}
.[Link]{
display:flex;
}
.grant-location-container img{
margin-top: 2rem;
margin-bottom: 2rem;
}
.grant-location-container p:first-of-type{
font-size: 1.75rem;
font-weight: 600;

}
.grant-location-container p:last-of-type{
font-size: 0.85rem;
font-weight: 500;
margin-top: 0.75rem;
margin-bottom: 1.75rem;
letter-spacing: 0.75px;

}
.loading-container{
display: none;
}
.[Link]{
display: flex;

}
.loading-container p{
text-transform: uppercase;

11
 margin-top: 10px;
}
.user-weather-info{
display: none;
}
.[Link]{
display: flex;
}
.name{
display: flex;
align-items: center;
gap:0 0.5rem;
margin-bottom: 1rem;
}
.user-weather-info p{
font-size: 1.5rem;
font-weight: 200;
}
.user-weather-info img{
width:90px;
height: 90px;
}
.name p {
font-size: 2rem;
}
.name img{
width: 30px;
height:30px;

}
.user-weather-info p[data-temperature]{
font-size:2.75rem;
font-weight: 800;
}
.parameter-container{
width: 1080px;
display: flex;
flex-direction: row;
gap :10px 20px;
justify-content: center;
align-items: center;
margin-top: 2rem;
@media(max-width:640px){
flex-direction: column;
}
}
.parameter{
width:30%;
max-width: 200px;

border-radius: 5px;
padding: 1rem;
display:flex;
flex-direction: column;
gap: 5px 0;
justify-content: center;
align-items: center;
background: rgba( 38, 79, 99, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 0, 0, 0, 0.2 );
backdrop-filter: blur( 6px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );

12
}
.parameter img{
width:50px;
height: 50px;
}
.parameter p:first-of-type{
font-size: 1.15rem;
font-weight: 600;
text-transform: uppercase;
}
.parameter p:last-of-type{
font-size: 1rem;
font-weight: 200;
}
.form-container{
display: none;
width: 90%;
max-width: 550px;
margin:0 auto;
justify-content: center;
align-items: center;
gap: 0 10px;
margin-block: 3rem;
background: rgba( 255, 255, 255, 0.01 );
box-shadow: 0 8px 32px 0 rgba( 0,0,0, 0.37 );
backdrop-filter: blur( 6px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );

}
.[Link]{
display: flex;
}
.form-container input{
all:unset;
width: calc(100% - 80px);
height: 40px;
padding: 0 20px;
border-radius: 10px;

}
.form-container input::placeholder{
color: rgba(255,255,255,0.7);
}
.form-container input:focus{
outline: 1px solid rgba(255,255,255,0.7);
}
.form-container .btn{
padding: unset;
width: 40px;
height:40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
margin: unset;
}
.error-container {
display: none;
justify-content: center;
align-items: center;
/* background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 0,0,0, 0.37 );

13
 backdrop-filter: blur( 6px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 ); */

}
.[Link]{
display: block;
}
.error-container p {
font-size: 30px;
text-align: center;
}
.error-container img{
width:50vh;
height:50vh;

}
.custom-loader {
width: 70px;
height: 70px;
background:
radial-gradient(farthest-side,#f6d054 90%,#0000) center/16px 16px,
radial-gradient(farthest-side,#6F6D91 90%,#0000) bottom/12px 12px;
background-repeat: no-repeat;
animation: s7 1s infinite linear;
position: relative;

}
.custom-loader::before {
content:"";
position: absolute;
width:8px;
height:8px;
inset:auto 0 16px;
margin: auto;
background:#E4E4ED;
border-radius: 50%;
transform-origin: 50% calc(100% + 10px);
animation:inherit;
animation-duration: 0.5s;
}

@keyframes s7 {
100%{transform: rotate(1turn)}
}

14
• JAVASCRIPT

const userTab = [Link]("[data-userWeather]")

const searchTab = [Link]("[data-searchWeather]")
const userContainer = [Link](".weathercontainer")
const grantAccessContainer = [Link](".grant-location-container")
const searchForm = [Link]("[data-searchForm]")
const loadingScrean = [Link](".loading-container")
const errorScrean = [Link](".error-container")
const userInfo = [Link](".user-weather-info")

//intiall variable
const API_Key = "a911797551e977abbbfc22add280f7e5";
let currentTab = userTab;
[Link]("current-tab");
getfromSessionStorage();

function switchTab(clickedTab){
if(clickedTab != currentTab){
[Link]("current-tab");
currentTab=clickedTab;
[Link]("current-tab");

if(![Link]("active")){

[Link]("active");
[Link]("active");
[Link]("active");
[Link]("active");
}
else {
[Link]("active");
[Link]("active");
[Link]("active");

getfromSessionStorage();
}

}
//check if cordiantes in session storage
function getfromSessionStorage(){
getLocation();
const localCoordiantes = [Link]("user-coordiantes");
if(!localCoordiantes){
[Link]("active");
}
else{
const coordinates = [Link](localCoordiantes);
fetchUserWeatherInfo(coordinates);
}

}
async function fetchUserWeatherInfo(coordinates) {
const { lat, lon } = coordinates;

[Link]("active");
[Link]("active");

15
 [Link]("active");

try {
const response = await fetch(`
[Link]
);
if([Link]=='404'){

[Link]("active");
[Link]("active");
}
else{
const data = await [Link]();
[Link]("active");
[Link]("active");
[Link]("active");
renderWeatherInfo(data);
}

} catch (err) {
[Link]("api is not working");

}
}

function renderWeatherInfo(weatherInfo){
const cityName = [Link]("[data-cityName]");
const countryIcon = [Link]("[data-countryicon]");
const desc = [Link]("[data-weatherDesc]");
const weatherIcon = [Link]("[data-weatherIcon]");
const temperature = [Link]("[data-temperature]");
const windSpeed = [Link]("[data-windspeed]");
const humidity = [Link]("[data-humidity]");
const cloud = [Link]("[data-cloudiness]");

//fetch values form weather info object and put it ui element

[Link] = weatherInfo?.name;
[Link]=`[Link]
[Link] = weatherInfo?.weather?.[0]?.description;
[Link] = `[Link]
[Link] = `${weatherInfo?.main?.temp}°C`;
[Link] = `${ weatherInfo?.wind?.speed} m/s`;
[Link] =`${weatherInfo?.main?.humidity} %` ;
[Link] =`${weatherInfo?.clouds?.all}%` ;
}
function getLocation(){
if([Link]){
[Link](showPosition)

}
else{
alert("geolocation is not supported");
}

}
function showPosition(position){
const userCoordinates = {
lat:[Link],
lon:[Link],
}
[Link]("user-coordinates",[Link](userCoordinates));

16
 fetchUserWeatherInfo(userCoordinates);
}

[Link]("click", () => {
//pass clicked tab as input parameter
switchTab(userTab);
});
[Link]("click", () => {
//pass clicked tab as input parameter
switchTab(searchTab);
});
const grantAcessButton = [Link]("[data-grantAcess]");
[Link]("click",getLocation);
const searchInput = [Link]("[data-searchInput]");

[Link]("submit" , (e) =>{

[Link]();
let cityName = [Link];
if(cityName ==="")
return;
else fetchSearchWeatherInfo(cityName);
});

async function fetchSearchWeatherInfo(city){

[Link]("active");
[Link]("active");
[Link]("active");
[Link]("active");

try{
const response = await fetch(`[Link]
[Link]("hloo");
if([Link]=='404'){
[Link]("hloo1");
[Link]("active");
[Link]("active");
[Link]("errorscreen");
}
else{
[Link]("hloo2");
const data = await [Link]();
[Link]("active");
[Link]("active");
[Link]("active");
renderWeatherInfo(data);
}
}
catch(err){
[Link]("api is not working");
}}

17
RESULT

18
 CONCLUSION
In conclusion, this project demonstrates how even with minimalistic technologies,
it is possible to build practical and efficient web applications that provide
meaningful utility to users. The weather forecast website meets the goal of
delivering a seamless, accessible, and visually appealing user experience, making
it a helpful resource for anyone needing real-time weather updates.

REFERENCE

Mozilla Developer Network (MDN):

A comprehensive resource for HTML, CSS, and JavaScript documentation and
tutorials.
[Link]
OpenWeather API Documentation:
Official documentation for the OpenWeather API, providing details on how to
integrate weather data into web applications.
[Link]
W3Schools:
Tutorials and references for HTML, CSS, and JavaScript. W3Schools is a
valuable resource for beginner and intermediate developers.
[Link]
CSS-Tricks:
A resource offering articles and examples for responsive design, Flexbox, and
CSS best practices.
[Link]

19