A responsive web application combining a form validator with a weather application, leveraging the OpenWeatherMap API to deliver current weather data and forecasts.
Live Demo: damijjj.github.io/Weather-app/
This project showcases skills in building responsive user interfaces and integrating with external APIs. It consists of:
- Homepage (Registration Form): A simple form with client-side validation for input correctness. It also includes an embedded location map ("How to reach us?").
- Weather Application: An interactive tool to check current weather conditions and hourly/daily forecasts for any city worldwide. Data is fetched from the OpenWeatherMap API.
The project emphasizes:
- Clean and organized code.
- Responsive design for various devices.
- Dynamic DOM manipulation using JavaScript.
- Field validation: username, email, password, password confirmation.
- Real-time error message display.
- Embedded Google Maps.
- Displays current weather (temperature, pressure, humidity, cloudiness, min/max temp).
- Intuitive weather icons matching conditions.
- Temperature unit toggle (°C/°F).
- Scrollable hourly (24h) and daily (5-day) forecasts.
- Error handling for unknown city names.
- Adaptive forecast layout (centered on desktop, left-aligned on mobile) for optimal viewing.
- HTML5 & CSS3
- JavaScript (ES6+)
- Bootstrap 5.3
- Axios
- OpenWeatherMap API
- Google Maps Embed API
This is a static web project and can be opened directly by navigating to the .html files in your browser. For full functionality (e.g., Service Worker for PWA), it is recommended to serve it via a simple HTTP server (e.g., python -m http.server).
Please ensure you obtain your own OpenWeatherMap API key and replace the placeholder in scripts/weatherjs.js for the weather application to function correctly.
This project is licensed under the MIT License.