arrow_back
Project 4: Interactive Weather Widget
html index.html
<!-- Widget structure -->
<div class="weather-card glass">
<header class="card-header">
<h2 id="city-name">Béjaïa</h2>
<span id="date">Today</span>
</header>
<div class="temperature-info">
<span class="material-symbols-outlined icon-large">sunny</span>
<h1 id="temp-value">24°C</h1>
</div>
</div>
css style.css
.weather-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 2rem;
color: white;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.icon-large {
font-size: 4rem;
color: #fcd34d;
}
javascript script.js
const API_KEY = 'your_api_key_here';
const cityElement = document.getElementById('city-name');
const tempElement = document.getElementById('temp-value');
async function getWeather(city) {
try {
// Call weather API
const response = await fetch(
`https://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}`
);
const data = await response.json();
// Update UI
tempElement.innerText = `${data.current.temp_c}°C`;
} catch (error) {
console.error("Error:", error);
}
}
// Init
getWeather('Béjaïa');
terminal Console
> Live Server started on port 5500
> Waiting for changes...
visibility Live Preview