Membuat Aplikasi Konverter Mata Uang dengan Kurs Real-Time

Dipublikasikan: Juli 2026

Konverter mata uang adalah web app yang sangat berguna untuk traveler, pebisnis, dan siapa saja yang bertransaksi dengan valuta asing. Tutorial ini menggunakan API kurs real-time.

Fitur

Pilih mata uang asal dan tujuan
Kurs real-time dari API
Daftar lengkap mata uang dunia
Tampilan bersih dan responsif

Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Konverter Mata Uang</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Segoe UI',Arial,sans-serif; background:linear-gradient(135deg,#00b894,#00cec9); min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px; }
    .container { background:#fff; border-radius:20px; padding:35px; box-shadow:0 20px 60px rgba(0,0,0,0.15); width:100%; max-width:480px; }
    h1 { text-align:center; color:#2d3436; margin-bottom:5px; }
    .subtitle { text-align:center; color:#636e72; margin-bottom:25px; font-size:14px; }
    .amount-input { margin-bottom:20px; }
    .amount-input label { display:block; margin-bottom:6px; font-weight:600; color:#2d3436; }
    .amount-input input { width:100%; padding:14px; border:2px solid #dfe6e9; border-radius:10px; font-size:18px; }
    .amount-input input:focus { outline:none; border-color:#00b894; }
    .currency-row { display:flex; gap:12px; align-items:center; margin-bottom:25px; }
    .currency-select { flex:1; }
    .currency-select label { display:block; margin-bottom:5px; font-weight:600; color:#2d3436; font-size:13px; }
    .currency-select select { width:100%; padding:12px; border:2px solid #dfe6e9; border-radius:10px; font-size:15px; background:#fff; }
    .swap-btn { margin-top:18px; padding:10px 14px; background:#f0f0f0; border:none; border-radius:10px; cursor:pointer; font-size:20px; }
    .swap-btn:hover { background:#e0e0e0; }
    .result-box { background:#f8f9fa; padding:20px; border-radius:14px; text-align:center; margin-top:5px; }
    .result-box .label { color:#636e72; font-size:13px; }
    .result-box .value { font-size:32px; font-weight:700; color:#00b894; margin:5px 0; }
    .result-box .rate { color:#636e72; font-size:13px; }
    .btn { width:100%; padding:16px; background:#00b894; color:#fff; border:none; border-radius:12px; font-size:17px; cursor:pointer; margin-top:15px; }
    .btn:hover { background:#00a381; }
    .loading { text-align:center; color:#636e72; margin-top:10px; display:none; }
  </style>
</head>
<body>
  <div class="container">
    <h1>ðŸ’± Konverter Mata Uang</h1>
    <div class="subtitle">Kurs real-time dari seluruh dunia</div>
    <div class="amount-input"><label>Jumlah</label><input id="amount" type="number" value="1" /></div>
    <div class="currency-row">
      <div class="currency-select"><label>Dari</label><select id="fromCurrency"></select></div>
      <button class="swap-btn" onclick="swap()">â‡„</button>
      <div class="currency-select"><label>Ke</label><select id="toCurrency"></select></div>
    </div>
    <button class="btn" onclick="convert()">Konversi</button>
    <div class="loading" id="loading">Memuat kurs terbaru...</div>
    <div class="result-box">
      <div class="label">Hasil Konversi</div>
      <div class="value" id="resultValue">-</div>
      <div class="rate" id="resultRate"></div>
    </div>
  </div>
  <script>
    const currencies = ['USD','EUR','GBP','JPY','AUD','CAD','CHF','CNY','HKD','SGD','KRW','INR','IDR','MYR','PHP','THB','VND','SAR','AED','TRY','RUB','BRL','MXN','ZAR','NZD','SEK','NOK','DKK','PLN','ILS'];
    const names = {'USD':'US Dollar','EUR':'Euro','GBP':'British Pound','JPY':'Japanese Yen','AUD':'Australian Dollar','CAD':'Canadian Dollar','CHF':'Swiss Franc','CNY':'Chinese Yuan','HKD':'Hong Kong Dollar','SGD':'Singapore Dollar','KRW':'South Korean Won','INR':'Indian Rupee','IDR':'Indonesian Rupiah','MYR':'Malaysian Ringgit','PHP':'Philippine Peso','THB':'Thai Baht','VND':'Vietnamese Dong','SAR':'Saudi Riyal','AED':'UAE Dirham','TRY':'Turkish Lira','RUB':'Russian Ruble','BRL':'Brazilian Real','MXN':'Mexican Peso','ZAR':'South African Rand','NZD':'New Zealand Dollar','SEK':'Swedish Krona','NOK':'Norwegian Krone','DKK':'Danish Krone','PLN':'Polish Zloty','ILS':'Israeli Shekel'};
    function populateSelects() {
      const from = document.getElementById('fromCurrency');
      const to = document.getElementById('toCurrency');
      currencies.forEach(c => {
        from.innerHTML += `<option value="${c}">${c} - ${names[c]}</option>`;
        to.innerHTML += `<option value="${c}">${c} - ${names[c]}</option>`;
      });
      from.value = 'USD'; to.value = 'IDR';
    }
    function swap() {
      const f = document.getElementById('fromCurrency');
      const t = document.getElementById('toCurrency');
      const tmp = f.value; f.value = t.value; t.value = tmp;
      convert();
    }
    async function convert() {
      const amount = parseFloat(document.getElementById('amount').value) || 1;
      const from = document.getElementById('fromCurrency').value;
      const to = document.getElementById('toCurrency').value;
      const loading = document.getElementById('loading');
      loading.style.display = 'block';
      try {
        const res = await fetch(`https://api.exchangerate-api.com/v4/latest/${from}`);
        const data = await res.json();
        const rate = data.rates[to];
        const result = amount * rate;
        document.getElementById('resultValue').textContent = `${result.toFixed(2)} ${to}`;
        document.getElementById('resultRate').textContent = `1 ${from} = ${rate.toFixed(4)} ${to}`;
      } catch(e) {
        document.getElementById('resultValue').textContent = 'Gagal memuat kurs';
      } finally { loading.style.display = 'none'; }
    }
    populateSelects(); convert();
  </script>
</body>
</html>