01 / THE BRIEF
Weather information at a glance.
A weather lookup should provide a quick, readable summary instead of exposing raw API data. The application supports both a typed city search and an optional device-location lookup.
02 / APPROACH
Two ways to find the forecast.
The browser accepts a city query or requests geolocation permission. The application then calls the weather API and maps the response into current-condition details and daily forecast cards.
03 / IMPLEMENTATION
What I built
- Added city search so visitors can look up a location by name.
- Added an optional current-location flow using the browser Geolocation API.
- Fetched current weather details including location, temperature, condition, humidity and wind.
- Used forecast data to render daily cards for a five-day view.
- Kept the application lightweight with HTML, CSS and vanilla JavaScript.
04 / DESIGN & TECHNICAL DECISIONS
Why it works this way
City and device lookup
City search stays available when a visitor declines location permission.
Readable summaries
The interface highlights everyday weather values instead of exposing the complete API response.
Daily forecast grouping
The current implementation selects one forecast entry per day for its daily cards; this is a learning implementation rather than a meteorologically refined forecast.
05 / MEDIA
Project gallery
Select any preview to bring it into the large viewing frame. Replace the illustrative visuals with authorised project screenshots as they become available.
06 / OUTCOME
A lightweight weather lookup experience.
A deployed browser-based demo connected to OpenWeather endpoints. The current repository implementation should be treated as a learning project, not a production weather service. No user or performance metrics are claimed.
07 / NEXT IMPROVEMENTS
What I’d improve next
- Move the API key out of public client-side code or restrict it by allowed origin and quota.
- Add visible loading, empty and error states for API failures and invalid city names.
- Handle denied geolocation permission and location timeouts clearly.
- Validate API responses and improve daily forecast selection using local calendar dates.