Scribd
Upload
5 views6 pages

Weather Forecasting Website

The Weather Forecasting Web Application is a modern platform that provides real-time weather updates using the OpenWeatherMap API. It features a responsive design and utilizes HTML5, CSS3, and JavaScript for dynamic functionality. The application allows users to enter a city name and receive live weather data, including temperature and humidity.

Uploaded by

rahul sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views6 pages

Weather Forecasting Website

The Weather Forecasting Web Application is a modern platform that provides real-time weather updates using the OpenWeatherMap API. It features a responsive design and utilizes HTML5, CSS3, and JavaScript for dynamic functionality. The application allows users to enter a city name and receive live weather data, including temperature and humidity.

Uploaded by

rahul sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Weather Forecasting Web Application

1. Project Overview
The Weather Forecasting Web Application is a clean, modern web platform designed to provide real-time weather
updates for any city worldwide. It leverages OpenWeatherMap API to dynamically fetch and display important
weather data like temperature, description, humidity, and weather icons. The application demonstrates efficient
API handling, responsive front-end design, and asynchronous JavaScript programming.

2. Technologies Used
- HTML5 – For the structural layout
- CSS3 – For styling, animations, and responsiveness
- JavaScript (ES6+) – For dynamic API requests and DOM manipulation
- OpenWeatherMap API – To retrieve live weather data

3. Key Features
- Real-Time Weather Updates
- Modern, Responsive User Interface
- Dynamic Error Handling
- Responsive Design
- Weather Icons Integration

4. Project Structure
The project is composed of three primary files:

- index.html: HTML structure of the application


- style.css: External stylesheet controlling appearance
- script.js: JavaScript for dynamic functionality and API interaction

5. Source Code

5.1 index.html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Weather Forecast</title>

<link rel="stylesheet" href="styles.css">

<style>

/* Inline additional styling */

body {

background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fad0c4, #ffdde1);

background-size: 400% 400%;

animation: gradientBG 10s ease infinite;

color: rgb(255, 0, 0);

font-family: 'Poppins', sans-serif;

text-align: center;

animation: fadeIn 2s ease-in;

@keyframes gradientBG { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;}


100% {background-position: 0% 50%;} }

@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }

.container { background: rgba(255, 255, 255, 0.2); padding: 30px; border-radius: 15px; display: inline-block;
margin-top: 50px; box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.5); animation: slideUp 1s ease-in-out;
backdrop-filter: blur(10px);}

@keyframes slideUp { from {transform: translateY(20px); opacity: 0;} to {transform: translateY(0); opacity: 1;}
}

.search-box { margin: 20px 0; }

input { padding: 12px; border-radius: 8px; border: none; width: 220px; font-size: 16px; transition: box-shadow
0.3s ease; }

input:focus { box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.7); outline: none; }

button { padding: 12px 18px; background: linear-gradient(45deg, #ff7eb3, #ff758c); border: none; border-
radius: 8px; cursor: pointer; color: white; font-weight: bold; transition: transform 0.2s, background 0.3s; }

button:hover { background: linear-gradient(45deg, #ff4f81, #ff3d68); transform: scale(1.05); }

.weather-box { margin-top: 20px; padding: 20px; background: rgba(255, 255, 255, 0.3); border-radius: 15px;
display: inline-block; min-width: 270px; box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.3); backdrop-filter:
blur(10px); animation: fadeIn 1.5s ease-in; }
.weather-box img { width: 150px; height: 150px; animation: bounce 1.5s infinite alternate; }

@keyframes bounce { from {transform: translateY(0);} to {transform: translateY(-5px);} }

</style>

</head>

<body>

<div class="container">

<h1> Weather Forecast</h1>

<p>Get real-time weather updates for any city around the world.</p>

<div class="search-box">

<input type="text" id="city" placeholder="Enter city name">

<button onclick="getWeather()">Get Weather</button>

</div>

<div id="weather" class="weather-box"></div>

</div>

<br><br>

<p>This application uses OpenWeatherMap API to fetch live weather data.</p>

<br><br>

<script src="script.js"></script>

</body>

</html>

5.2 style.css
body {

font-family: Arial, sans-serif;

text-align: center;

padding: 20px;

background: linear-gradient(to right, #4facfe, #00f2fe);

color: white;

}
h1 {

font-size: 2.5em;

margin-bottom: 20px;

input {

padding: 10px;

font-size: 1em;

border: none;

border-radius: 5px;

margin-right: 10px;

button {

padding: 10px 15px;

font-size: 1em;

background: #ff7eb3;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

transition: 0.3s ease-in-out;

button:hover {

background: #ff4f81;

#weather {
margin-top: 20px;

padding: 20px;

background: rgba(255, 255, 255, 0.2);

border-radius: 10px;

backdrop-filter: blur(10px);

display: inline-block;

min-width: 250px;

animation: fadeIn 1s ease-in;

@keyframes fadeIn {

from { opacity: 0; transform: translateY(-10px); }

to { opacity: 1; transform: translateY(0); }

5.3 script.js
async function getWeather() {

const city = document.getElementById('city').value;

if (!city) {

alert("Please enter a city name");

return;

const apiKey = 'c5053523815c00c91686efabacd46ead'; // Replace with your own valid API key

const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

try {

const response = await fetch(url);

const data = await response.json();


if (data.cod !== 200) {

document.getElementById('weather').innerHTML = `<p>${data.message}</p>`;

return;

document.getElementById('weather').innerHTML = `

<h2>${data.name}, ${data.sys.country}</h2>

<p>Temperature: ${data.main.temp}°C</p>

<p>Weather: ${data.weather[0].description}</p>

<p>Humidity: ${data.main.humidity}%</p>

<img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" alt="Weather icon">

`;

} catch (error) {

console.error("Error fetching weather data:", error);

7. Important Note
Ensure you replace the sample API key with your own from OpenWeatherMap to guarantee stable access to live
data.

Done By: Jayant Sharma


23WJ1A6731
CSD-1

You might also like