Mercurial > titip
comparison index.html @ 0:3c9ac4a429a5
Initial import.
author | nanaya <me@myconan.net> |
---|---|
date | Thu, 11 Jun 2015 16:43:21 +0900 |
parents | |
children | b48d5c9c2ce8 |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:3c9ac4a429a5 |
---|---|
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> |