Fetching API Data
Author: Icah Vega Class: Web Dev Fall 2021 Instructor: Tony Grimes Link: Github Repo Link | Github Pages Link
Fetch()
assignment using a Weather API from Open Weather. In order for me to avail an API, I had to create an API key which is also in the website's documentation. I used Postman to check my API.
I created a form and a button in able to select a city, town or country. Using the data found inside the API, I was able to identify the place, temperature, description, max temperature and humidity. I used newDate()
to create my date, to modify the date I used toDateString()
and toLocaleTimeString()
. I used switch()
statement to change the background of the Weather App depending on the description (i.e few clouds, overcast clouds, clear sky, etc.).
863d762: This is the commit where I added everything.
- Background for the weather box, I wanted to make it a bit transparent but I could not make the
z-index
to work and not affect my text. - Date: I had a hard time figuring out how to make Luxon work using CDNjs so I opt in for vanilla js, I also had a hard time trying to remove the seconds. My initial goal for this date is too change depending on the timezone that I searched for, but the API I used did not came with the date and time of the places.
- Overcast Photo by Andrew Beatson from Pexels
- Few Clouds Photo by Pixabay from Pexels
- Clear Sky Photo by Erik van Dijk from Unsplash
- Scattered Clouds Photo by Pixabay from Pexels
- Light Rain Photo by Kaique Rocha from Pexels
- Broken Clouds Photo by James Wheeler from Pexels
- Mist Photo by eberhard grossgasteiger from Pexels
- Moderate Rain Photo by Bibhukalyan Acharya from Pexels
- Instructor Tony Grimes: Fetch code and guidance.
- John Paul Adobas: CSS suggestions.
- Norvillie Villaruel: Switch statement advise.
MDN Web Docs | W3Schools | Traversy Media | Markdown Emojis by Ika