1. Overview

Challenge & starter files: Advent of JS

Full codes: nilstarbb/advent-of-js/7-tip-calculator

Live Demo: 07 - Tip Calculator || Advent of JavaScript

Preview:

tip-calculator.gif

2. Details

Users should be able to:

  • calculate tip based on tip percentage, bill amount, and number of people

3. Coding

This is also an easy one.

const calculateAmount = () => {
  const tipPer =
    document.querySelector('input[name="tip"]:checked').value.slice(0, -1) *
    0.01;
  const bill = document
    .getElementById("bill-amount")
    .value.replace(/[^0-9\.]/g, "");
  const numPeople = document
    .getElementById("number-of-people")
    .value.replace(/[^0-9\.]/g, "");

  const tipAmount = (tipPer * bill).toFixed(2);
  const totalPer = (((1 + tipPer) * bill) / numPeople).toFixed(2);

  document.getElementById("tip-amount").innerHTML = tipAmount;
  document.getElementById("total-per-person").innerHTML = totalPer;
};

const btn = document.getElementById("calculate");
btn.onclick = calculateAmount;

Some improvements we can do:

  • Validate inputs so only numbers with one decimal point can be enter.
  • Remove the button, let the results update synchronously.