Guest User

Camobodian mixed dollar & riel change calculator

a guest
Feb 5th, 2015
281
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <title>Cambodian change calculator</title>
  6.   </head>
  7.   <body>
  8.     Cambodian change calculator
  9.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  10.     <hr>
  11.  
  12.     <label id="price">
  13.       Price
  14.       <div class="dollars-cents">
  15.         <span class="dollars">
  16.           <label>
  17.             Dollars
  18.             <input type="number" value="0"></input>
  19.           </label>
  20.         </span>
  21.         <span class="cents">
  22.           <label>
  23.             Cents
  24.             <input type="number" value="0"></input>
  25.           </label>
  26.         </span>
  27.       </div>
  28.       <div class="dollars-riels">
  29.         <span class="dollars">
  30.           <label>
  31.             Dollars
  32.             <input type="number" value="0"></input>
  33.           </label>
  34.         </span>
  35.         <span class="riels">
  36.           <label>
  37.             Riels
  38.             <input type="number" value="0"></input>
  39.           </label>
  40.         </span>
  41.       </div>
  42.       <div class="riels-only">
  43.         <span class="riels">
  44.           <label>
  45.             Riels
  46.             <input type="number" value="0"></input>
  47.           </label>
  48.         </span>
  49.       </div>
  50.     </label>
  51.  
  52.     <hr>
  53.  
  54.     <label id="paid">
  55.       Paid
  56.       <div class="dollars-cents">
  57.         <span class="dollars">
  58.           <label>
  59.             Dollars
  60.             <input type="number" value="0"></input>
  61.           </label>
  62.         </span>
  63.         <span class="cents">
  64.           <label>
  65.             Cents
  66.             <input type="number" value="0"></input>
  67.           </label>
  68.         </span>
  69.       </div>
  70.       <div class="dollars-riels">
  71.         <span class="dollars">
  72.           <label>
  73.             Dollars
  74.             <input type="number" value="0"></input>
  75.           </label>
  76.         </span>
  77.         <span class="riels">
  78.           <label>
  79.             Riels
  80.             <input type="number" value="0"></input>
  81.           </label>
  82.         </span>
  83.       </div>
  84.       <div class="riels-only">
  85.         <span class="riels">
  86.           <label>
  87.             Riels
  88.             <input type="number" value="0"></input>
  89.           </label>
  90.         </span>
  91.       </div>
  92.     </label>
  93.  
  94.     <hr>
  95.  
  96.     <label id="change">
  97.       Change
  98.       <div class="dollars-cents">
  99.         <span class="dollars">
  100.           <label>
  101.             Dollars
  102.             <input type="number" value="0" readonly="1"></input>
  103.           </label>
  104.         </span>
  105.         <span class="cents">
  106.           <label>
  107.             Cents
  108.             <input type="number" value="0" readonly="1"></input>
  109.           </label>
  110.         </span>
  111.       </div>
  112.       <div class="dollars-riels">
  113.         <span class="dollars">
  114.           <label>
  115.             Dollars
  116.             <input type="number" value="0" readonly="1"></input>
  117.           </label>
  118.         </span>
  119.         <span class="riels">
  120.           <label>
  121.             Riels
  122.             <input type="number" value="0" readonly="1"></input>
  123.           </label>
  124.         </span>
  125.       </div>
  126.       <div class="riels-only">
  127.         <span class="riels">
  128.           <label>
  129.             Riels
  130.             <input type="number" value="0" readonly="1"></input>
  131.           </label>
  132.         </span>
  133.       </div>
  134.     </label>
  135.  
  136.     <script>
  137.       $( "input" ).change(function(eo) {
  138.           var inp = $(this);
  139.           var val = inp[0].value;
  140.  
  141.           var field = inp.parent().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