Scribd
Upload
15 views9 pages

WP Assignment

Uploaded by

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

WP Assignment

Uploaded by

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

HTML CODE

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, ini al-scale=1.0">

< tle>Interac ve Weather Dashboard</ tle>

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

</head>

<body>

<div class="dashboard-container">

<h1>Weather Dashboard</h1>

<div class="search-container">

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

<bu on id="searchBu on">Search</bu on>

</div>

<div class="weather-display">

<div class="current-weather">

<div class="weather-icon">

<img id="weatherIcon" src="" alt="Weather Icon">

</div>

<h2 id="cityName">City</h2>

<div id="currentCondi on">Condi on: --</div>

<div id="currentTemp">Temperature: --°C</div>

<div id="currentHumidity">Humidity: --%</div>

</div>

<div class="forecast-container">

<h2>5-Day Forecast</h2>
<div id="forecast" class="forecast-grid"></div>

</div>

</div>

</div>

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

</body>

</html>

CSS CODE
*{

margin: 0;

padding: 0;

box-sizing: border-box;

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

body {

background-color: #f0f0f0;

transi on: background 1s ease;

.dashboard-container {

max-width: 900px;

margin: 0 auto;

padding: 20px;

text-align: center;

.search-container {

margin-bo om: 20px;

}
input {

padding: 10px;

width: 60%;

border-radius: 8px;

border: 1px solid #ccc;

bu on {

padding: 10px;

background-color: #007bff;

color: white;

border: none;

border-radius: 8px;

cursor: pointer;

bu on:hover {

background-color: #0056b3;

.weather-display {

display: flex;

flex-direc on: column;

align-items: center;

.current-weather {

background-color: #fff;

padding: 20px;

border-radius: 12px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

width: 100%;
max-width: 600px;

margin-bo om: 20px;

.weather-icon img {

width: 100px;

height: 100px;

margin-bo om: 10px;

#cityName {

font-size: 28px;

margin-top: 10px;

#currentCondi on, #currentTemp, #currentHumidity {

font-size: 18px;

margin-top: 5px;

.forecast-container {

max-width: 600px;

width: 100%;

.forecast-grid {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 10px;

.forecast-item {

background-color: #f9f9f9;
padding: 10px;

border-radius: 8px;

text-align: center;

.forecast-item img {

width: 50px;

height: 50px;

.sunny {

background-color: gold;

transi on: background-color 0.3s ease;

.rainy {

background-color: #5f9ea0;

transi on: background-color 0.3s ease;

.cloudy {

background-color: #d3d3d3;

transi on: background-color 0.3s ease;

.windy {

background-color: #1b1b1b;

transi on: background-color 0.3s ease;

.stormy {

background-color: #2c3e50;

transi on: background-color 0.3s ease;}


JAVASCRIPT CODE
document.getElementById('searchBu on').addEventListener('click', () => {

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

if (city) {

fetchWeatherData(city);

});

func on fetchWeatherData(city) {

const apiKey = 'd110f9be7dfe427f65d8c 4d4de221b';

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

fetch(apiUrl)

.then(response => response.json())

.then(data => {

displayCurrentWeather(data);

fetchForecast(city);

})

.catch(error => {

alert('City not found');

});

func on fetchForecast(city) {

const apiKey = 'd110f9be7dfe427f65d8c 4d4de221b';

const apiUrl =
`h ps://api.openweathermap.org/data/2.5/forecast?q=${city}&units=metric&appid=${apiKey}`;

fetch(apiUrl)

.then(response => response.json())


.then(data => {

displayForecast(data.list);

});

func on displayCurrentWeather(data) {

document.getElementById('cityName').innerText = data.name;

document.getElementById('currentCondi on').innerText = `Condi on: ${data.weather[0].main}`;

document.getElementById('currentTemp').innerText = `Temperature: ${data.main.temp}°C`;

document.getElementById('currentHumidity').innerText = `Humidity: ${data.main.humidity}%`;

document.getElementById('weatherIcon').src =
`h p://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;

applyWeatherStyle(data.weather[0].main.toLowerCase());

func on displayForecast(forecastData) {

const forecastContainer = document.getElementById('forecast');

forecastContainer.innerHTML = '';

const filteredForecast = forecastData.filter((item, index) => index % 8 === 0);

filteredForecast.forEach(day => {

const forecastItem = document.createElement('div');

forecastItem.classList.add('forecast-item');

forecastItem.innerHTML = `

<h3>${new Date(day.dt_txt).toLocaleDateString()}</h3>

<img src="h p://openweathermap.org/img/wn/${day.weather[0].icon}@2x.png"


alt="${day.weather[0].main}">

<p>${day.main.temp}°C</p>

<p>${day.weather[0].main}</p>

`;

forecastContainer.appendChild(forecastItem);

});
}

func on applyWeatherStyle(condi on) {

document.body.classList.remove('sunny', 'rainy', 'cloudy', 'windy', 'stormy');

switch (condi on) {

case 'clear':

case 'sunny':

document.body.classList.add('sunny');

break;

case 'rain':

case 'drizzle':

document.body.classList.add('rainy');

break;

case 'clouds':

document.body.classList.add('cloudy');

break;

case 'wind':

document.body.classList.add('windy');

break;

case 'storm':

case 'thunderstorm':

document.body.classList.add('stormy');

break;

default:

document.body.classList.add('cloudy');

break;

}
OUTPUT

You might also like