Write a program to perform following operations on two numbers input by the user: 1) Addition 2) Subtraction 3) Multiplication 4) Division.

HTML CodeTry it

<!-- Write a program to perform following operations on two numbers input by the user:
1) Addition 
2) Subtraction 
3) Multiplication 
4) Division. -->

<body>
   <div class="body">
      <div><input type="number" id="num1" placeholder="Enter 1st number...." /></div>
      <div><input type="number" id="num2" placeholder="Enter 2nd number...." /></div>
      <div>
         <select id="op">
            <option value="add">Addition</option>
            <option value="sub">Subtraction</option>
            <option value="mul">Multiplication</option>
            <option value="div">Division</option>
         </select>
      </div>
      <div><input type="button" onclick="result()" value="Submit" /></div>
   </div>
   <p id="result"></p>
</body>

CSS CodeTry it

.body{
   padding: 15px;
}
input, select{
   padding: 10px;
   margin: 5px;
   width: 300px;
}
p{
   text-align: center;
   font-size: 30px;
   color: blue;
}

JavaScript CodeTry it

function result(){
   var a = Number(document.getElementById("num1").value);
   var b = Number(document.getElementById("num2").value);
   var op = document.getElementById("op").value;
   if(op == "add"){
      document.getElementById("result").innerHTML = "Result = " + (a+b);
   }
   else if(op == "sub"){
      document.getElementById("result").innerHTML = "Result = " + (a-b);
   }
   else if(op == "mul"){
      document.getElementById("result").innerHTML = "Result = " + (a*b);
   }
   else{
      document.getElementById("result").innerHTML = "Result = " + (a/b);
   }
}

OutputTry it

Try it