Scrip html Kurs Mata Uang blogger

<div id="kurs-app">

  <h2>💱 Kurs Mata Uang Hari Ini</h2>

  <div class="grid">

    <div class="box">

      <h3>💵 USD</h3>

      <p id="usd">Loading...</p>

    </div>

    <div class="box">

      <h3>💴 JPY</h3>

      <p id="jpy">Loading...</p>

    </div>

    <div class="box">

      <h3>🕌 SAR</h3>

      <p id="sar">Loading...</p>

    </div>

    <div class="box">

      <h3>🇲🇾 MYR</h3>

      <p id="myr">Loading...</p>

    </div>

    <div class="box">

      <h3>🇮🇳 INR</h3>

      <p id="inr">Loading...</p>

    </div>

    <div class="box">

      <h3>🇨🇳 CNY</h3>

      <p id="cny">Loading...</p>

    </div>

  </div>

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

</div>

<style>

#kurs-app {

  font-family: Arial, sans-serif;

  max-width: 600px;

  margin: auto;

  color: #fff;

  text-align: center;

}

#kurs-app h2 {

  margin-bottom: 15px;

}

.grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

}

.box {

  background: linear-gradient(135deg,#0f2027,#2c5364);

  padding: 12px;

  border-radius: 12px;

  box-shadow: 0 5px 12px rgba(0,0,0,0.3);

}

.box p {

  font-size: 15px;

  font-weight: bold;

}

small {

  color: #ccc;

}

</style>

<script>

function fetchWithTimeout(url, timeout = 7000) {

  return Promise.race([

    fetch(url),

    new Promise((_, reject) =>

      setTimeout(() => reject("timeout"), timeout)

    )

  ]);

}

async function loadKurs() {

  try {

    let res = await fetchWithTimeout("https://open.er-api.com/v6/latest/USD");

    let data = await res.json();

    let usd = data.rates.IDR;

    let jpy = usd / data.rates.JPY;

    let sar = usd / data.rates.SAR;

    let myr = usd / data.rates.MYR;

    let inr = usd / data.rates.INR;

    let cny = usd / data.rates.CNY;

    document.getElementById("usd").innerHTML =

      "Rp " + usd.toLocaleString("id-ID");

    document.getElementById("jpy").innerHTML =

      "Rp " + Math.round(jpy).toLocaleString("id-ID");

    document.getElementById("sar").innerHTML =

      "Rp " + Math.round(sar).toLocaleString("id-ID");

    document.getElementById("myr").innerHTML =

      "Rp " + Math.round(myr).toLocaleString("id-ID");

    document.getElementById("inr").innerHTML =

      "Rp " + Math.round(inr).toLocaleString("id-ID");

    document.getElementById("cny").innerHTML =

      "Rp " + Math.round(cny).toLocaleString("id-ID");

    document.getElementById("update-time").innerHTML =

      "Update: " + new Date().toLocaleTimeString();

  } catch {

    // fallback aman

    document.getElementById("usd").innerHTML = "Rp 15.000";

    document.getElementById("jpy").innerHTML = "Rp 100";

    document.getElementById("sar").innerHTML = "Rp 4.000";

    document.getElementById("myr").innerHTML = "Rp 3.200";

    document.getElementById("inr").innerHTML = "Rp 180";

    document.getElementById("cny").innerHTML = "Rp 2.100";

    document.getElementById("update-time").innerHTML = "Estimasi";

  }

}

loadKurs();

setInterval(loadKurs, 60000);

</script>