|
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
|
|
|
84 <pre id="n"><code>
|
|
|
85 location = /calc {
|
|
|
86 root /home/edho/public_html;
|
|
|
87 try_files /calc.html =404;
|
|
|
88 }
|
|
|
89 location = /calc/get {
|
|
|
90 return 302 http://www.wolframalpha.com/input/?i=ceil%28%28$arg_x+*+1.07+jpy+in+idr%29%2F1000%29*1000;
|
|
|
91 }
|
|
|
92 </code></pre>
|
|
|
93 </div>
|
|
|
94
|
|
|
95 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
|
|
96 <script>
|
|
|
97 // best javascript ahead. Proceed with care.
|
|
|
98 var
|
|
|
99 displayResult = function(x, rate) {
|
|
|
100 $("#rate-text").text(rate.toLocaleString())
|
|
|
101 $("#result-bank").text((Math.round(x * 1.07 * rate / 1000) * 1000).toLocaleString())
|
|
|
102 $("#result-paypal").text((Math.round(x * 1.05)).toLocaleString())
|
|
|
103 $("#ok").show()
|
|
|
104 },
|
|
|
105 loading = $("#loading"),
|
|
|
106 doButton = $("button[type=submit]"),
|
|
|
107 clearButton = $("button[type=reset]"),
|
|
|
108 unlock = function() {
|
|
|
109 loading.hide()
|
|
|
110 doButton.attr("disabled", false)
|
|
|
111 },
|
|
|
112 lock = function() {
|
|
|
113 loading.show()
|
|
|
114 doButton.attr("disabled", true)
|
|
|
115 },
|
|
|
116 xForm = $("#x"),
|
|
|
117 action = function(e) {
|
|
|
118 e.preventDefault()
|
|
|
119 $(".js").hide()
|
|
|
120 var x = parseFloat(xForm.val())
|
|
|
121 if (x === NaN || x === undefined) { return false; }
|
|
|
122
|
|
|
123 if (window.rate === undefined) {
|
|
|
124 lock()
|
|
|
125 $.getJSON("https://api.fixer.io/latest", { base: "JPY", symbols: "IDR" })
|
|
|
126 .done(function(data) {
|
|
|
127 window.rate = data.rates["IDR"]
|
|
|
128 displayResult(x, window.rate)
|
|
|
129 })
|
|
|
130 .fail(function() {
|
|
|
131 $("#error").show()
|
|
|
132 })
|
|
|
133 .always(function() {
|
|
|
134 unlock()
|
|
|
135 })
|
|
|
136 } else {
|
|
|
137 displayResult(x, window.rate)
|
|
|
138 }
|
|
|
139 }
|
|
|
140 clearButton.click(function(e) { xForm.focus() })
|
|
|
141 doButton.click(action)
|
|
|
142 $("form").submit(action)
|
|
|
143 </script>
|
|
|
144 </body>
|
