RodWeather is a weather application built during my early stages as a developer, focused on working with external APIs, user input, and dynamic UI updates using Vanilla JavaScript.
The project pulls live weather data and location imagery to create a simple but engaging experience, while reinforcing core front-end concepts such as asynchronous requests, DOM manipulation, and responsive layouts.
RodWeather allows users to search for weather information for cities around the world, displaying current conditions alongside contextual background imagery related to the selected location.
It was designed to be intuitive, visually clear, and responsive across devices, while handling real-world concerns such as incomplete user input and network requests.
Users can:
- Search for weather information by city name
- Use autocomplete to quickly find locations
- Fetch weather data for their current location via geolocation
- View responsive layouts optimised for desktop and mobile
- See background images dynamically updated based on location
This was one of my first projects involving multiple third-party APIs and asynchronous JavaScript.
Through RodWeather, I learned how to:
- Work with REST APIs and JSON responses
- Chain API requests from different providers
- Handle loading states and error scenarios
- Manage user input and autocomplete logic
- Build interactive features without relying on frameworks
Looking back, this project marks a clear step from static pages into dynamic, data-driven applications.
- HTML5
- CSS3
- Vanilla JavaScript
- OpenWeather API
- GeoDB Cities API (autocomplete)
- Unsplash API (location imagery)
🔗 Live Site:
https://rodrigodelascio.github.io/RodWeather/
If I were rebuilding RodWeather now, I would:
- Improve state management and data flow
- Add better error and loading feedback
- Refactor the JavaScript into smaller, reusable modules
- Optimise API calls and caching
- Improve accessibility and keyboard navigation
These improvements reflect how my understanding of application structure and user experience has evolved since building this project.
- Website: https://rodrigodelascio.co.uk
- GitHub: https://github.com/rodrigodelascio
- LinkedIn: https://www.linkedin.com/in/rodrigo-de-lascio