A simple JavaScript app that fetches and displays the current weather for any city using a weather API. Built for learning purposes in The Odin Project.
https://sameeksha-dalvi.github.io/weather-app/
- Search weather by city name
- Displays temperature (°C), humidity, wind speed, and conditions
- Dynamic background changes based on weather (sunny, rainy, snowy, cloudy)
- Animated rain and snow effects
- Weather icons loaded using dynamic imports
- Glassmorphism-style UI
- Loading state while fetching weather data
- Fully responsive layout
- HTML5
- CSS3 (Flexbox, animations, custom properties)
- JavaScript (ES6+)
- Visual Crossing Weather API
- Webpack
- Git & GitHub Pages
- How to fetch data from an API using async/await
- Why form buttons refresh the page and how to stop it using
preventDefault() - How to load weather icons using dynamic imports with Webpack
- How to show and hide UI states like loading and weather results
- How to create rain and snow animations using JavaScript and CSS
- How to use CSS variables to change themes based on weather
- How to organize JavaScript code to keep it clean and readable
Note: This project uses a public API key for demo purposes.
For production applications, API keys should be stored securely on the server side.