Tip Calculator

Project Description

Calculates the tip for a restaurant bill based on the level of service and the number of customers.

Setting up the base web page

Your first task is to set up the base web page.

1. In your portfolio/js folder, create a new sub-folder named tip-calculator.
2. Download the following file to this new portfolio/js/tip-calculator folder.   index.html
3. Give it the filename index.html.
4. Update the website logo, favicon, <title> tag and the <footer> with your own details.

This file contains all the necessary HTML and CSS for this project.

Adding the JavaScript code

At the bottom of your index.html web page, just before the closing </body> tag, add the following JavaScript code within a <script> tag.

//Hide the tip amount on load
document.getElementById("tipDisplayBox").style.display = "none";
document.getElementById("numOfPeople").value = 1;

//Calculate Tip
function calculateTip() {
   let billAmount = document.getElementById("billAmount").value;
   let serviceQuality = document.getElementById("serviceQuality").value;
   let numOfPeople = document.getElementById("numOfPeople").value;

   //validate input
    if (billAmount === "" || serviceQuality == 0) {
      alert("Please enter values");
      return;
   }

   // Calculate tip
   let tipTotal = (billAmount * serviceQuality);
   // round to two decimal places
   tipTotal = Math.round(tipTotal * 100) / 100;
   // next line allows us to always have two digits after decimal point
   tipTotal = tipTotal.toFixed(2);
   // Display the tip
   document.getElementById("tipDisplayBox").style.display = "block";
   document.getElementById("tipTotal").innerHTML = tipTotal;
   // Check to see if this input is empty or less than or equal to 1
   if (numOfPeople === "" || parseInt(numOfPeople) <= 1)  {
      numOfPeople = 1;
      document.getElementById("numOfPeople").value = 1;
      tipEach = tipTotal;
   } 
  document.getElementById("tipEach").innerHTML = (tipTotal / numOfPeople).toFixed(2);
}

//click to call function
document.getElementById("calculate").onclick = () => calculateTip();

Save your file and verify it works correctly.

Upload the tip-calculator folder as a sub-folder of the portfolio/js folder on your GitHub account.