4
\$\begingroup\$

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>

\$\endgroup\$

1 Answer 1

Reset to default
3
\$\begingroup\$

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

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

instead of

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">
<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=''); onInputUpdated()" 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=''); onInputUpdated()" id="second-number" min="0" style="width: 90px">
    </div>
</form>
<div class="ml-5" id="result"></div>
</body>

\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.