Hey, I am Ajink, and today in this blog, we’re going to design a weather widget with animated icons for different weather conditions. This widget will not only provide current weather information but also enhance the user experience with dynamic weather animations.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/skycons@1.0.0"></script>
<title>Animated Weather Widget</title>
</head>
<body>
<div class="weather-widget">
<h2>Current Weather</h2>
<canvas id="weather-icon" width="128" height="128"></canvas>
<div class="weather-info">
<p id="temperature">Loading...</p>
<p id="location">City, Country</p>
<p id="description">Fetching weather data...</p>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
HTML Code Explanation:
- We have a basic HTML structure with a container div for the weather widget, a canvas for the animated weather icon, and divs to display weather information.
CSS Code:
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.weather-widget {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 20px;
text-align: center;
}
canvas {
margin: 20px 0;
}
.weather-info {
margin-top: 10px;
}
p {
margin: 5px 0;
}
CSS Code Explanation:
- The CSS provides styling for the weather widget, including colors, shadows, and spacing.
JavaScript (app.js):
document.addEventListener('DOMContentLoaded', function () {
const skycons = new Skycons({ color: '#3498db' });
const canvas = document.getElementById('weather-icon');
const temperatureElement = document.getElementById('temperature');
const locationElement = document.getElementById('location');
const descriptionElement = document.getElementById('description');
// Replace with your own API key from OpenWeatherMap
const apiKey = 'YOUR_OPENWEATHERMAP_API_KEY';
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=City,Country&units=metric&appid=${apiKey}`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const temperature = data.main.temp;
const location = `${data.name}, ${data.sys.country}`;
const description = data.weather[0].description;
temperatureElement.innerText = `${temperature} °C`;
locationElement.innerText = location;
descriptionElement.innerText = description;
const icon = data.weather[0].icon;
skycons.set(canvas, icon);
skycons.play();
})
.catch(error => console.error('Error fetching weather data:', error));
});
JavaScript Code Explanation:
- We use the “Skycons” library to display animated weather icons.
- Replace ‘YOUR_OPENWEATHERMAP_API_KEY’ with your own API key from OpenWeatherMap.
- The script fetches weather data from the OpenWeatherMap API and updates the widget with the temperature, location, description, and animated weather icon.
Conclusion:
In this blog, we successfully designed a weather widget with animated icons for different weather conditions using HTML, CSS, and JavaScript. Users can now see the current weather information with dynamic weather animations. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.
Thanks for reading, and if you have any doubts, feel free to comment !
