tip.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tip Calculator</title>
  <style>
    body {
      background-color: #001f4f;
      font-family: "Raleway", sans-serif;
      background-image: url(https://www.allinonecalculator.com/images/home/background.jpg);
    }

    .container {
      width: 350px;
      height: 500px;
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      border-radius: 20px;
    }

    h1 {
      position: absolute;
      left: 50%;
      top: -60px;
      width: 300px;
      transform: translateX(-50%);
      background-color: #ff851b;
      color: #fff;
      font-weight: 100;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      font-size: 18px;
      text-align: center;
      padding: 10px;
    }

    .wrapper {
      padding: 20px;
    }

    input,
    select {
      width: 80%;
      border: none;
      border-bottom: 1px solid #0074d9;
      padding: 10px;
    }

    input:focus,
    select:focus {
      border: 1px solid #0074d9;
      outline: none;
    }

    select {
      width: 88% !important;
    }

    button {
      margin: 20px auto;
      width: 150px;
      height: 50px;
      background-color: #39cccc;
      color: #fff;
      font-size: 16px;
      border: none;
      border-radius: 5px;
    }

    .tip {
      text-align: center;
      font-size: 18px;
      display: none;
    }

    /* CSS for button */

    #home {
      color: #FCE22A;
      text-decoration: none;
      font-size: 20px;
    }

    .button-36 {
      background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
      border-radius: 8px;
      border-style: none;
      box-sizing: border-box;
      color: #FFFFFF;
      cursor: pointer;
      flex-shrink: 0;
      font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      font-size: 16px;
      font-weight: 500;
      height: 4rem;
      padding: 0 1.6rem;
      text-align: center;
      text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
      transition: all .5s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      width: 270px;
      height: 50px;
      margin-top: 780px;
      margin-left: 43.5%;
      transition: all;
      transition-duration: 1s;
    }

    .button-36:hover {
      box-shadow: rgba(0, 0, 0, 3) 0 1px 30px;
      transition-duration: .1s;
    }

    @media (min-width: 768px) {
      .button-36 {
        padding: 0 2.6rem;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>TIP CALCULATOR</h1>
    <div class="wrapper">
      <p>Bill Amount</p>

      <input type="text" id="amount" placeholder="Amount to be paid" /> ₹

      <p>How was the service ?</p>

      <select id="services">
        <option selected disabled hidden>Select</option>
        <option value="0.25">25% - Top Notch</option>
        <option value="0.20">20% - Excellent</option>
        <option value="0.15">15% - Good</option>
        <option value="0.10">10% - Bad</option>
        <option value="0.05">5% - Worst</option>
      </select>

      <p>Total number of persons</p>

      <input type="text" id="persons" placeholder="Number of people sharing the bill" />
      <button id="calculate">Calculate</button>
    </div>

    <div class="tip">
      <p>Tip Amount</p>

      <span id="total">0</span>₹
      <span id="each">each</span>
    </div>
  </div>

  <div>
    <strong><button type="button" class="button-36"><a id="home" href="./index.html" rel="noopener noreferrer">Back to
          homepage</a></button></strong>
  </div>

  <script>
    //the function called when Calculate button is clicked.
    window.onload = () => {
      /*calling a function calculateTip which
      will calculate the tip for the bill.*/
      document.querySelector("#calculate").onclick = calculateTip;
    };

    function calculateTip() {
      /*assign values of ID : amount, person and
    service to variables for further calculations.*/
      let amount = document.querySelector("#amount").value;
      let persons = document.querySelector("#persons").value;
      let service = document.querySelector("#services").value;

      console.log(service);
      /*if statement will work when user
    presses calculate without entering values. */
      //so will display an alert box and return.
      if (amount === "" && service === "Select") {
        alert("Please enter valid values");
        return;
      }

      //now we are checking number of persons
      if (persons === "1")
        //if there is only one person then we need not to display each.
        document.querySelector("#each").style.display = "none";
      //if there are more than one person we will display each.
      else document.querySelector("#each").style.display = "block";

      /*calculating the tip by multiplying total-bill and type of service;
then dividing it by number of persons.*/
      //fixing the total amount upto 2 digits of decimal
      let total = (amount * service) / persons;
      total = total.toFixed(2);

      //finally displaying the tip value
      document.querySelector(".tip").style.display = "block";
      document.querySelector("#total").innerHTML = total;
    }
  </script>
</body>

</html>