API tools faq
paste
Clamas92

Calculator

Clamas92
Apr 22nd, 2013
49
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Simple Calculator</title>
  6.  
  7. <style type="text/css">
  8. <!--
  9. #container {
  10.     font-family: Verdana, Geneva, sans-serif;
  11.     font-size: 100%;
  12.     width: 570px;
  13.     margin: 0 auto;
  14. }
  15. #msg {
  16.     width:90%;
  17.     color:#036;
  18.     font-weight:bold;
  19.     margin-left:20px;
  20. }
  21. body
  22. {
  23.     font-family:Verdana, Geneva, sans-serif;
  24.     font-size:100%;
  25.     background-color:#036;
  26. }
  27. form {
  28.     background-color:#FFF;
  29.     margin-top: 25px;
  30.     padding:10px;
  31.     width:95%;
  32.     border:2px solid red;
  33. }
  34. label {
  35.     display:block; /*forces the label to an entire line, allowing the textbox to fall below the label*/
  36.     font-weight:bold;
  37.     margin-left:10px;
  38.     font-size:80%;
  39. }
  40. input, p {
  41.     margin-left:10px;
  42. }
  43.  
  44. -->
  45. </style>
  46. <script language="javascript" type="text/javascript">
  47. function preCalc()
  48. {
  49.    
  50.     var valx = parseFloat(document.form1.valueone.value);
  51.     var valy = parseFloat(document.form1.valuetwo.value);
  52.     var radGp = document.form1.operation;
  53.     var radioLength = radGp.length;
  54.     var chkValue;
  55.     var answer;
  56.    
  57.     for(var i = 0; i < radioLength; i++) {
  58.         if(radGp[i].checked) {
  59.             chkValue = radGp[i].value;
  60.         }
  61.     }
  62.  
  63.     var msg = document.getElementById("msg");
  64.     if(isNaN(valx) && isNaN(valy))
  65.     {
  66.         msg.style.color = "red";
  67.         msg.innerHTML = "Values 1 and 2 must be numbers";
  68.     }
  69.     else
  70.     {
  71.         answer = calculate(valx, valy, chkValue);
  72.        
  73.         if(!isNaN(answer))
  74.         {
  75.             msg.style.color = "red";
  76.             msg.innerHTML = "Result: " + answer;
  77.         }
  78.         else
  79.         {
  80.             msg.style.color = "red";
  81.             msg.innerHTML = answer;
  82.         }
  83.     }
  84. }
  85. function calculate(x, y, op)
  86. {
  87.     var z;
  88.     switch (op)
  89.     {
  90.         case "add":
  91.             z= x+y;
  92.             break;
  93.         case "sub":
  94.             z=x-y;
  95.             break;
  96.         case "mul":
  97.             z=x*y;
  98.             break;
  99.         case "div":
  100.             z=x/y;
  101.             break;
  102.         case "mod":
  103.             z=x%y;
  104.             break;
  105.         default:
  106.             z="You did not select an operation";
  107.     }
  108.     return z;
  109. }
  110. </script>
  111. </head>
  112.  
  113. <body>
  114. <div id="container">
  115.   <form id="form1" name="form1" method="post" action="">
  116.     <p>
  117.       <label for="valueone">Value 1: </label>
  118.       <input type="text" name="valueone" id="valueone" />
  119.     </p>
  120.     <p>
  121.       <label for="valuetwo">Value 2: </label>
  122.       <input type="text" name="valuetwo" id="valuetwo" />
  123.     </p>
  124.     <p>
  125.       <label>
  126.         <input type="radio" name="operation" value="add" id="operation_0" />
  127.         Add (+)</label>
  128.       <br />
  129.       <label>
  130.         <input type="radio" name="operation" value="sub" id="operation_1" />
  131.         Subtract (-)</label>
  132.       <br />
  133.       <label>
  134.         <input type="radio" name="operation" value="mul" id="operation_2" />
  135.         Multiply (*)</label>
  136.       <br />
  137.       <label>
  138.         <input type="radio" name="operation" value="div" id="operation_3" />
  139.         Divide (/)</label>
  140.       <br />
  141.       <label>
  142.         <input type="radio" name="operation" value="mod" id="operation_4" />
  143.         Modulus (%)</label>
  144.       <br />
  145.       <input type="button" name="button" id="button" value="Calculate" onclick="preCalc()"/>
  146.       <input type="reset" name="clrForm" id="clrForm" value="Clear" />
  147.     </p><span id="msg">Results</span>
  148.   </form>
  149.  
  150. </div>
  151. </body>
  152. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!