TIP Calculator Online Tool Script

Hello Guys, In this post, I will tell you about how to create a Tip Calculator tool in a blogger with the help of HTML, JS, and CSS. If you haven’t read about QR Code Generator tool then please first read it and then this post. First of all, what is a TIP?  What is a Tip Calculator Tool? are the questions we will look at in these posts. By the end, you will be able to create your TIP Calculator Tool. Didn’t feel excited? Let’s look into it.

What Is A TIP?

A relatively small amount of money given for services rendered (as by a waiter) A tip or gratuity is an additional amount paid to certain service personnel for a service provided.

The number of tips, as well as acceptance, varies from different parts of the world. In some East Asian countries, such as Japan, the tips appear to be rude and can sometimes be interpreted as bribery. In some lands, such as the United States, fines are widely anticipated, and in many cases, compensation may be provided to service personnel to meet the minimum wage. In the U.S. Or in any country where a tip is expected, depending on the restaurant or the number of enthusiasts at the table, the grant can be applied automatically to the amount of the loan. As mentioned earlier, the decline may be offensive to some countries, so while a U.S. citizen visiting another country may want to express his or her gratitude for the service provided, some action may sometimes have a different effect.

What Is TIP Calculator Tool?

If you understand what is a TIP then you can easily understand that the calculator is a sort of script which calculates TIP based on your interest. So it is basically a tool that calculates TIP. If you didn’t understand then visit our QR Code Generator tool.

TIP Calculator Online Tool

Now let’s talk about how to make this tool. If you want this for your blogger website then you just need to know about javascript, HTML, and CSS. Blogger supports these three things. Now I will provide you the source code.

TIP Calculator Online Tool Script

Below is the Online Tool Script. There are three separate codes for HTML, CSS, and javascript. You need to copy them.

HTML

<center><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/tYGjgURHL68" width="560"></iframe></center>

    <form>
      <p>How much was your bill?
        </p>
          $ <input id="billamt" type="text" />

          <p>How was your service?
            </p>
              <select id="serviceQual">
            <option disabled="" selected="" value="0">Select Option</option>
            <option value="0.3">30% - Outstanding</option>
            <option value="0.2">20% - Good</option>
            <option value="0.15">15% - It was OK</option>
            <option value="0.1">10% - Bad</option>
            <option value="0.05">5% - Terrible</option>
        </select>

    
    <p>How many people are sharing the bill?</p>
    <input id="peopleamt" type="text" />
    <button id="calculate" type="button">Calculate!</button>
      </form>

  <div id="totalTip">
    <sup>

lt;/sup><span id="tip">0.00</span> <small id="each">each</small> </div><div><br /></div>

CSS

<style>

p {
  padding-left: 20px;
}

form input[type="text"] {
  width: 90px;
}

input {
  padding-left: 20px;
}

#billamt {
  font-size: 14px;
  color: red;
  background-color: #fff;
  width: 60%;
  padding: 5px 5px 8px 8px;
}

#billamt:focus {
  background: #fff;
  border: 3px solid #2980b9;
  outline: none;
}

#peopleamt {
  width: 60%;
  padding: 5px 5px 8px 8px;
  margin-left: 20px;
  color: red;
  background-color: #fff;
  font-size: 14px;
}

.dollarSign {
  display: inline;
}

#serviceQual {
  padding: 5px 5px 8px 8px;
  margin-left: 20px;
  font-size: 18px;
}

button {
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  margin: 30px auto;
  background: #AD133A;
  border-radius: 5px;
  width: 200px;
  height: 50px;
  font-size: 17px;
  color: white;
}

button:hover {
  background: #4c2827;
  border-bottom-color: #111;
}

button:active {
  position: relative;
  top: 1px;
}

#totalTip {
  font-size: 30px;
  margin-top: 5px;
  text-align: center;
}

#totalTip:before {
  content: "Tip amount";
  font-size: 20px;
  font-weight: bold;
  display: block;
  text-transform: uppercase;
}

#totalTip sup {
  font-size: 20px;
  top: -18px;
}

#totalTip small {
  font-size: 20px;
  font-weight: bold;
  display: block;
}
</style>

JavaScript

<script>
  //Calculate Tip
function calculateTip() {
  var billAmt = document.getElementById("billamt").value;
  var serviceQual = document.getElementById("serviceQual").value;
  var numOfPeople = document.getElementById("peopleamt").value;

  //validate input
  if (billAmt === "" || serviceQual == 0) {
    alert("Please enter values");
    return;
  }
  //Check to see if this input is empty or less than or equal to 1
  if (numOfPeople === "" || numOfPeople <= 1) {
    numOfPeople = 1;
    document.getElementById("each").style.display = "none";
  } else {
    document.getElementById("each").style.display = "block";
  }

  var total = (billAmt * serviceQual) / numOfPeople;

  total = Math.round(total * 100) / 100;

  total = total.toFixed(2);

  document.getElementById("totalTip").style.display = "block";
  document.getElementById("tip").innerHTML = total;

}

document.getElementById("totalTip").style.display = "none";
document.getElementById("each").style.display = "none";

document.getElementById("calculate").onclick = function() {
  calculateTip();

};
</script>

How To Use This Code In Blogger?

Many of us don’t understand programming languages and how external and inline code works. So for them just copy these codes in ascending order and also paste them in ascending order.
  1. First Sign In to Blogger dashboard.
  2. Click on Page Option.
  3. Create a New Page.
  4. Click on HTML Section.
  5. Paste these codes one by one on the same page.
  6. Click on Publish and your tool is now ready.
Conclusion

That’s All. I hope that this will work for you and if not please tell in the comment box. I will try my best to fix any issue regarding this topic. Also, if found useful then share it on social media. So my blog posts will get more exposure. Thanks

Nkcoderz.com is a website that provides you with information related to technology, entertainment, how-to, gadgets, and gaming, etc. We try our best to explain you. If you have any suggestions then kindly contact.

Leave a Comment

Copy link
Powered by Social Snap