|
0
|
1 <!doctype html>
|
|
|
2 <head>
|
|
|
3 <title>Kalkulator</title>
|
|
|
4 <meta name="viewport" content="width=device-width">
|
|
|
5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
|
|
6 <style type="text/css">
|
|
|
7 body {
|
|
|
8 font-size: 12px;
|
|
|
9 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
|
|
10 line-height: 1.5;
|
|
|
11 margin: 0px;
|
|
|
12 background-color: #eee;
|
|
|
13 }
|
|
|
14 #content {
|
|
|
15 width: 100%;
|
|
|
16 min-height: 100vh;
|
|
|
17 padding: 10px;
|
|
|
18 margin: auto;
|
|
|
19 background-color: #fff;
|
|
|
20 }
|
|
|
21 @media (min-width: 600px) {
|
|
|
22 #content {
|
|
|
23 width: 500px;
|
|
|
24 }
|
|
|
25 }
|
|
|
26 * { box-sizing: border-box; }
|
|
|
27 ul { padding-left: 20px; }
|
|
|
28 #n, .js { display: none; }
|
|
|
29 input, button, select, option, .js { font-size: 150%; }
|
|
|
30 </style>
|
|
|
31 </head>
|
|
|
32 <body>
|
|
|
33 <div id="content">
|
|
|
34 <h1>Konversi buat nitip</h1>
|
|
|
35 <form>
|
|
|
36 <p>
|
|
|
37 <label for="x">Jumlah dalam yen:</label>
|
|
|
38 <br>
|
|
|
39 <input id="x" name="x" type="number" autofocus>
|
|
|
40 </p>
|
|
|
41 <p>
|
|
|
42 <button type="submit">Hitung</button>
|
|
|
43 <button type="reset">Hapus</button>
|
|
|
44 </p>
|
|
|
45 </form>
|
|
|
46 <div class="js" id="loading">
|
|
|
47 <p>Memuat data nilai tukar...</p>
|
|
|
48 </div>
|
|
|
49 <div class="js" id="ok">
|
|
|
50 <p>
|
|
|
51 Biaya:
|
|
|
52 </p>
|
|
|
53 <ul>
|
|
|
54 <li>
|
|
|
55 Bank transfer:
|
|
|
56 <span id="result-bank"></span> IDR
|
|
|
57 (<span id="rate-text"></span> IDR/JPY)
|
|
|
58 </li>
|
|
|
59 <li>
|
|
|
60 PayPal:
|
|
|
61 <span id="result-paypal"></span> JPY
|
|
|
62 </li>
|
|
|
63 </ul>
|
|
|
64 </div>
|
|
|
65 <div class="js" id="error">
|
|
|
66 <p>Koneksi ke server nilai tukar bermasalah.</p>
|
|
|
67 </div>
|
|
|
68
|
|
|
69 <hr>
|
|
|
70 <ul>
|
|
|
71 <li>Ongkir, cukai, dll tidak termasuk.</li>
|
|
|
72 <li>Berhubung sudah punya timbangan, ongkir (estimasi) bisa dihitung sebelum dikirim.</li>
|
|
|
73 <li><a href="http://www.post.japanpost.jp/int/charge/list/ems1_en.html">Tabel ongkir EMS</a>.</li>
|
|
|
74 <li>Perhitungan:
|
|
|
75 <ul>
|
|
|
76 <li>Bank: <code>jumlah × 1.07 × nilai_tukar</code>, dibulatkan ke seribuan terdekat.</li>
|
|
|
77 <li>PayPal: <code>jumlah × 1.05</code>, dibulatkan ke satuan terdekat.</li>
|
|
|
78 </ul>
|
|
|
79 </li>
|
|
|
80 <li>Jangan lupa memastikan jumlah setelah pajak dan ongkir (lokal).</li>
|
|
|
81 <li>Data nilai tukar didapat dari layanan <a href="http://fixer.io/">Fixer.io</a>.</li>
|
|
|
82 </ul>
|
|
|
83 </div>
|
|
|
84
|
|
2
|
85 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
|
0
|
86 <script>
|
|
|
87 // best javascript ahead. Proceed with care.
|
|
|
88 var
|
|
|
89 displayResult = function(x, rate) {
|
|
|
90 $("#rate-text").text(rate.toLocaleString())
|
|
|
91 $("#result-bank").text((Math.round(x * 1.07 * rate / 1000) * 1000).toLocaleString())
|
|
|
92 $("#result-paypal").text((Math.round(x * 1.05)).toLocaleString())
|
|
|
93 $("#ok").show()
|
|
|
94 },
|
|
|
95 loading = $("#loading"),
|
|
|
96 doButton = $("button[type=submit]"),
|
|
|
97 clearButton = $("button[type=reset]"),
|
|
|
98 unlock = function() {
|
|
|
99 loading.hide()
|
|
|
100 doButton.attr("disabled", false)
|
|
|
101 },
|
|
|
102 lock = function() {
|
|
|
103 loading.show()
|
|
|
104 doButton.attr("disabled", true)
|
|
|
105 },
|
|
|
106 xForm = $("#x"),
|
|
|
107 action = function(e) {
|
|
|
108 e.preventDefault()
|
|
|
109 $(".js").hide()
|
|
|
110 var x = parseFloat(xForm.val())
|
|
|
111 if (x === NaN || x === undefined) { return false; }
|
|
|
112
|
|
|
113 if (window.rate === undefined) {
|
|
|
114 lock()
|
|
|
115 $.getJSON("https://api.fixer.io/latest", { base: "JPY", symbols: "IDR" })
|
|
|
116 .done(function(data) {
|
|
|
117 window.rate = data.rates["IDR"]
|
|
|
118 displayResult(x, window.rate)
|
|
|
119 })
|
|
|
120 .fail(function() {
|
|
|
121 $("#error").show()
|
|
|
122 })
|
|
|
123 .always(function() {
|
|
|
124 unlock()
|
|
|
125 })
|
|
|
126 } else {
|
|
|
127 displayResult(x, window.rate)
|
|
|
128 }
|
|
|
129 }
|
|
|
130 clearButton.click(function(e) { xForm.focus() })
|
|
|
131 doButton.click(action)
|
|
|
132 $("form").submit(action)
|
|
|
133 </script>
|
|
|
134 </body>
|
