Simple JavaScript tip calculator I've built a fairly simple tip calculator. What I have so far is a bunch of functions to calculate each tip amount and calling each with eventListener.

It works however trying to see if there's a better approach that would modularize the code. I'm thinking possibilities include passing functions as arguments or functions calling other functions but can't figure it out yet.

Here's the code:



var tenPerBtn = document.querySelector('.tenPercent');
var fifteenPerBtn = document.querySelector('.fifteenPercent');
var twentyPerBtn = document.querySelector('.twentyPercent');
var customPerBtn = document.querySelector('.customTipBtn');
var bill = document.getElementById('billInput');
var tipSuggestion = document.getElementById('tipAmount');


function calcTen() {
  var billInput = bill.value;
  var tipAmount = billInput * .1;
  tipSuggestion.innerHTML = 'A ten percent tip would equal $' + tipAmount;
}

function calcFifteen() {
  var billInput = bill.value;
  var tipAmount = billInput * .15;
  tipSuggestion.innerHTML = 'A fifteen percent tip would equal $' + tipAmount;
}

function calcTwenty() {
  var billInput = bill.value;
  var tipAmount = billInput * .2;
  tipSuggestion.innerHTML = 'A twenty percent tip would equal $' + tipAmount;
}

function calcCustom() {
  var billInput = bill.value;
  var customTipAmount = document.querySelector('#customTip').value;
  var tipAmount = billInput * customTipAmount;
  tipSuggestion.innerHTML = 'A ' + customTipAmount + ' percent tip would equal $' + tipAmount;
}

tenPerBtn.addEventListener('click', calcTen)
fifteenPerBtn.addEventListener('click', calcFifteen)
twentyPerBtn.addEventListener('click', calcTwenty)
customPerBtn.addEventListener('click', calcCustom)
&lt;label&gt;Bill Amount: &lt;/label&gt;&lt;input type="text" id="billInput"&gt;

&lt;br&gt;&lt;br&gt;

&lt;button class="tenPercent"&gt;Tip 10%&lt;/button&gt;
&lt;br&gt;
&lt;button class="fifteenPercent"&gt;Tip 15%&lt;/button&gt;
&lt;br&gt;
&lt;button class="twentyPercent"&gt;Tip 20%&lt;/button&gt;
&lt;br&gt;&lt;br&gt;
&lt;label&gt;Custom Tip Percentage: &lt;/label&gt;&lt;input type="text" id="customTip"&gt; &lt;button class="customTipBtn"&gt;Tip Custom Amount&lt;/button&gt;

&lt;br&gt;&lt;br&gt;

&lt;p id="tipAmount"&gt;&lt;/p&gt;
Eliminate code duplication by using function parameters (numbers in function name is usually a bad smell )
Separate calculating/processing data and DOM manipulations


My suggested solution:

function calcTip(bill, percent) {
    return bill * percent / 100;
}

function getMessage(tip, percent) {
    return 'A ' + percent + ' percent tip would equal $' + tip;
}

function updateFunc(billInput, tipSuggestion) {
    // Here I use closure to save billInput and tipSuggestion
    return function(percent) {
        var bill = parseFloat(billInput.value) || 0;
        tipSuggestion.innerHTML = getMessage(calcTip(bill, percent), percent);
    }
}

var tenPerBtn = document.querySelector('.tenPercent');
var fifteenPerBtn = document.querySelector('.fifteenPercent');
var twentyPerBtn = document.querySelector('.twentyPercent');
var customPerBtn = document.querySelector('.customTipBtn');
var bill = document.getElementById('billInput');
var tipSuggestion = document.getElementById('tipAmount');

var update = updateFunc(bill, tipSuggestion);

tenPerBtn.addEventListener('click', function() { update(10); });
fifteenPerBtn.addEventListener('click', function() { update(15); });
twentyPerBtn.addEventListener('click', function() { update(20); });
customPerBtn.addEventListener('click', function() { update(document.querySelector('#customTip').value); });