Create Tip Calculator with html css javascript | Tip Calculator javascript – Codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Tip Calculator javascript. We use HTML, Css, and javascript for this Tip Calculator javascript. Hope you enjoy our blog so let’s start with a basic HTML structure for a Tip Calculator javascript.

HTML code

  <div class="container">  
   <header>  
    <h1 id="title" class="text-center">Tip Calculator</h1>  
   </header>  
   <form action="javascript:void(calc())">  
    <input class="form-control" id="bill" type="text" placeholder="Total Bill">  
    <br>  
    <input class="form-control" id="split" type="text" placeholder="Number of Person">  
    <br>  
    <button class="btn btn-success btn-lg">Calculate</button>  
    </br>  
    </br>  
    <div class="results">  
     <p><strong>Tip:&nbsp; <span id="tip"></span></strong></p>  
     <p><strong>Total:&nbsp; <span id="total"></span></strong></p>  
     <p><strong>Each person pay::&nbsp; <span id="splitTotal"></span></strong></p>  
    </div>  
   </form>  
   <br>  
  </div>  

There is all HTML code for the Tip Calculator javascript. Now, you can see output without CSS, then we write css & javascript for Tip Calculator javascript.

 body {  
       background-color: white;  
 }  
  .container {  
       max-width: 320px;  
       margin-left: auto;  
       margin-right: auto;  
 }  
  .container h1, .container p {  
       color: #8a8a8a;  
 }  
  .container p {  
       font-size: 16px;  
 }  
  #title {  
       color: #ff6363;  
       padding-bottom: 15px;  
 }  
  .btn-success, .btn-success:focus {  
       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);  
       background-color: #ff6363;  
       border-color: #ff6363;  
 }  
  .btn-success:hover {  
       background-color: #e06262;  
       border-color: #e06262;  
 }  
  .results {  
       text-align: center;  
       background-color: rgba(218, 207, 207, 0.17);  
       max-width: 285px;  
       padding: 5px;  
       border-radius: 5px;  
       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);  
 }  
  #tip, #total, #splitTotal {  
       color: #ff6363;  
 }  
  .btn-success {  
       width: 285px;  
 }  
  input[type="text"] {  
       font-size: 18px;  
       height: 45px;  
       padding: 5px;  
       width: 285px;  
       font-size: 16px !important;  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

 var calc = function() {  
  var bill = Number(document.getElementById('bill').value);  
  var split = Number(document.getElementById('split').value)  
  var tip = bill * .15;  
  var totalBill = bill + tip;  
  var splitPerPerson = totalBill / split  
  document.getElementById("tip").innerHTML = "₹" + Number(tip).toFixed(2);  
  document.getElementById("total").innerHTML = "₹" + Number(totalBill).toFixed(2);  
  document.getElementById("splitTotal").innerHTML = "₹" + Number(splitPerPerson).toFixed(2);  
 }  

Final output