# Web page that calculates results of four arithmetic operations for two numbers

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 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">
<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>

One obvious simple change is to avoid making unnecessary variable assignments. For example, just write

const a = Number(document.getElementById("first-number").value);


const firstInput = document.getElementById("first-number").value;
…
var firstNumb = Number(firstInput);


You should also be more consistent with naming (e.g. addTwoN vs. multiplNumb). myFunction needs a better name; I suggest onInputUpdated.

The code could be simplified by treating each of the four operations as data. Then, you apply the same transformation on each element of the operations list.

const operations = [
{symbol: '+', callback: function(a, b) { return a + b }},
{symbol: '-', callback: function(a, b) { return a - b }},
{symbol: '*', callback: function(a, b) { return a * b }},
{symbol: '/', callback: function(a, b) { return a / b }},
];

function onInputUpdated() {
const a = Number(document.getElementById("first-number").value);
const b = Number(document.getElementById("second-number").value);
const result = operations.map(function(op) {
return a + " " + op.symbol + " " + b + " = " + op.callback(a, b);
}).join('<br>');
document.getElementById("result").innerHTML = result;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
</body>