Advertisement
vencinachev

JsCalc

Dec 13th, 2020
819
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Web tech</title>
  5.         <script>
  6.             function calculate(){
  7.                 var operation = document.getElementById("op").value;
  8.                 if (operation == "empty"){
  9.                     alert("Please select operation!");
  10.                 } else {
  11.                     calc(operation);
  12.                 }
  13.             }
  14.             function calc(operation){
  15.                 var num1 = parseFloat(document.getElementById("num1").value);
  16.                 var num2 = parseFloat(document.getElementById("num2").value);
  17.                 var result = 0;
  18.                 switch (operation){
  19.                     case '+': result = num1 + num2; break;
  20.                     case '-': result = num1 - num2; break;
  21.                     case '*': result = num1 * num2; break;
  22.                     case '/': result = num1 / num2; break;
  23.                 }
  24.                 document.getElementById("result").innerHTML = "Result: " + result;
  25.             }
  26.             function reset(){
  27.                 document.getElementById("num1").value = "";
  28.                 document.getElementById("num2").value = "";
  29.                 document.getElementById("result").innerHTML = "Result: ";
  30.                 document.getElementById("op").value = "empty";
  31.             }
  32.         </script>
  33.     </head>
  34.     <body>
  35.         <h3>Simple Javascript calculator</h3>
  36.         Number 1: <input type="text" id="num1"> <br>
  37.         Number 2: <input type="text" id="num2"> <br>
  38.         Operation:
  39.             <select id="op">
  40.                 <option value="empty"></option>
  41.                 <option value="+">+</option>
  42.                 <option value="-">-</option>
  43.                 <option value="*">*</option>
  44.                 <option value="/">/</option>
  45.             </select>
  46.         </br>
  47.         <button class="btn" onclick="calculate()">CALCULATE</button>
  48.         <button class="btn" onclick="reset()">CLEAR</button>
  49.         <br>
  50.         <p id="result"> Result: </p>
  51.     </body>
  52. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement