WP Assignment

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;
.cloudy {
background-color: #d3d3d3;
.windy {
background-color: #1b1b1b;
.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

WP Assignment

Uploaded by

Copyright:

Available Formats

WP Assignment

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WP Assignment

Uploaded by

Copyright:

Available Formats

HTML CODE

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

< tle>Interac ve Weather Dashboard</ tle>

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

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

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

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

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

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

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

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

transi on: background 1s ease;

margin-bo om: 20px;

border: 1px solid #ccc;

ﬂex-direc on: column;

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

margin-bo om: 20px;

margin-bo om: 10px;

#currentCondi on, #currentTemp, #currentHumidity {

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

transi on: background-color 0.3s ease;

transi on: background-color 0.3s ease;

transi on: background-color 0.3s ease;

transi on: background-color 0.3s ease;

transi on: background-color 0.3s ease;}

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

const apiKey = 'd110f9be7dfe427f65d8c 4d4de221b';

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

alert('City not found');

const apiKey = 'd110f9be7dfe427f65d8c 4d4de221b';

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

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}%`;

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

const ﬁlteredForecast = forecastData.ﬁlter((item, index) => index % 8 === 0);

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

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

func on applyWeatherStyle(condi on) {

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

switch (condi on) {

You might also like