GoConqr hat ein neues Design! Sag uns, wie es dir gefällt.

Modul 19 von 23 · Medien

Weather Info exercise

Kostas Diakogiannis

Weather Info exercise

AC-3 Fetch data from openweathermap API

Use everything you have learned so far in order to fetch data from the openweathermap API.

Instead of using a fixed city for your requests, create an input field, and make a request for the city, that the user has picked to fetch data for. 

Create a new section in HTML for every city response you get back. This section should contain a heading (preferably an

 tag with the name of the city), a small paragraph that shows how many degrees the temperature is (the temperature data get's back in Kelvin degrees, subtract 273 from that to convert it to Celsius Degrees!), and a span at the bottom of the section that depicts the description of the weather (small text) for that  city. 

Bonus: Display the icon next to the span also if you can. Find the API endpoint for that and the correct icon data for that, and use it as a source for the small image.

Extra Bonus: Paint the background of each section with a different color, depending on the temperature that you received back from the API. 

The rules for the colors are: 

Citytemp > 40  paint it 'Red'

Citytemp > 35 paint it 'Orange'

Citytemp > 30 paint it 'Yellow'

Citytemp > 20 paint it 'deepskyblue'

Citytemp > 10 paint it 'purple'

Citytemp > 0 paint it 'grey'

Any other temperature below 0, paint it 'white'.

Try to do it the first way it came into your mind, then try not to use if-else, or switch-case statements. Maybe the mapping array technique will help you here.

You can find the full result here if you want

Anleitung

Um im Kurs weiterzukommen, sende einen Versuch dieses Quiz ab. Du kannst ihn nach der letzten Frage absenden.

Zum gewählten Modul

Feedback

Worum geht es?

Wie gefällt dir das neue Design?

Dein Eindruck