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).
Top comments (8)
You should make mobile app for the frying pan temprature, that reads when the temperature is ready for cooking ππ Just need a pan with built in sensors to get data from π
This is a great idea!! :D
Nicely done! And the code looks pretty clean as well. Looking forward to seeing how you progress!
thank you! :)
Thanks for this funny article!
Thatβs cool!
Love the puns too π
Really cool! π
Thank you!! :)