src/CalculatorView.vue

   1 <!--
   2 ***********************************************************************
   3  * Title: PDosage
   4  * Description: Pediatric Dose Calculator
   5  * Author: Agnibho Mondal
   6  * Website: http://code.agnibho.com
   7  **********************************************************************
   8    Copyright (c) 2016 Agnibho Mondal
   9    All rights reserved
  10  **********************************************************************
  11    This file is part of PDosage.
  12
  13    PDosage is free software: you can redistribute it and/or modify
  14    it under the terms of the GNU General Public License as published by
  15    the Free Software Foundation, either version 3 of the License, or
  16    (at your option) any later version.
  17
  18    PDosage is distributed in the hope that it will be useful,
  19    but WITHOUT ANY WARRANTY; without even the implied warranty of
  20    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  21    GNU General Public License for more details.
  22
  23    You should have received a copy of the GNU General Public License
  24    along with PDosage. If not, see <http://www.gnu.org/licenses/>.
  25 ***********************************************************************
  26 -->
  27 <template>
  28     <div class="panel panel-default">
  29         <div class="panel-body">
  30             <div class="col-md-6 col-md-offset-3 well">
  31                 <form>
  32                     <div class="form-group"><input type="text" class="form-control text-right" id="calc-input"></div>
  33                     <div class="form-group"><input type="text" class="form-control text-right" id="calc-output" disabled></div>
  34                     <div class="form-group row">
  35                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-ac">AC</button></div>
  36                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-ce">CE</button></div>
  37                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">(</button></div>
  38                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">)</button></div>
  39                     </div>
  40                     <div class="form-group row">
  41                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">7</button></div>
  42                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">8</button></div>
  43                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">9</button></div>
  44                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">/</button></div>
  45                     </div>
  46                     <div class="form-group row">
  47                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">4</button></div>
  48                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">5</button></div>
  49                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">6</button></div>
  50                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">*</button></div>
  51                     </div>
  52                     <div class="form-group row">
  53                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">1</button></div>
  54                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">2</button></div>
  55                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">3</button></div>
  56                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">-</button></div>
  57                     </div>
  58                     <div class="form-group row">
  59                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">0</button></div>
  60                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">.</button></div>
  61                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-eq">=</button></div>
  62                         <div class="col-xs-3"><button type="button" class="btn btn-default btn-block calc-key">+</button></div>
  63                     </div>
  64                 </form>
  65             </div>
  66         </div>
  67     </div>
  68 </template>
  69
  70 <script>
  71  $(document).ready(function(){
  72      $(".calc-key").click(function(){
  73          $("#calc-input").val($("#calc-input").val()+$(this).text());
  74      });
  75      $(".calc-ac").click(function(){
  76          $("#calc-input").val("");
  77          $("#calc-output").val("");
  78      });
  79      $(".calc-ce").click(function(){
  80          $("#calc-input").val($("#calc-input").val().slice(0,-1));
  81      });
  82      $(".calc-eq").click(calculate);
  83      $("#calc-input").change(calculate);
  84  });
  85  function calculate(){
  86      try{
  87          var result=parseFloat(eval($("#calc-input").val()));
  88          if(isNaN(result)){
  89              throw("Error");
  90          }
  91          else{
  92              $("#calc-output").val(result);
  93          }
  94      }
  95      catch(e){
  96          $("#calc-output").val("Error");
  97      }
  98  }
  99  export default {
 100      name: "CalculatorView"
 101  }
 102 </script>