Guest User

Untitled

a guest
Feb 6th, 2015
246
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Cambodian change calculator</title>
  5. <style>
  6. html {
  7. display: table;
  8. margin: auto;
  9. }
  10. body {
  11. font-family: verdana;
  12. display: table-cell;
  13. vertical-align: middle;
  14. }
  15. input[type=number] {
  16. font-size: 1.1em;
  17. }
  18. fieldset {
  19. line-height: 32px;
  20. margin-bottom: 12px;
  21. border: 1px solid gray;
  22. border-radius: 10px;
  23. }
  24. fieldset legend{
  25. color: navy;
  26. font-weight: bold;
  27. font-size: 1.2em;
  28. }
  29. fieldset label {
  30. display: inline-block;
  31. width: 70px;
  32. }
  33. h1.title {
  34. color: navy;
  35. text-align: center;
  36. font-variant: small-caps;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <h1 class="title">Cambodian Change Calculator</h1>
  42. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  43.  
  44. <fieldset id="price">
  45. <legend>Price</legend>
  46. <div class="dollars-cents">
  47. <span class="dollars">
  48. <label>Dollars</label>
  49. <input type="number" value="0" />
  50. </span>
  51. <span class="cents">
  52. <label>
  53. Cents
  54. </label>
  55. <input type="number" value="0" />
  56. </span>
  57. </div>
  58. <div class="dollars-riels">
  59. <span class="dollars">
  60. <label>Dollars</label>
  61. <input type="number" value="0" />
  62. </span>
  63. <span class="riels">
  64. <label>Riels</label>
  65. <input type="number" value="0" />
  66. </span>
  67. </div>
  68. <div class="riels-only">
  69. <span class="riels">
  70. <label>Riels</label>
  71. <input type="number" value="0" />
  72. </span>
  73. </div>
  74. </fieldset>
  75.  
  76. <fieldset id="paid">
  77. <legend>Paid</legend>
  78. <div class="dollars-cents">
  79. <span class="dollars">
  80. <label>Dollars</label>
  81. <input type="number" value="0" />
  82. </span>
  83. <span class="cents">
  84. <label>Cents</label>
  85. <input type="number" value="0" />
  86. </span>
  87. </div>
  88. <div class="dollars-riels">
  89. <span class="dollars">
  90. <label>Dollars</label>
  91. <input type="number" value="0" />
  92. </span>
  93. <span class="riels">
  94. <label>Riels</label>
  95. <input type="number" value="0" />
  96. </span>
  97. </div>
  98. <div class="riels-only">
  99. <span class="riels">
  100. <label>Riels</label>
  101. <input type="number" value="0" />
  102. </span>
  103. </div>
  104. </fieldset>
  105.  
  106. <fieldset id="change">
  107. <legend>Change</legend>
  108. <div class="dollars-cents">
  109. <span class="dollars">
  110. <label>Dollars</label>
  111. <input type="number" value="0" readonly="readonly" />
  112. </span>
  113. <span class="cents">
  114. <label>Cents</label>
  115. <input type="number" value="0" readonly="readonly" />
  116. </span>
  117. </div>
  118. <div class="dollars-riels">
  119. <span class="dollars">
  120. <label>Dollars</label>
  121. <input type="number" value="0" readonly="readonly" />
  122. </span>
  123. <span class="riels">
  124. <label>Riels</label>
  125. <input type="number" value="0" readonly="readonly" />
  126. </span>
  127. </div>
  128. <div class="riels-only">
  129. <span class="riels">
  130. <label>Riels</label>
  131. <input type="number" value="0" readonly="readonly" />
  132. </span>
  133. </div>
  134. </fieldset>
  135.  
  136. <script>
  137. $( "input" ).change(function(eo) {
  138. var inp = $(this);
  139. var val = inp[0].value;
  140.  
  141. var field = inp.parent();
  142. var fieldName = field[0].className;
  143.  
  144. var mode = field.parent();
  145. var modeName = mode[0].className;
  146.  
  147. var row = mode.parent();
  148. var rowName = row[0].id;
  149.  
  150. doStuff(rowName, modeName, fieldName);
  151. });
  152.  
  153. function doStuff(row, mode, field) {
  154. // update the other modes in the same row
  155. var inRiels = -1;
  156.  
  157. switch (mode) {
  158. case 'dollars-cents':
  159. var rm = $('#' + row + ' .' + mode);
  160. var f = rm.find('.dollars, .cents').map(function(i, e) {
  161. return parseInt($(e).find('input')[0].value);
  162. }).toArray();
  163.  
  164. inRiels = (f[0] * 100 + f[1]) * 40;
  165.  
  166. updateModes(row, mode, inRiels);
  167. break;
  168.  
  169. case 'dollars-riels':
  170. var rm = $('#' + row + ' .' + mode);
  171. var f = rm.find('.dollars, .riels').map(function(i, e) {
  172. return parseInt($(e).find('input')[0].value);
  173. }).toArray();
  174.  
  175. inRiels = f[0] * 4000 + f[1];
  176.  
  177. updateModes(row, mode, inRiels);
  178. break;
  179.  
  180. case 'riels-only':
  181. var rm = $('#' + row + ' .' + mode);
  182. var f = rm.find('.riels').map(function(i, e) {
  183. return parseInt($(e).find('input')[0].value);
  184. }).toArray();
  185.  
  186. inRiels = f[0];
  187.  
  188. updateModes(row, mode, inRiels);
  189. break;
  190.  
  191. default:
  192. // BANG!
  193. }
  194.  
  195. switch (row) {
  196. case 'price':
  197. var rm = $('#paid .riels-only');
  198. var p = rm.find('.riels input')[0].value;
  199.  
  200. updateModes('change', '', p - inRiels);
  201. break;
  202.  
  203. case 'paid':
  204. var rm = $('#price .riels-only');
  205. var p = rm.find('.riels input')[0].value;
  206.  
  207. updateModes('change', '', inRiels - p);
  208. break;
  209.  
  210. default:
  211. // BANG!
  212. }
  213. }
  214.  
  215. function updateModes(row, fromMode, inRiels) {
  216. if ('dollars-cents' !== fromMode)
  217. updateDollarsCents(row, inRiels);
  218.  
  219. if ('dollars-riels' !== fromMode)
  220. updateDollarsRiels(row, inRiels);
  221.  
  222. if ('riels-only' !== fromMode)
  223. updateRielsOnly(row, inRiels);
  224. }
  225.  
  226. function updateDollarsCents(row, inRiels) {
  227. var dollars = parseInt(inRiels / 4000);
  228. var riels = inRiels - dollars * 4000;
  229. var cents = riels / 40;
  230.  
  231. var $m = $('#' + row + ' .dollars-cents');
  232. $m.find('.dollars input')[0].value = dollars;
  233. $m.find('.cents input')[0].value = cents;
  234. }
  235.  
  236. function updateDollarsRiels(row, inRiels) {
  237. var dollars = parseInt(inRiels / 4000);
  238. var riels = inRiels - dollars * 4000;
  239.  
  240. var $m = $('#' + row + ' .dollars-riels');
  241.  
  242. $m.find('.dollars input')[0].value = dollars;
  243. $m.find('.riels input')[0].value = riels;
  244. }
  245.  
  246. function updateRielsOnly(row, inRiels) {
  247. var $m = $('#' + row + ' .riels-only');
  248.  
  249. $m.find('.riels input')[0].value = inRiels;
  250. }
  251. </script>
  252.  
  253. </body>
  254. </html>
RAW Paste Data