content logo

Bootstrap Forms:

Bootstrap Tip Calculator

If you are a fan of the history and culture of another country, this post may interest you. The Bootstrap Tip Calculator is presented in this post with a different design and appearance. If you are looking for a tip calculator page, the following Simple Bootstrap Form Code can be helpful for you. You can see a Chinese doll in the background of the Calculator Form Code that increases the beauty of your website. So, you can use this code not only to enjoy its functionality but also to change the design of your website. If you do so, more people will be attracted to your website and you can be successful in a shorter time.

As you see from the following preview, this Web Form with Image includes three sections with a gray border. In each field, you should answer a related question. For example, you should write the amount of your bill in the first field and the number of people in the second one. In the last section, you should choose your service. The tip calculator has a red color with larger font size. At the end of the JavaScript Tip Calculator, you can see the “calculate” option in a red field with white text.

#

Simple Bootstrap Form Code

#

Web Form with Image

#

Calculator Form Code

#

Javascript Tip Calculator


<!-- This script got from frontendfreecode.com -->
<main id="Container" class="card bg-light">
  <h1 class="display-3 text-danger fw-bold">Tip Calculator</h1>
  <div id="Calculator">
    <form>
      <div class="form-group">
        <label for="Bill" class="form-label fs-5 fw-light">How much was the bill?</label>
        <input type="number" id="Bill" placeholder="Bill amount" class="form-control" />
      </div>
      <div class="form-group">
        <label class="form-label fs-5 fw-light">How many people are sharing the bill?</label>
        <input type="number" id="People" placeholder="Number of people" class="form-control" />
      </div>
      <h4 class="display-6 fw-normal">How was your service?</h4>
      <div class="input-fields">
        <select id="ServiceQual" class="form-select">
          <option value="0" disabled selected>Choose your option</option>
          <option value="0.3">30% Outstanding</option>
          <option value="0.2">20% Great</option>
          <option value="0.15">15% Good</option>
          <option value="0.1">10% Okay</option>
          <option value="0.05">5% Bad</option>
        </select>
      </div>
      <button id="Calculate" class="btn btn-danger w-100" type="button">Calculate</button>
    </form>
  </div>
  <ul id="Result" class="list-group ">
    <li class="list-group-item list-group-item-warning ">Tip: <span id="Tip"></span></li>
    <li class="list-group-item list-group-item-warning ">Total bill with tip: <span id="totalBillTip"></span></li>
    <li class="list-group-item list-group-item-warning ">Tip/Person: <span id="TipPerson"></span></li>
    <li class="list-group-item list-group-item-warning ">Total bill with tip/Person: <span id="DivBillTipPerson"></span></li>
  </ul>
</main><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
*, ::before, ::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	background-image: url("http://frontendfreecode.com/img/photo-1611457194403-d3aca4cf9d11.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
}
.card {
	border-radius: 15px;
	max-width: 30rem;
	top: 5%;
	left: 5%;
	padding: 2rem;
}
.form-label {
	padding-top: 1rem;
}
h4 {
	padding: 1.8rem 0 0;
}
.btn {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
ul li span {
	font-weight: 600;
}
const bill = document.getElementById("Bill");
const numPeople = document.getElementById("People");
const result = document.getElementById("Result");
let serviceQual = document.getElementById("ServiceQual");
// console.log(bill, numPeople, result);
//No display of the bill
result.style.display = "none";
const calculator = document.getElementById("Calculate");
calculator.addEventListener("click", calculateTip);
//Calculate tip
function calculateTip() {
    if (bill.value === "" || serviceQual.value === 0) {
        alert("Please enter value");
        return;
    }
    if (numPeople.value === "" || numPeople.value <= 1) {
        numPeople.value = 1;
        result.style.display = "none";
    } else {
        result.style.display = "block";
    }
    let totalTip = bill.value * serviceQual.value;
    let divTip = totalTip / numPeople.value;
    let totalBill = totalTip + parseInt(bill.value);
    let divBillTipPerson = totalBill / numPeople.value;
    result.style.display = "block";
    document.getElementById("Tip").innerText = `$${totalTip.toFixed(2)}`;
    document.getElementById("totalBillTip").innerHTML = `$${totalBill.toFixed(
        2
    )}`;
    document.getElementById("TipPerson").innerHTML = `$${divTip.toFixed(2)}`;
    document.getElementById(
        "DivBillTipPerson"
    ).innerHTML = `$${divBillTipPerson.toFixed(2)}`;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<style>
*, ::before, ::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	background-image: url("http://frontendfreecode.com/img/photo-1611457194403-d3aca4cf9d11.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
}
.card {
	border-radius: 15px;
	max-width: 30rem;
	top: 5%;
	left: 5%;
	padding: 2rem;
}
.form-label {
	padding-top: 1rem;
}
h4 {
	padding: 1.8rem 0 0;
}
.btn {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
ul li span {
	font-weight: 600;
}
</style>

</head>
<body>
<main id="Container" class="card bg-light">
  <h1 class="display-3 text-danger fw-bold">Tip Calculator</h1>
  <div id="Calculator">
    <form>
      <div class="form-group">
        <label for="Bill" class="form-label fs-5 fw-light">How much was the bill?</label>
        <input type="number" id="Bill" placeholder="Bill amount" class="form-control" />
      </div>
      <div class="form-group">
        <label class="form-label fs-5 fw-light">How many people are sharing the bill?</label>
        <input type="number" id="People" placeholder="Number of people" class="form-control" />
      </div>
      <h4 class="display-6 fw-normal">How was your service?</h4>
      <div class="input-fields">
        <select id="ServiceQual" class="form-select">
          <option value="0" disabled selected>Choose your option</option>
          <option value="0.3">30% Outstanding</option>
          <option value="0.2">20% Great</option>
          <option value="0.15">15% Good</option>
          <option value="0.1">10% Okay</option>
          <option value="0.05">5% Bad</option>
        </select>
      </div>
      <button id="Calculate" class="btn btn-danger w-100" type="button">Calculate</button>
    </form>
  </div>
  <ul id="Result" class="list-group ">
    <li class="list-group-item list-group-item-warning ">Tip: <span id="Tip"></span></li>
    <li class="list-group-item list-group-item-warning ">Total bill with tip: <span id="totalBillTip"></span></li>
    <li class="list-group-item list-group-item-warning ">Tip/Person: <span id="TipPerson"></span></li>
    <li class="list-group-item list-group-item-warning ">Total bill with tip/Person: <span id="DivBillTipPerson"></span></li>
  </ul>
</main><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
const bill = document.getElementById("Bill");
const numPeople = document.getElementById("People");
const result = document.getElementById("Result");
let serviceQual = document.getElementById("ServiceQual");
// console.log(bill, numPeople, result);
//No display of the bill
result.style.display = "none";
const calculator = document.getElementById("Calculate");
calculator.addEventListener("click", calculateTip);
//Calculate tip
function calculateTip() {
    if (bill.value === "" || serviceQual.value === 0) {
        alert("Please enter value");
        return;
    }
    if (numPeople.value === "" || numPeople.value <= 1) {
        numPeople.value = 1;
        result.style.display = "none";
    } else {
        result.style.display = "block";
    }
    let totalTip = bill.value * serviceQual.value;
    let divTip = totalTip / numPeople.value;
    let totalBill = totalTip + parseInt(bill.value);
    let divBillTipPerson = totalBill / numPeople.value;
    result.style.display = "block";
    document.getElementById("Tip").innerText = `$${totalTip.toFixed(2)}`;
    document.getElementById("totalBillTip").innerHTML = `$${totalBill.toFixed(
        2
    )}`;
    document.getElementById("TipPerson").innerHTML = `$${divTip.toFixed(2)}`;
    document.getElementById(
        "DivBillTipPerson"
    ).innerHTML = `$${divBillTipPerson.toFixed(2)}`;
}
</script>

</body>
</html>
Preview