Mini Project: Aplikasi Cuaca dengan JavaScript

Aplikasi cuaca (Weather App) adalah proyek JavaScript sederhana yang menampilkan data suhu, kondisi langit, dan lokasi secara real-time menggunakan API cuaca publik seperti OpenWeatherMap. Langsung saja maki kita buat Mini Project: Aplikasi Cuaca dengan JavaScript.

Menyiapkan API OpenWeatherMap

Kunjungi https://openweathermap.org
Daftar akun, lalu dapatkan API Key (kunci API) gratis.

Gunakan endpoint berikut untuk request data:

https://api.openweathermap.org/data/2.5/weather?q={kota}&appid={API_KEY}&units=metric

Contoh:

https://api.openweathermap.org/data/2.5/weather?q=Jakarta&appid=123abc456&units=metric

Struktur HTML Dasar

Buat file index.html:

<!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>
    body { font-family: Arial; text-align: center; background: #eef2f3; }
    .weather { margin-top: 30px; }
    input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
    button { padding: 8px 12px; cursor: pointer; border: none; background: #007bff; color: white; border-radius: 4px; }
    .card { margin: 20px auto; padding: 20px; background: white; width: 300px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
  </style>
</head>
<body>
  <h1>️ Aplikasi Cuaca</h1>
  <input type="text" id="city" placeholder="Masukkan nama kota">
  <button id="search">Cari</button>

  <div class="weather" id="weather"></div>

  <script src="app.js" type="module"></script>
</body>
</html>

Script JavaScript (`app.js`)

const API_KEY = "MASUKKAN_API_KEY_KAMU";
const searchBtn = document.getElementById("search");
const cityInput = document.getElementById("city");
const weatherBox = document.getElementById("weather");

async function getWeather(city) {
  try {
    weatherBox.innerHTML = "⏳ Memuat data cuaca...";

    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=id`
    );

    if (!response.ok) throw new Error("Kota tidak ditemukan");

    const data = await response.json();
    showWeather(data);
  } catch (error) {
    weatherBox.innerHTML = `<p style="color:red;">❌ ${error.message}</p>`;
  }
}

function showWeather(data) {
  const { name, main, weather } = data;

  weatherBox.innerHTML = `
    <div class="card">
      <h2>${name}</h2>
      <p>${weather[0].description}</p>
      <h3>${main.temp}°C</h3>
      <p>Kelembapan: ${main.humidity}%</p>
      <p>Tekanan: ${main.pressure} hPa</p>
    </div>
  `;
}

searchBtn.addEventListener("click", () => {
  const city = cityInput.value.trim();
  if (city) getWeather(city);
});

Hasilnya

Saat pengguna mengetik nama kota seperti “Jakarta” dan menekan tombol Cari, aplikasi akan:

Mengambil data dari OpenWeatherMap.
Menampilkan hasilnya secara real-time di halaman.
Menangani error (misal: kota tidak ditemukan).

Studi Kasus: Otomatis Tampilkan Cuaca Lokasi Pengguna

Tambahkan fitur geolocation agar app bisa menampilkan cuaca pengguna secara otomatis.

navigator.geolocation.getCurrentPosition(async (pos) => {
  const { latitude, longitude } = pos.coords;
  const response = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric&lang=id`
  );
  const data = await response.json();
  showWeather(data);
});

Dengan kode ini, aplikasi akan otomatis menampilkan cuaca di lokasi kamu saat dibuka pertama kali.

Bonus: Simpan Riwayat Pencarian ke LocalStorage

Tambahkan di getWeather() setelah showWeather(data):

let history = JSON.parse(localStorage.getItem("weatherHistory")) || [];
history.push(data.name);
localStorage.setItem("weatherHistory", JSON.stringify(history));

Kamu bisa menampilkan riwayat pencarian di bawah form pencarian juga, agar pengguna tahu kota mana saja yang sudah dicari.

Kesimpulan

Fitur	Kegunaan
Fetch API	Mengambil data cuaca dari server
async/await	Menangani proses asynchronous
JSON parse	Mengubah response ke format JavaScript
DOM Manipulation	Menampilkan hasil di halaman
LocalStorage	Menyimpan data riwayat pencarian

Dengan proyek ini, kamu telah belajar memadukan API, DOM, dan JavaScript modern untuk membuat aplikasi real-time yang menarik dan fungsional.