weather_App

⛅ Weather App API — Real-Time Weather Forecast in Your Pocket

💡 Inspiration

We wanted to build a clean and responsive weather app using JavaScript and APIs to learn how real-time data can be fetched and rendered dynamically in a frontend application. The goal was to create something practical and user-friendly.

🧱 How We Built It

• Developed the UI using HTML5 and CSS3, keeping it minimal and mobile-friendly.
• Used Vanilla JavaScript and the Fetch API to call the OpenWeatherMap API.
• Users can search for any city and get real-time weather data including:
  • 🌡️ Temperature
  • 💧 Humidity
  • 💨 Wind Speed
  • ☁️ Condition Description
• Integrated icons and background changes based on weather conditions for better UX.

🌟 Features

• Real-time weather updates
  
• City-based weather search
  
• Weather condition icons
  
• Responsive design (works on mobile/tablet/desktop)
  
• Clean and intuitive UI
  

🧩 Challenges Faced

• Handling errors for invalid city inputs
  
• Managing API response formats and edge cases
  
• Designing a visually pleasing layout for all screen sizes
  

📚 What We Learned

• How to work with third-party APIs in JavaScript
  
• DOM manipulation based on API responses
  
• Better structuring of JS logic for modularity
  
• Improving UX with small animations and dynamic visuals
  

🔗 Try It Out

GitHub Repository

Built With

• css3
• design
• fetch-api
• html5
• javascript
• openweathermap-api
• responsive
• web