A retro newspaper-inspired weather application built for DTC 477: Advanced Web Design. This project uses the OpenWeather API to fetch and display current, 5-day, and hourly weather forecasts. The design is fully responsive and features interactive elements with nostalgic styling.
Check it out here:
🔗 Repo: https://zt-devlog.github.io/weather-app/
This Weather Application project demonstrates a comprehensive implementation of API integration with a creative user interface. The development process followed these phases:
- API Research – Explored the OpenWeather API documentation to understand endpoints and data structure
- UI Design – Created a retro newspaper layout for displaying weather data
- HTML/CSS Development – Built structure and responsive styling by hand
- JavaScript Integration – Used
fetch()to retrieve weather data and display it in real time - Feature Enhancements – Included geolocation, animated loading states, error handling, and ASCII-style graphs
I used Claude.AI to help debug tricky API issues, refine the UI animations, and improve error handling. The assistant also helped enhance responsiveness and ensure clarity of code structure and purpose.
- HTML5
- CSS3
- JavaScript (vanilla)
- OpenWeather API
- LocalStorage
- Geolocation API
- 🔍 Weather by City & State
- 📍 Geolocation-based forecast
- 📅 5-day forecast view with weather icons
- ⏰ ASCII-style hourly temperature chart
- 🎨 Retro-themed responsive design
- 🛑 Error messaging and loading indicators
Created by Zoe Thompson for DTC 477 — Advanced Web Design
Washington State University Vancouver, 2025