Mercurial > titip

<!doctype html>
<head>
  <title>Kalkulator</title>
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <style type="text/css">
    body {
      font-size: 12px;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      line-height: 1.5;
      margin: 0px;
      background-color: #eee;
    }
    #content {
      width: 100%;
      min-height: 100vh;
      padding: 10px;
      margin: auto;
      background-color: #fff;
    }
    @media (min-width: 600px) {
      #content {
        width: 500px;
      }
    }
    * { box-sizing: border-box; }
    ul { padding-left: 20px; }
    #n, .js { display: none; }
    input, button, select, option, .js { font-size: 150%; }
  </style>
</head>
<body>
  <div id="content">
    <h1>Konversi buat nitip</h1>
    <form>
      <p>
        <label for="x">Jumlah dalam yen:</label>
        <br>
        <input id="x" name="x" type="number" autofocus>
      </p>
      <p>
        <button type="submit">Hitung</button>
        <button type="reset">Hapus</button>
      </p>
    </form>
    <div class="js" id="loading">
      <p>Memuat data nilai tukar...</p>
    </div>
    <div class="js" id="ok">
      <p>
        Biaya:
      </p>
      <ul>
        <li>
          Bank transfer:
          <span id="result-bank"></span> IDR
          (<span id="rate-text"></span> IDR/JPY)
        </li>
        <li>
          PayPal:
          <span id="result-paypal"></span> JPY
        </li>
      </ul>
    </div>
    <div class="js" id="error">
      <p>Koneksi ke server nilai tukar bermasalah.</p>
    </div>

    <hr>
    <ul>
      <li>Ongkir, cukai, dll tidak termasuk.</li>
      <li>Berhubung sudah punya timbangan, ongkir (estimasi) bisa dihitung sebelum dikirim.</li>
      <li><a href="http://www.post.japanpost.jp/int/charge/list/ems1_en.html">Tabel ongkir EMS</a>.</li>
      <li>Perhitungan:
        <ul>
          <li>Bank: <code>jumlah &times; 1.07 &times; nilai_tukar</code>, dibulatkan ke seribuan terdekat.</li>
          <li>PayPal: <code>jumlah &times; 1.05</code>, dibulatkan ke satuan terdekat.</li>
        </ul>
      </li>
      <li>Jangan lupa memastikan jumlah setelah pajak dan ongkir (lokal).</li>
      <li>Data nilai tukar didapat dari layanan <a href="http://fixer.io/">Fixer.io</a>.</li>
    </ul>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
    // best javascript ahead. Proceed with care.
    var
      displayResult = function(x, rate) {
        $("#rate-text").text(rate.toLocaleString())
        $("#result-bank").text((Math.round(x * 1.07 * rate / 1000) * 1000).toLocaleString())
        $("#result-paypal").text((Math.round(x * 1.05)).toLocaleString())
        $("#ok").show()
      },
      loading = $("#loading"),
      doButton = $("button[type=submit]"),
      clearButton = $("button[type=reset]"),
      unlock = function() {
        loading.hide()
        doButton.attr("disabled", false)
      },
      lock = function() {
        loading.show()
        doButton.attr("disabled", true)
      },
      xForm = $("#x"),
      action = function(e) {
        e.preventDefault()
        $(".js").hide()
        var x = parseFloat(xForm.val())
        if (x === NaN || x === undefined) { return false; }

        if (window.rate === undefined) {
          lock()
          $.getJSON("https://api.fixer.io/latest", { base: "JPY", symbols: "IDR" })
          .done(function(data) {
            window.rate = data.rates["IDR"]
            displayResult(x, window.rate)
          })
          .fail(function() {
            $("#error").show()
          })
          .always(function() {
            unlock()
          })
        } else {
          displayResult(x, window.rate)
        }
      }
    clearButton.click(function(e) { xForm.focus() })
    doButton.click(action)
    $("form").submit(action)
  </script>
</body>
author	nanaya <me@myconan.net>
date	Thu, 11 Jun 2015 16:59:13 +0900
parents	3c9ac4a429a5
children	9e5f60aae01c