Popular Post

🌤️ Cara Membuat Weather App dengan HTML, CSS, dan JavaScript (Menggunakan API)

Posted by on

Membuat Weather App adalah langkah penting setelah memahami konsep API.

Di sinilah kamu mulai melihat bagaimana teori berubah menjadi praktik. Kamu tidak hanya memahami apa itu API, tetapi benar-benar menggunakannya untuk mengambil data secara real-time.



Project ini sederhana, tetapi powerful. Karena untuk pertama kalinya, aplikasi yang kamu buat akan mengambil data dari internet, bukan dari data yang kamu buat sendiri.

Pada tutorial ini, kita akan membuat aplikasi cuaca dengan fitur:

  • Input nama kota
  • Mengambil data cuaca dari API
  • Menampilkan suhu dan kondisi cuaca
  • Tampilan sederhana dan rapi

1. Struktur Project

Seperti biasa, kita menggunakan 3 file:

  • index.html
  • style.css
  • script.js

2. Membuat Struktur HTML

Buat file index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="container">
    <h1>Weather App</h1>

    <div class="search">
      <input type="text" id="cityInput" placeholder="Masukkan nama kota...">
      <button onclick="getWeather()">Cari</button>
    </div>

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

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

3. Membuat Tampilan dengan CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: #4facfe;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  display: flex;
  justify-content: center;
  padding-top: 60px;
}

.container {
  background: white;
  padding: 25px;
  border-radius: 16px;
  width: 320px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.search {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

button {
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #333;
  color: white;
  cursor: pointer;
}

.result {
  font-size: 18px;
}

4. Menggunakan API (JavaScript)

Sekarang buat file script.js:

const apiKey = 'YOUR_API_KEY'; // ganti dengan API key kamu

async function getWeather() {
  const city = document.getElementById('cityInput').value;
  const result = document.getElementById('result');

  if (!city) return;

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

    const data = await response.json();

    if (data.cod !== 200) {
      result.innerHTML = 'Kota tidak ditemukan';
      return;
    }

    result.innerHTML = `
      <h2>${data.name}</h2>
      <p>Suhu: ${data.main.temp}°C</p>
      <p>Cuaca: ${data.weather[0].main}</p>
    `;
  } catch (error) {
    result.innerHTML = 'Terjadi error';
  }
}

5. Cara Mendapatkan API Key

Untuk menggunakan API ini, kamu perlu API key dari OpenWeather:

  1. Buka: https://openweathermap.org/
  2. Daftar akun
  3. Masuk ke dashboard
  4. Copy API key
  5. Masukkan ke dalam kode:
const apiKey = 'API_KEY_KAMU';

6. Penjelasan Cara Kerja

Ketika user memasukkan nama kota dan menekan tombol:

  1. JavaScript mengambil input kota
  2. Mengirim request ke API OpenWeather
  3. API mengembalikan data dalam format JSON
  4. Data ditampilkan ke halaman

7. Hasil yang Didapat

Dengan project ini, kamu sudah berhasil:

  • Menggunakan API secara real-time
  • Mengambil data dari server eksternal
  • Menampilkan data ke UI

Ini adalah langkah besar dari sekadar membuat aplikasi statis.

8. Pengembangan Selanjutnya

Kamu bisa upgrade aplikasi ini:

  • Tambahkan icon cuaca
  • Tambahkan loading state
  • Tambahkan auto detect lokasi
  • UI lebih modern (glassmorphism)
  • Simpan kota terakhir

9. Kesimpulan

Weather App adalah project penting untuk memahami bagaimana aplikasi modern bekerja.

Dengan menggabungkan HTML, CSS, JavaScript, dan API, kamu sudah mulai masuk ke dunia aplikasi yang lebih nyata.

Dan ini baru awal.

Comments

Post a Comment