Scrip Blogger Kurs Valas versi 2: + Kalkulator Konversi Mata Uang

<div id="kurs-app">

  <h2>💱 Kurs & Kalkulator Konversi BMB</h2>

  <div class="grid">

    <div class="box"><h3>💵 USD</h3><p id="usd">...</p></div>

    <div class="box"><h3>💴 JPY</h3><p id="jpy">...</p></div>

    <div class="box"><h3>🕌 SAR</h3><p id="sar">...</p></div>

    <div class="box"><h3>🇲🇾 MYR</h3><p id="myr">...</p></div>

    <div class="box"><h3>🇮🇳 INR</h3><p id="inr">...</p></div>

    <div class="box"><h3>🇨🇳 CNY</h3><p id="cny">...</p></div>

  </div>

  <small id="update-time"></small>

  <div class="konversi-box">

    <h3>Konversi Mata Uang</h3>

    

    <div class="calc-container">

      <div class="input-wrap">

        <label>Dari:</label>

        <select id="from-currency" onchange="hitungKonversi()">

          <option value="idr">IDR (Rupiah)</option>

          <option value="usd">USD (Dollar AS)</option>

          <option value="jpy">JPY (Yen Jepang)</option>

          <option value="sar">SAR (Riyal Saudi)</option>

          <option value="myr">MYR (Ringgit Malaysia)</option>

          <option value="inr">INR (Rupee India)</option>

          <option value="cny">CNY (Yuan China)</option>

        </select>

        <input type="number" id="input-amount" placeholder="0" oninput="hitungKonversi()">

      </div>

      <div class="swap-icon" onclick="swapCurrency()"> ⇄ </div>

      <div class="input-wrap">

        <label>Ke:</label>

        <select id="to-currency" onchange="hitungKonversi()">

          <option value="usd">USD (Dollar AS)</option>

          <option value="idr" selected>IDR (Rupiah)</option>

          <option value="jpy">JPY (Yen Jepang)</option>

          <option value="sar">SAR (Riyal Saudi)</option>

          <option value="myr">MYR (Ringgit Malaysia)</option>

          <option value="inr">INR (Rupee India)</option>

          <option value="cny">CNY (Yuan China)</option>

        </select>

        <input type="text" id="result-amount" placeholder="Hasil" readonly>

      </div>

    </div>

    

    <p id="convert-rate-info" style="font-size: 11px; margin-top: 15px; color: #00ff00;"></p>

  </div>

</div>

<style>

#kurs-app { font-family: 'Segoe UI', Arial, sans-serif; max-width: 500px; margin: auto; color: #fff; text-align: center; background: #1a1a1a; padding: 20px; border-radius: 15px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 5px; }

.box { background: linear-gradient(135deg,#16222a,#3a6073); padding: 10px; border-radius: 10px; border: 1px solid #444; }

.box h3 { margin: 0 0 5px 0; font-size: 12px; color: #ddd; }

.box p { font-size: 13px; font-weight: bold; margin: 0; color: #00ff00; }

.konversi-box { margin-top: 20px; background: rgba(255,255,255,0.05); padding: 20px; border-radius: 12px; border: 1px solid #333; }

.calc-container { display: flex; flex-direction: column; gap: 10px; align-items: center; }

.input-wrap { width: 100%; text-align: left; }

.input-wrap label { font-size: 11px; color: #aaa; margin-bottom: 4px; display: block; }

.swap-icon { cursor: pointer; background: #333; padding: 5px 15px; border-radius: 20px; font-weight: bold; margin: 5px 0; transition: 0.3s; }

.swap-icon:hover { background: #444; color: #00ff00; }

select, input { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid #444; background: #222; color: white; box-sizing: border-box; font-size: 15px; margin-bottom: 5px; }

input[readonly] { background: #111; color: #00ff00; font-weight: bold; border-color: #222; }

small { color: #888; font-size: 10px; }

</style>

<script>

// Data Kurs Dasar (akan diupdate dari API)

var rates = { idr: 1, usd: 16200, jpy: 106, sar: 4300, myr: 3400, inr: 195, cny: 2250 };

async function loadKurs() {

  try {

    const response = await fetch("https://open.er-api.com/v6/latest/USD");

    const data = await response.json();

    const usdToIdr = data.rates.IDR;

    rates.usd = usdToIdr;

    rates.jpy = usdToIdr / data.rates.JPY;

    rates.sar = usdToIdr / data.rates.SAR;

    rates.myr = usdToIdr / data.rates.MYR;

    rates.inr = usdToIdr / data.rates.INR;

    rates.cny = usdToIdr / data.rates.CNY;

    // Update Tampilan Box

    document.getElementById("usd").innerText = "Rp " + Math.round(rates.usd).toLocaleString("id-ID");

    document.getElementById("jpy").innerText = "Rp " + Math.round(rates.jpy).toLocaleString("id-ID");

    document.getElementById("sar").innerText = "Rp " + Math.round(rates.sar).toLocaleString("id-ID");

    document.getElementById("myr").innerText = "Rp " + Math.round(rates.myr).toLocaleString("id-ID");

    document.getElementById("inr").innerText = "Rp " + Math.round(rates.inr).toLocaleString("id-ID");

    document.getElementById("cny").innerText = "Rp " + Math.round(rates.cny).toLocaleString("id-ID");

    document.getElementById("update-time").innerText = "Update: " + new Date().toLocaleTimeString();

    

    hitungKonversi();

  } catch (e) {

    document.getElementById("update-time").innerText = "Mode Offline";

  }

}

function hitungKonversi() {

  var from = document.getElementById("from-currency").value;

  var to = document.getElementById("to-currency").value;

  var amount = document.getElementById("input-amount").value;

  var resultField = document.getElementById("result-amount");

  var info = document.getElementById("convert-rate-info");

  if (amount > 0) {

    // Logika: Ubah dulu ke IDR baru ubah ke target

    var amountInIdr = amount * rates[from];

    var finalResult = amountInIdr / rates[to];

    

    // Tampilan hasil (Jika IDR pakai pembulatan, jika asing pakai 2 desimal)

    if (to === "idr") {

      resultField.value = "Rp " + Math.round(finalResult).toLocaleString("id-ID");

    } else {

      resultField.value = finalResult.toFixed(2);

    }

    

    // Info Kurs Sekilas

    var singleRate = rates[from] / rates[to];

    info.innerText = "1 " + from.toUpperCase() + " = " + (to === "idr" ? "Rp " + Math.round(singleRate).toLocaleString("id-ID") : singleRate.toFixed(4) + " " + to.toUpperCase());

  } else {

    resultField.value = "";

    info.innerText = "";

  }

}

function swapCurrency() {

  var fromSelect = document.getElementById("from-currency");

  var toSelect = document.getElementById("to-currency");

  

  var temp = fromSelect.value;

  fromSelect.value = toSelect.value;

  toSelect.value = temp;

  

  hitungKonversi();

}

loadKurs();

</script>