GoConqr has a new look! Let us know what you think.

Module 19 of 23 · Media

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

Instructions

You must submit an attempt for this quiz to progress. You can submit it after the last question.

Go to the chosen module

Feedback

What is it about?

What do you think of the new look?

How do you like it?