This content originally appeared on DEV Community and was authored by DEV Community
When my instructor at DigitalCrafts told my classmates and I that we had to build a weather app using an API, I knew that I had to hatch a plan to make the app functional and entertaining! There was no yolkin' around!
The process started with me searching the internet for images that fit eggs-actly what I wanted. I would use a sunny side up egg to represent sunny weather, fried egg for cloudy weather, runny yolk for rainy weather, broken egg for thunderstorm, scrambled egg whites for snowy weather, and regular scrambled eggs for all other weather conditions.
Once I found the images, I tested the Open Weather Map API. I found the Postman application eggs-tremely helpful during this step because it allowed me to test my links by mimicking the front end.
After I tested the link with my API key, I was able add the url to my code. I wrapped the url in an asynchronous function, in order to fetch data from the url and convert the data to JSON. From there, I could access specific data from the JSON object(s) by using dot notation. Then, I added the data to elements that I created in the DOM (see code snippet below). I repeated this process until I had all information that I needed for the weather app displayed on the screen.
Now that the app is completed, users can look up a city's weather by typing in the zipcode for the city. The daily weather will show up with the egg for the current weather, as well as the weather forecast for the next 8 days and their corresponding egg images.
Check out the video walk through here!
If I had more time, I would add CSS for the loading page in between the zipcode search and weather information, but overall I am pretty eggs-tatic about how the weather app turned out!
If you'd like to see my code, check out my github repo (keep in mind that you will have to add your own api key for Open Weather Map API in order to test it).
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-02-28T02:26:17+00:00) My Egg-citing Weather App. Retrieved from https://www.scien.cx/2022/02/28/my-egg-citing-weather-app/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.