emmapre / project-weather-app

Weather Web App

Weather App

This sixth assigment in Technigo's bootcamp was to make a weather app using the OpenWeather API. The app is mobile-first and shows the current weather, temperature and sunrise/sunset. It also has a forecast of the temperature for the five upcoming days. The colours and the icon changes depending on the weather.

The problem

I started the project by making a structure on what I needed to show on the website and then made sure I could get the data from the API which was something I had never done before. When I had the data I needed in my app I started the styling. Then I added different styling depending on the weather, which was so much fun. If I had more time I would have liked to add a styling for the night and for the other kind of weathers too. If the weather is not clear, rainy, drizzle, cloudy, thunderstorm or snow it will give a default rainbow background with a generic icon and headline.

At first I struggled with date() but after making it work once I think I kind of understand how it works. There are still some minor styling issues, for example Malmo has no ö and the dashed border does not change colors with the text. I know why the border is not working, I just have to figure out a solution to make it work. The styling is a little bit messy since a lot of it is done in the JavaScript. This could maybe be more structured if I added classes instead of using innerHTML in the if/else so more of the styling stays in the CSS.

I'm still proud of how it turned out, I think it looks pretty and I'm amazed by how many things it is possible to create from an API.

View it live

Take a look! https://emmas-weather-app.netlify.com/