The Project for phase 1 at Flatiron School had the following requirments:
The web app that you are creating needs to be a single page application.
The app must be created using html/css/js that accesses data from a pubic api. The api must be handled asynchronously and use JSON.
You need to use at least 3 event listeners.
So, these are the rules. Seems challenging, you just learned these new concepts and you are thrown in a situlation where you need to make something with them. The hardest part for me was finding an API. I looked at API’s that tell dad jokes to APIs that have data about cocktails. I didn’t know what app to make with them. Luckly, I found a weather API called openWeatherMap. It tells you the current weather of every place in the world. You just need to create an account on their site and they will give you an API key. I chose the basic free version.
I decided to make a simple weather app. At the search bar, users would enter a city, click on the submit button and basic information would appear.
After users entered a city name, it would persent new content into the screen. The way I fetch the api was that it would get the JSON data for only the city the user was looking for. This new content on the top has the city’s name, an image of the current weather. Followed by the temperture and how it feels like outside. If you notice there’s text that says “More Details”. If a user clicks on it then they would get extra information about the weather in that city.
The “More Details” is treated like a button that toggles. It’s like a switch that shows the extra information and hiddens it the second time you click on it.
Check it out for yourself
weather-app github
Top comments (0)