Membuat Aplikasi Cuaca Real-Time dengan API dan JavaScript

Dipublikasikan: Juli 2026

Ingin tahu cara membuat aplikasi cuaca yang menampilkan data real-time? Tutorial ini akan memandu Anda menggunakan OpenWeatherMap API untuk membuat web app cuaca yang cantik dan fungsional.

Yang Akan Anda Pelajari

Cara menggunakan API publik
Fetch data dengan JavaScript
Menampilkan ikon cuaca dinamis
Desain UI modern

Kode Lengkap

Simpan sebagai cuaca.html. Anda perlu API key gratis dari https://openweathermap.org/api (daftar gratis).

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aplikasi Cuaca</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family:'Segoe UI',Arial,sans-serif;
      background:linear-gradient(135deg,#74b9ff,#0984e3);
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      padding:20px;
    }
    .weather-card {
      background:rgba(255,255,255,0.95);
      border-radius:20px;
      padding:35px;
      box-shadow:0 20px 60px rgba(0,0,0,0.2);
      width:100%;
      max-width:450px;
      text-align:center;
    }
    h1 { color:#2d3436; margin-bottom:25px; font-size:28px; }
    .search-box { display:flex; gap:10px; margin-bottom:30px; }
    input {
      flex:1; padding:14px 18px; border:2px solid #dfe6e9;
      border-radius:12px; font-size:16px;
    }
    input:focus { outline:none; border-color:#0984e3; }
    button {
      padding:14px 24px; background:#0984e3; color:#fff;
      border:none; border-radius:12px; cursor:pointer; font-size:16px;
    }
    button:hover { background:#0773c5; }
    .weather-info { display:none; }
    .weather-info.active { display:block; }
    .city-name { font-size:26px; font-weight:700; color:#2d3436; }
    .temp {
      font-size:56px; font-weight:700; color:#0984e3;
      margin:10px 0;
    }
    .desc { font-size:18px; color:#636e72; text-transform:capitalize; }
    .details { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:25px; }
    .detail-item { background:#f8f9fa; padding:15px; border-radius:12px; }
    .detail-item .label { font-size:12px; color:#b2bec3; text-transform:uppercase; }
    .detail-item .value { font-size:18px; font-weight:600; color:#2d3436; margin-top:5px; }
    .error { color:#d63031; margin-top:10px; display:none; }
    .loading { color:#636e72; margin-top:10px; display:none; }
  </style>
</head>
<body>
  <div class="weather-card">
    <h1>ðŸŒ¤ Aplikasi Cuaca</h1>
    <div class="search-box">
      <input id="cityInput" placeholder="Masukkan nama kota..." />
      <button onclick="getWeather()">Cari</button>
    </div>
    <div class="loading" id="loading">Memuat data cuaca...</div>
    <div class="error" id="error">Kota tidak ditemukan. Coba lagi.</div>
    <div class="weather-info" id="weatherInfo">
      <div class="city-name" id="cityName"></div>
      <div class="temp" id="temperature"></div>
      <div class="desc" id="description"></div>
      <div class="details">
        <div class="detail-item">
          <div class="label">Kelembaban</div>
          <div class="value" id="humidity">--%</div>
        </div>
        <div class="detail-item">
          <div class="label">Angin</div>
          <div class="value" id="wind">-- km/h</div>
        </div>
        <div class="detail-item">
          <div class="label">Tekanan</div>
          <div class="value" id="pressure">-- hPa</div>
        </div>
      </div>
    </div>
  </div>
  <script>
    const API_KEY = 'YOUR_API_KEY'; // Ganti dengan API key Anda dari openweathermap.org
    async function getWeather() {
      const city = document.getElementById('cityInput').value.trim();
      if (!city) return alert('Masukkan nama kota');
      const loading = document.getElementById('loading');
      const error = document.getElementById('error');
      const info = document.getElementById('weatherInfo');
      loading.style.display = 'block';
      error.style.display = 'none';
      info.classList.remove('active');
      try {
        const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=id`);
        if (!res.ok) throw new Error('Not found');
        const data = await res.json();
        document.getElementById('cityName').textContent = `${data.name}, ${data.sys.country}`;
        document.getElementById('temperature').textContent = `${Math.round(data.main.temp)}Â°C`;
        document.getElementById('description').textContent = data.weather[0].description;
        document.getElementById('humidity').textContent = `${data.main.humidity}%`;
        document.getElementById('wind').textContent = `${Math.round(data.wind.speed * 3.6)} km/h`;
        document.getElementById('pressure').textContent = `${data.main.pressure} hPa`;
        info.classList.add('active');
      } catch(e) {
        error.style.display = 'block';
      } finally {
        loading.style.display = 'none';
      }
    }
    document.getElementById('cityInput').addEventListener('keypress', (e) => { if(e.key === 'Enter') getWeather(); });
  </script>
</body>
</html>