Clima ao Vivo com JavaScript: Criando um App de Clima em Tempo Real

#HTML
#CSS
#JavaScript

Oi, pessoal! Hoje eu vou compartilhar um projeto web super bacana que desenvolvi usando JavaScript: o Clima ao Vivo. Esse app é capaz de mostrar as condições climáticas de qualquer cidade do mundo, em tempo real, usando uma API de clima. ☀️🌧

Como funciona o app?

A ideia é simples: o usuário insere o nome de uma cidade, e o app retorna informações como temperatura atual, descrição do clima (ensolarado, chuvoso, etc.), umidade, e até a velocidade do vento. Vamos utilizar a OpenWeatherMap API para buscar esses dados e exibi-los de forma fácil e intuitiva.

Estrutura do projeto

HTML: Estrutura básica da página.
CSS: Estilo visual do app.
JavaScript: Faz as requisições à API e atualiza a página com os dados do clima.

O código

Aqui está o código para construir o app:

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clima ao Vivo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
      <h1>Clima ao Vivo 🌍</h1>
      <input type="text" id="city" placeholder="Digite o nome da cidade">
      <button onclick="getWeather()">Buscar Clima</button>

      <div id="weather-info">
          <h2 id="city-name"></h2>
          <p id="temperature"></p>
          <p id="description"></p>
          <p id="humidity"></p>
          <p id="wind-speed"></p>
      </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  background-color: #f0f8ff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  text-align: center;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

input {
  padding: 10px;
  margin-top: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

button:hover {
  background-color: #45a049;
}

#weather-info {
  margin-top: 20px;
}

#weather-info h2, #weather-info p {
  margin: 5px;
  color: #333;
}

JavaScript

async function getWeather() {
  const city = document.getElementById('city').value;
  const apiKey = 'SUA_API_KEY_AQUI'; // Coloque sua chave de API aqui
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=pt_br`;

  try {
      const response = await fetch(url);
      const data = await response.json();

      document.getElementById('city-name').innerText = `Clima em ${data.name}`;
      document.getElementById('temperature').innerText = `Temperatura: ${data.main.temp}°C`;
      document.getElementById('description').innerText = `Descrição: ${data.weather[0].description}`;
      document.getElementById('humidity').innerText = `Umidade: ${data.main.humidity}%`;
      document.getElementById('wind-speed').innerText = `Velocidade do vento: ${data.wind.speed} km/h`;
  } catch (error) {
      alert("Cidade não encontrada, tente novamente.");
  }
}

Como configurar a API?

Vá até o site do OpenWeatherMap e crie uma conta.
Após o cadastro, você vai receber uma API Key (chave de API).
No código JavaScript, substitua o valor 'SUA_API_KEY_AQUI' pela sua chave.

Como o app funciona?

O usuário digita o nome de uma cidade no campo de texto.
Ao clicar no botão "Buscar Clima", o app faz uma requisição à API e retorna as informações sobre o clima da cidade.
As informações (como temperatura, descrição do clima, umidade e velocidade do vento) são exibidas na tela de forma organizada.

Interface Visual

A interface é clean, com foco nas informações principais, como a temperatura e a descrição do clima. Cores suaves e uma disposição centralizada deixam o app visualmente agradável e fácil de usar.

O que eu aprendi com esse projeto?

Além de praticar JavaScript e trabalhar com APIs, esse projeto foi uma ótima forma de aprender mais sobre promises e fetch API. Trabalhar com dados dinâmicos e exibi-los de forma eficiente no navegador foi um desafio legal e recompensador.

Próximos passos

Esse app já funciona bem, mas algumas melhorias podem ser feitas:

Adicionar gráficos de temperatura usando uma biblioteca como o Chart.js.
Incluir previsão do tempo para os próximos dias.
Melhorar a responsividade para dispositivos móveis.

Esse projeto é perfeito para quem quer entender como consumir APIs em JavaScript e criar uma interface interativa. Espero que tenham gostado! 😄