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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS