Weather Forecasting Web App

A responsive weather forecasting application built using HTML, CSS, and JavaScript, powered by the OpenWeatherMap API. This app provides real-time weather updates for any city around the world.

📌 Features

• 🌐 Search weather by city name
• 🌡️ Displays temperature, humidity, wind speed, and weather status
• 🎨 Clean and responsive UI
• ⚡ Real-time data fetched from OpenWeatherMap

📷 Screenshots

🔧 Technologies Used

• HTML5 – For the structure of the page
• CSS3 – For styling and layout
• JavaScript – For handling logic and API calls
• OpenWeatherMap API – For fetching live weather data.

📌 1. What problem does the app solve?

This weather forecasting web application helps users get real-time weather information for any city in the world. Instead of switching between different apps or websites, users can access current temperature, humidity, wind speed, and weather conditions instantly through a simple and responsive web interface.

🎯 2. Who is the target audience?

• Students learning web development and API integration
• Travelers and daily commuters needing quick weather updates
• Anyone interested in a simple, fast, browser-based weather checker

⚙️ 3. What makes the solution technically interesting or innovative?

The app is built entirely using HTML, CSS, and JavaScript without any backend. It fetches real-time data from the OpenWeatherMap API and displays it dynamically in the browser. It’s a practical example of how frontend developers can create functional, real-world applications using APIs and JavaScript's fetch() method.

📚 4. What are the key learning outcomes or academic value?

• Learning how to fetch and display live data using APIs
• Understanding JSON data parsing and DOM manipulation
• Creating a clean and responsive UI using HTML/CSS
• Applying error handling for external API calls
• Enhancing frontend development skills for real-world use cases

🧠 5. What challenges did I face and how did I overcome them?

One challenge was handling incorrect city names entered by the user. I used try...catch blocks in JavaScript to show a friendly error message when the API returned an error. Another challenge was designing a responsive layout, which I achieved using media queries and flexible styling.

🚀 6. What are future improvements or add-ons I would like to build?

• Add 5-day or weekly weather forecast
• Auto-detect user location using geolocation API
• Include weather icons for better UI/UX
• Add dark mode support
• Deploy to Netlify or GitHub Pages with a custom domain

📦 Dataset

This app uses real-time data from the OpenWeatherMap API.

API Endpoint:

https://api.openweathermap.org/data/2.5/weather?units=metric&q={city_name}&appid=YOUR_API_KEY

Data Includes: Temperature, weather conditions, humidity, wind speed, etc.

📂 GitHub Repository

🔗 GitHub Repository

📝 License

Licensed under the Apache License 2.0.

🙏 Acknowledgements

• Inspired by a weather app tutorial from YouTube for learning API integration.
• Weather data provided by OpenWeatherMap.