Skip to content

README.md

Latest commit

 

History

History
37 lines (30 loc) · 1.37 KB

README.md

File metadata and controls

37 lines (30 loc) · 1.37 KB

Weather App

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.

Live Preview

https://sameeksha-dalvi.github.io/weather-app/

Features

  • 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

Built With

  • HTML5
  • CSS3 (Flexbox, animations, custom properties)
  • JavaScript (ES6+)
  • Visual Crossing Weather API
  • Webpack
  • Git & GitHub Pages

What I Learned

  • 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.