Simple Clock/Weather App based off the Persona 5 Interface
Created as a practice project to solidify understanding in
- HTML5 and CSS3 (basic responsive layout, managing sprite sheets and animations, overlapping elements in CSS Grid)
- ES6+ Vanilla Javascript (getting date/time, applying page transitions and animations)
- External APIs for weather information (openweathermap.org)
Postmortem: A short, fun project for getting comfortable with CSS/JS fundamentals. Using CSS Grid for stacked sprite elements was good practice, but became messy very quickly. If I revisited this project I'd love to try displaying elements with something like a javascript canvas instead. It would be nice to add some more user options for alternative coordinates, too.
Credits:
- Atlus for Persona 5 sprites/backgrounds
- HattyMikune for P5 font rip "P5hatty" https://drive.google.com/file/d/1CwDPE8fl6ahoktyoiGokwUnJdjp6Rw5d/view
- "Earwig Factory" by Typodermic: Interface Font https://www.dafont.com/earwig-factory.font
- Drew Clements for help with grabbing weather API information https://medium.com/@drewclementsdesign/building-a-weather-app-with-vanilla-javascript-920889a78ca2