Simple calculator code in javascript

 Simple calculator code in javascript


Here is a simple calculator code in JavaScript that allows you to perform basic arithmetic operations:


calculator code in javascript HTML

First Steps:  Create an Input form for the End User in HTML 

Image of Create an Input form for the End User in HTML
Image of Create an Input form for the End User in HTML 




Second Steps:  Write Javascript <script> ...</script> functionality for an Input form for Calculator Which we create in the First Steps 


Image of Second Steps:  Write Javascript <script> ...</script> functionality for an Input form for Calculator Which we create in the First Steps
Image of Second Steps:  Write Javascript <script> ...</script> functionality
 for an Input form for Calculator Which we create in the First Steps 




This code creates a simple calculator with four buttons for performing addition, subtraction, multiplication, and division. There are also two input fields for entering the numbers to be calculated and a third input field for displaying the result. When you click one of the buttons, the corresponding operation is performed on the two input numbers and the result is displayed in the result field.


Source code for First Step:  Create an Input form for the End User in HTML 


<!DOCTYPE html>

<html>

<body>


<h2>JavaScript Calculator</h2>


<form>

  <input type="text" id="input1" value="0">

  <br><br>

  <input type="text" id="input2" value="0">

  <br><br>

  <button type="button" onclick="add()">+</button>

  <button type="button" onclick="subtract()">-</button>

  <button type="button" onclick="multiply()">*</button>

  <button type="button" onclick="divide()">/</button>

  <br><br>

  <input type="text" id="result" value="0">

</form> 



Source code for Second Step:  Write Javascript <script> ...</script> functionality for an Input form for Calculator Which we create in the First Steps 


<script>

  function add() {

    var num1 = document.getElementById("input1").value;

    var num2 = document.getElementById("input2").value;

    var result = parseInt(num1) + parseInt(num2);

    document.getElementById("result").value = result;

  }


  function subtract() {

    var num1 = document.getElementById("input1").value;

    var num2 = document.getElementById("input2").value;

    var result = parseInt(num1) - parseInt(num2);

    document.getElementById("result").value = result;

  }


  function multiply() {

    var num1 = document.getElementById("input1").value;

    var num2 = document.getElementById("input2").value;

    var result = parseInt(num1) * parseInt(num2);

    document.getElementById("result").value = result;

  }


  function divide() {

    var num1 = document.getElementById("input1").value;

    var num2 = document.getElementById("input2").value;

    var result = parseInt(num1) / parseInt(num2);

    document.getElementById("result").value = result;

  }

</script>


</body>

</html>



First Steps + Second Steps Source Code 

<!DOCTYPE html>

<html>

<body>


<h2>JavaScript Calculator</h2>


<form>

  <input type="text" id="input1" value="0">

  <br><br>

  <input type="text" id="input2" value="0">

  <br><br>

  <button type="button" onclick="add()">+</button>

  <button type="button" onclick="subtract()">-</button>

  <button type="button" onclick="multiply()">*</button>

  <button type="button" onclick="divide()">/</button>

  <br><br>

  <input type="text" id="result" value="0">

</form> 


<script>

  function add() {

    var num1 = document.getElementById("input1").value;

    var num2 = document.getElementById("input2").value;

    var result = parseInt(num1) + parseInt(num2);

    document.getElementById("result").value = result;

  }


  function subtract() {

    var num1 = document.getElementById("input1").value;

    var num2 = document.getElementById("input2").value;

    var result = parseInt(num1) - parseInt(num2);

    document.getElementById("result").value = result;

  }


  function multiply() {

    var num1 = document.getElementById("input1").value;

    var num2 = document.getElementById("input2").value;

    var result = parseInt(num1) * parseInt(num2);

    document.getElementById("result").value = result;

  }


  function divide() {

    var num1 = document.getElementById("input1").value;

    var num2 = document.getElementById("input2").value;

    var result = parseInt(num1) / parseInt(num2);

    document.getElementById("result").value = result;

  }

</script>


</body>

</html>


Post a Comment

Previous Post Next Post