hanna-skeppe / project-weather-app

Weather Web App

Weather App

This week's project was to build a simple weather web app that shows today's weather and temperature, and a 5-day forecast using a weather API. The project was part of Technigo Bootcamp.

Requirements completed:

(Minimum Requirements)

• Fetch data from the API using fetch() in JavaScript
• All required data should be present and fetched from the API
• The presentation of the data should be in a specified format.
• The page should work on mobile (mobile first!), tablet and desktop (Be responsive)

(Intermediary Goals)

• Change the colors of the page based on the weather. If the weather is warm – use warm colors. If the weather is colder, use cold colors. If you really want to push you CSS muscles you can even make a background gradient.
• Include visual indicators for the type of weather, cloudy/sunny/rainy/etc.

Tech Used

HTML, CSS, Javascript, fetch data from API.

The problem

I started out on monday doing mob-programming. We all found that mob-programming was a good way to faster get over the first obstcles and uncertainties that often occur when starting a new project. For me personally it also helped a lot in that I got a foundation that I could continue to build on on my own.

I think this project was fun and I gained at least basic knowledge about how to fetch data from API:s. I might return to this project in the future and make it more advanced when my knowledge has improved.

I did a quite simple styling for this project, that didn't need too much tweaking to make it responsive. I had some difficulties positioning the background image on .weathertoday using CSS background-size/object-fit/object-position. I couldn't get the pictures positioned where I wanted. I don't know why it didn't work, since I used this before on previous projects. I solved it by instead cropping the pictures, but they still don't have ideal position for bigger screens.

View it live

https://app.netlify.com/sites/youthful-ardinghelli-e80e81/