Mercurial > titip

comparison index.html @ 0:3c9ac4a429a5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 &times; 1.07 &times; nilai_tukar</code>, dibulatkan ke seribuan terdekat.</li>
77 <li>PayPal: <code>jumlah &times; 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>