¡GoConqr estrena diseño! Cuéntanos qué te parece.

Módulo 19 de 23 · Multimedia

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

Instrucciones

Para avanzar en el curso, envía un intento de este test. Puedes enviarlo después de la última pregunta.

Ir al módulo elegido

Escríbenos

¿Sobre qué es tu mensaje?

¿Qué te parece el nuevo diseño?

¿Te gusta?