As a front-end developer, I am always looking for projects that challenge me and help me grow. One such project I am working on is a weather app using HTML, CSS, and JavaScript. This app dynamically updates the background based on the current weather and includes location detection to provide accurate weather updates.
Why Build a Weather App?
A weather app is a great project for practicing API integration, working with real-time data, and enhancing the user experience through dynamic UI updates. By building this, I am improving my JavaScript skills, learning how to fetch and display external data, and making the UI visually appealing.
Features of My Weather App
- Real-Time Weather Updates: The app fetches live weather data and updates the display accordingly.
- Dynamic Background Changes: Depending on the weather conditions, the background changes to reflect the atmosphere, making the app visually engaging.
- Location Detection: The app detects the user’s location and provides weather updates specific to that region
- Minimal and Responsive Design: I am ensuring the UI is clean, modern, and mobile-friendly.
Technologies Used
- HTML: For structuring the app layout.
- CSS: For styling and making the app visually appealing.
- JavaScript: For handling API calls, updating the UI dynamically, and implementing location detection.
Code Implementation and Explanation
HTML Structure
The HTML file contains the basic layout of the weather app, including a container for displaying weather data.
CSS Styling
CSS is used to style the weather app and implement the dynamic background changes
- The body section defines the font, background color, and transition effect for the background change.
- The .container class styles the main weather container with padding, box shadow, and centering.
- The input and button elements are styled to be visually appealing and consistent.
- The .weather-card class is used to display the weather details in a neat, card-like design.
- This toggle switch for switching between temperature units. It includes a blue background, white text, padding, rounded corners, and a smooth hover effect with a shadow and slight upward movement.
- Forecast-grid ensures proper spacing for the weather forecast section.
- forecast-item styles individual weather forecast cards with a semi-transparent white background, rounded corners, shadows, and smooth animations
- @keyframes fadeIn creates a fade-in effect for forecast items.
- @media (max-width: 768px) adjusts the layout for smaller screens, reducing font sizes and ensuring a responsive design
JavaScript Logic
- The script ensures the app is initialized properly by setting up event listeners for the buttons and background images.
- getWeather() fetches the weather data for a city entered by the user, processes the response, and updates the UI.
- changeBackground() dynamically changes the background image based on weather conditions (clear, cloudy, rainy, or snowy).
- getLocationWeather() uses geolocation to fetch the weather based on the user’s location.
- toggleUnit() allows users to switch between Celsius and Fahrenheit units.
- The get weather() function fetches weather data, updates the UI, changes the background, and handles errors.
- You should replace “YOUR_API_KEY” in the code with your own API key
Conclusion
I have explained the code and how the weather app works. You can try it out and explore the features yourself.
Live Demo: https://weather-app-hqt4.vercel.app/
GitHub repository: https://github.com/habeebalamutu/Weather-app