A dynamic and responsive weather application built with HTML, CSS, and JavaScript, using a live Weather API to display current conditions and a 5-day forecast for any city worldwide.
- Live Weather Data: Shows current temperature, weather condition, humidity, wind speed, and more.
- 5-Day Forecast: Includes a detailed 5-day weather outlook for each searched city.
- City-Based Search: Users can search for any city globally.
- Responsive Design: Fully responsive and mobile-friendly layout.
- API Integration: Utilizes a weather API (e.g., OpenWeatherMap) to fetch real-time data.
- Error Handling: Displays informative messages for invalid input, network issues, or missing data.
- HTML5 – Page structure
- CSS3 – Styling and layout
- JavaScript (ES6) – Logic, API calls, and DOM manipulation
- Weather API – Provides live weather data and forecasts
Weather-API-Application-HTML-CSS-JS/ ├── index.html ├── style.css ├── script.js └── README.md
- User types a city name into the search bar.
- The app makes a request to the Weather API.
- The response includes current weather and a 5-day forecast.
- The UI updates dynamically with all the weather details.
- Any errors (e.g., city not found) are caught and displayed clearly.
- Clone the repository:
git clone https://github.com/your-username/Weather-API-Application-HTML-CSS-JS.git-
Open index.html in your browser.
-
(Optional) If your API key is required:
-
Open script.js
-
Replace the placeholder with your actual API key:
const apiKey = "YOUR_API_KEY_HERE";
🔐 API Key Note
Ensure your API key is not exposed in public repositories. Use restricted or free-tier keys for demos. You can also use a .env setup for local development security.
✨ Future Improvements
-
Add geolocation support to auto-detect user location
-
Toggle temperature units (Celsius ↔ Fahrenheit)
-
Add weather icons and animations
-
Implement dark/light theme toggle
-
Deploy via GitHub Pages