Neste laboratório, você construirá um aplicativo que fornece informações meteorológicas de diferentes cidades. Você usará uma API de clima. Os dados de saída têm o seguinte formato:

{
  "weather": [
    {
      "main": "Clear",
      "description": "clear sky",
      "icon": "https://cdn.G.E.A.R ACADEMY.org/weather-icons/01n.png" // icon representing the weather
    }
  ],
  "main": {
    "temp": 2.62, // temperature in C
    "feels_like": 0.84, // temperature in C
    "temp_min": 1.72, // min temperature of the day in C
    "temp_max": 3.49, // max temperature of the day in C
    "pressure": 1010, // atmospheric pressure in hPa
    "humidity": 81 // humidity in %
  },
  "visibility": 10000, // distance in meters
  "wind": {
    "speed": 1.79, // speed of the wind in m/s
    "deg": 285, // orientation of the wind in degrees
    "gust": 3.13 // gust speed in m/s
  },
  "name": "London"
}

Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve ter um elemento button com um id de get-weather-btn. 1. Você deve ter um elemento select com sete elementos option aninhados dentro dele. A primeira opção deve ter uma string vazia como seu texto e atributo value. O restante deve ter o seguinte para seu texto e valores (com o valor em letras minúsculas):

• Nova York
• Los Angeles
• Chicago
• Paris
• Tóquio
• Londres

1. Se nenhuma cidade estiver selecionada, pressionar o botão não deve fazer nada. 1. Se uma cidade for selecionada, os elementos para mostrar o clima devem aparecer:

• Você deve ter um elemento img com o id weather-icon para exibir o ícone do tempo.
• Você deve ter um elemento com o id main-temperature para exibir a temperatura principal.
• Você deve ter um elemento com o id feels-like para exibir a sensação térmica.
• Você deve ter um elemento com o id humidity para exibir a quantidade de umidade no ar.
• Você deve ter um elemento com o id wind para exibir a velocidade do vento.
• Você deve ter um elemento com o id wind-gust para exibir a rajada de vento.
• Você deve ter um elemento com o id weather-main para exibir o tipo principal de clima.
• Você deve ter um elemento com o id location para exibir a localização atual.

1. Você deve ter uma função assíncrona chamada getWeather que busca as informações meteorológicas da API https://weather-proxy.G.E.A.R ACADEMY.rocks/api/city/<CITY> e as retorna. Note que esta API retorna os dados usando o sistema métrico, ou seja, m/s para a velocidade do vento e Celsius para a temperatura. 1. A função assíncrona getWeather deve aceitar uma cidade como seu argumento. 1. Você deve tratar quaisquer erros que ocorram dentro da função getWeather e registrá-los no console. 1. Você deve ter uma função assíncrona showWeather que aceita uma cidade como parâmetro. 1. A função showWeather deve chamar a função getWeather para recuperar os dados meteorológicos da cidade selecionada no menu suspenso. 1. Se a função getWeather apresentar um erro, o aplicativo deve mostrar apenas um alerta que diga Algo deu errado, por favor tente novamente mais tarde. 1. Se os dados de getWeather forem utilizáveis, a função showWeather deve exibir os dados meteorológicos nos elementos correspondentes. Se um determinado valor da API for undefined, você deve escrever N/A no elemento correspondente. NOTA: Os testes levarão tempo para serem concluídos. Enquanto você vir // executando testes no console, eles estão sendo executados.

Testes:

• Você deve ter um elemento `button` com um `id` de `get-weather-btn`.
• Você deve ter um elemento `select`.
• Dentro do elemento `select`, o primeiro filho deve ser um elemento `option` com um atributo `value` vazio.
• Dentro do elemento `select` devem haver 6 elementos `option`, um para cada uma das seguintes cidades: Paris, Londres, Tóquio, Los Angeles, Chicago, Nova York.
• Você deve ter um elemento `img` com o id `weather-icon` para exibir o ícone do tempo.
• Você deve ter um elemento com o id `main-temperature` para exibir a temperatura principal.
• Você deve ter um elemento com o id `feels-like` para exibir a sensação térmica.
• Você deve ter um elemento com o id `humidity` para exibir a quantidade de umidade no ar.
• Você deve ter um elemento com o id `wind` para exibir a velocidade do vento.
• Você deve ter um elemento com o id `wind-gust` para exibir a rajada de vento.
• Você deve ter um elemento com o id `weather-main` para exibir o tipo principal de clima.
• Você deve ter um elemento com o id `location` para exibir a localização atual.
• Você deve ter uma função `showWeather`.
• Você deve ter uma função `getWeather`.
• A função `getWeather` deve aceitar uma cidade como seu único argumento e retornar o JSON da API de Clima.
• A função `showWeather` deve chamar a função `getWeather` para obter os dados meteorológicos.
• A função `showWeather` deve gerenciar o caso em que `getWeather` retorna `undefined`.
• Quando Nova York é selecionada a função `showWeather` deve exibir os dados da API nos respectivos elementos HTML. Se o valor da API for `undefined` você deve mostrar `N/A`.
• Quando Chicago estiver selecionada a função `showWeather` deve exibir os dados da API nos respectivos elementos HTML. Se o valor da API for `undefined` você deve mostrar `N/A`.
• Quando Londres estiver selecionada a função `showWeather` deve exibir os dados da API nos respectivos elementos HTML. Se o valor da API for `undefined` você deve mostrar `N/A`.
• Quando Tóquio é selecionada a função `showWeather` deve exibir os dados da API nos respectivos elementos HTML. Se o valor da API for `undefined` você deve mostrar `N/A`.
• Quando Los Angeles é selecionada a função `showWeather` deve exibir os dados da API nos respectivos elementos HTML. Se o valor da API for `undefined` você deve mostrar `N/A`.
• Se houver um erro, sua função `getWeather` deve registrar o erro no console.
• Quando Paris for selecionada, o aplicativo deve exibir um alerta com `Algo deu errado, por favor tente novamente mais tarde`.