DEV Community

Cover image for My Egg-citing Weather App
Ciara Cloud
Ciara Cloud

Posted on

My Egg-citing Weather App

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.

Image description

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.

Image description

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).

Image description

Top comments (8)

Collapse
 
madza profile image
Madza

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 πŸ˜‰

Collapse
 
ciaracloud profile image
Ciara Cloud

This is a great idea!! :D

Collapse
 
parenttobias profile image
Toby Parent

Nicely done! And the code looks pretty clean as well. Looking forward to seeing how you progress!

Collapse
 
ciaracloud profile image
Ciara Cloud

thank you! :)

Collapse
 
curiousdev profile image
CuriousDev

Thanks for this funny article!

Collapse
 
eric23 profile image
Eric

That’s cool!
Love the puns too πŸ™‚

Collapse
 
laudebugs profile image
Laurence Ininda

Really cool! πŸ™Œ

Collapse
 
ciaracloud profile image
Ciara Cloud

Thank you!! :)