WEATHER APP

Front End Project

Figma Github


Skills

HTML
CSS
JavaScript
Figma

User story:

As a user, I want a mobile weather application that allows me to search the current temperature and weather conditions for a specific location based on an entered zip code. I want an app that is visual and provides a picture that represents the weather's current conditions and time of day.


Sitemap:

User Flow:

Final Product:


Front-end:

  • HTML
  • CSS
  • JavaScript
  • Fetched Data from an API
  • Mobile Compatible

Learning & Challenges:

  1. First time using an API to fetch data.
  2. Had a hard time fetching the icons that represent the weather condition from the API, so I saved all of the icons to the assets folder to be pulled locally.

Successes:

  1. Saving the icons would not be efficient if this were a larger application, but this method provided the desired result.
  2. Learned how to add a toggle switch that changes the color theme.