|
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>
|
|
4
|
59
|
|
|
60 <li>
|
|
|
61 Bank transfer (alt):
|
|
|
62 <span id="result-bank-bni"></span> IDR
|
|
|
63 (<span id="rate-text-bni"></span> IDR/JPY)
|
|
|
64 </li>
|
|
|
65
|
|
0
|
66 <li>
|
|
|
67 PayPal:
|
|
|
68 <span id="result-paypal"></span> JPY
|
|
|
69 </li>
|
|
|
70 </ul>
|
|
|
71 </div>
|
|
|
72 <div class="js" id="error">
|
|
|
73 <p>Koneksi ke server nilai tukar bermasalah.</p>
|
|
|
74 </div>
|
|
|
75
|
|
|
76 <hr>
|
|
|
77 <ul>
|
|
|
78 <li>Ongkir, cukai, dll tidak termasuk.</li>
|
|
|
79 <li>Berhubung sudah punya timbangan, ongkir (estimasi) bisa dihitung sebelum dikirim.</li>
|
|
|
80 <li><a href="http://www.post.japanpost.jp/int/charge/list/ems1_en.html">Tabel ongkir EMS</a>.</li>
|
|
|
81 <li>Perhitungan:
|
|
|
82 <ul>
|
|
|
83 <li>Bank: <code>jumlah × 1.07 × nilai_tukar</code>, dibulatkan ke seribuan terdekat.</li>
|
|
4
|
84 <li>Bank (alt): <code>jumlah × 1.01 × nilai_tukar + 25000</code>, dibulatkan ke seribuan terdekat.</li>
|
|
0
|
85 <li>PayPal: <code>jumlah × 1.05</code>, dibulatkan ke satuan terdekat.</li>
|
|
|
86 </ul>
|
|
|
87 </li>
|
|
|
88 <li>Jangan lupa memastikan jumlah setelah pajak dan ongkir (lokal).</li>
|
|
|
89 <li>Data nilai tukar didapat dari layanan <a href="http://fixer.io/">Fixer.io</a>.</li>
|
|
|
90 </ul>
|
|
|
91 </div>
|
|
|
92
|
|
2
|
93 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
|
0
|
94 <script>
|
|
4
|
95 var input = function() { return parseFloat($xForm.val()); }
|
|
|
96
|
|
|
97 var $loading = $("#loading");
|
|
|
98 var $doButton = $("button[type=submit]");
|
|
|
99 var $xForm = $("#x");
|
|
|
100
|
|
|
101 var locks = {};
|
|
|
102 var lock = function(isLoading) {
|
|
|
103 if (!isLoading && locks.fixer === true && locks.bni === true) { return; }
|
|
|
104 $loading.toggle(isLoading);
|
|
|
105 $doButton.attr("disabled", isLoading);
|
|
|
106 };
|
|
|
107
|
|
|
108 var rates = {};
|
|
|
109
|
|
|
110 var displayResult = function() {
|
|
|
111 if (rates.fixer === undefined || rates.bni === undefined) { return; }
|
|
|
112 var x = input();
|
|
|
113
|
|
|
114 $("#rate-text").text(rates.fixer.toLocaleString());
|
|
|
115 $("#result-bank").text((Math.round(x * 1.07 * rates.fixer / 1000) * 1000).toLocaleString());
|
|
|
116
|
|
|
117 if (rates.bni !== 0) {
|
|
|
118 $("#rate-text-bni").text(rates.bni.toLocaleString());
|
|
|
119 $("#result-bank-bni").text((Math.ceil(x * 1.01 * rates.bni / 1000) * 1000 + 25000).toLocaleString());
|
|
|
120 } else {
|
|
|
121 $("#rate-text-bni").text('x');
|
|
|
122 $("#result-bank-bni").text('x');
|
|
|
123 };
|
|
|
124
|
|
|
125 $("#result-paypal").text((Math.round(x * 1.05)).toLocaleString());
|
|
|
126 $("#ok").show();
|
|
|
127 lock(false);
|
|
|
128 };
|
|
|
129
|
|
|
130 var action = function(e) {
|
|
|
131 e.preventDefault()
|
|
|
132 $(".js").hide()
|
|
|
133
|
|
|
134 var x = input();
|
|
|
135
|
|
|
136 if (x === NaN || x === undefined) { return false; };
|
|
0
|
137
|
|
4
|
138 if (rates.fixer === undefined) {
|
|
|
139 lock(true);
|
|
|
140 locks.fixer = true;
|
|
|
141
|
|
|
142 $.getJSON("https://api.fixer.io/latest", { base: "JPY", symbols: "IDR" })
|
|
|
143 .done(function(data) {
|
|
|
144 rates.fixer = parseFloat(data.rates["IDR"]);
|
|
|
145
|
|
|
146 displayResult();
|
|
|
147 })
|
|
|
148 .fail(function() {
|
|
|
149 $("#error").show();
|
|
|
150 })
|
|
|
151 .always(function() {
|
|
|
152 locks.fixer = false;
|
|
|
153 lock(false);
|
|
|
154 });
|
|
|
155 };
|
|
|
156
|
|
|
157 if (rates.bni === undefined) {
|
|
|
158 lock(true);
|
|
|
159 locks.bni = true;
|
|
|
160
|
|
|
161 $.get("bni-jpyidr.txt")
|
|
|
162 .done(function(data) {
|
|
|
163 if (data === "") {
|
|
|
164 rates.bni = 0;
|
|
|
165 } else {
|
|
|
166 rates.bni = parseFloat(data);
|
|
|
167 }
|
|
|
168
|
|
|
169 displayResult();
|
|
|
170 })
|
|
|
171 .fail(function() {
|
|
|
172 $("#error").show();
|
|
|
173 })
|
|
|
174 .always(function() {
|
|
|
175 locks.bni = false;
|
|
|
176 lock(false);
|
|
|
177 });
|
|
|
178 };
|
|
|
179
|
|
|
180 displayResult();
|
|
|
181 };
|
|
|
182
|
|
0
|
183 $("form").submit(action)
|
|
4
|
184 $("button[type=reset]").click(function(e) { xForm.focus(); });
|
|
0
|
185 </script>
|
|
|
186 </body>
|
