This is the code that I have written for a simple mathematical application using javascript. In accordance with the task, I broke the program into functions that perform the computations. But I guess my code looks very large:
function addTwoN(a, b){
return (a + b);
}
function subtractNumb(a,b){
return (a - b);
}
function multiplNumb(a,b){
return (a * b);
}
function divisNumb(a,b){
return (a / b);
}
function myFunction(){
const firstInput = document.getElementById("first-number").value;
const secondInput = document.getElementById("second-number").value;
const result = document.getElementById("result");
var firstNumb = Number(firstInput);
var secondNumb = Number(secondInput);
var sum = addTwoN(firstNumb, secondNumb);
var sbtr = subtractNumb(firstNumb, secondNumb);
var multi = multiplNumb(firstNumb, secondNumb);
var divis = divisNumb(firstNumb, secondNumb);
var str =
firstNumb + " + " + secondNumb + " = " + sum + "<br>" +
firstNumb + " - " + secondNumb + " = " + sbtr + "<br>" +
firstNumb + " * " + secondNumb + " = " + multi + "<br>" +
firstNumb + " / " + secondNumb + " = " + divis;
result.innerHTML = str;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<body>
<form class="ml-5 mb-5 mt-5">
<div class="form-group">
<label>What is the first number?</label>
<input type="number" class="form-control" name="" id="first-number" oninput="validity.valid||(value=''); myFunction()" min="0" style="width: 90px">
</div>
<div class="form-group">
<label>What is the second number?</label>
<input type="number" class="form-control" name="" oninput="validity.valid||(value=''); myFunction()" id="second-number" min="0" style="width: 90px">
</div>
</form>
<div class="ml-5" id="result"></div>
</body>