Tip Calculator in javascript

Update: revised code.

I work at a Starbucks and one of the things that screams at me week after week for automation is the tedious calculation of the tip distribution. So here is my attempt to provide a simple tool for this. (Previous attempt required special software and special instruction to explain how it works.)

It has fields for inputting the number of hours for each partner and the amount of money to be dispersed. Clicking "calculate" produces the output with blank lines to help orient the output with the input rows.

As a javascript noob, I feel certain I've done some stupids in here I can learn from.





Tip Calculator



Tip Calculator
Hours:







Dividend:




 








What you could do first is to separate out the logic that does the calculation from the logic that handles the UI. This makes it easier to update the math. Also, this makes the logic portable, should you scrap the UI code for something else, like if you move to use a framework.

Also, break up the logic to small functions that accept a predictable input. For instance, calculating shares is simply multiplying your inputs by your dividend - an array of input values and a number.

// In goes an array of hours and the dividend, out comes an array of shares
function getShares(hours, dividend){
  const sum = hours.reduce((c, v) => c + v);
  const rate = dividend / sum;
  const shares = hours.map(hour => hour * rate);
  return shares;
}

I also notice this strange E function which is just short for document.getElementById. There is document.querySelector and document.querySelectorAll that allows you to use CSS selectors to get a reference of your elements. Also, I'd avoid IDs since IDs should only appear once on the page. You can't use it for multiple elements of the same kind, for instance your inputs. Use classes instead.

For this case, I would tolerate the innerHTML usage. Otherwise, construct elements using document.createElement. Now to create repeated HTML, you can use array.map and array.join with template literals.

function renderResults(results){
  return results.map(result => `
    ${result.hours} x ${result.dividend} = ${result.share}
  `).join('');
}

For your HTML, while there are cases where the quotes on attributes are optional, it's best you put them in for consistency.

StackExchange Code Review Q#162799, answer score: 6