Tip calculator

index.html

<div id ="container">
  
    
<h style="font-style:italic" ><center>TIP CALCULATOR</center></h>
 
  <form>

<p>Bill Amount:$<input type="text" id ="billamt" placeholder="enter the bill amount "></p>
   
      
    <p>How was the service?:</p>
    <select id="servicerating">
      <option  selected value="0" >--Choose an option--</option>
      <option value="0.05">5% terrible</option>
      <option value="0.10">10% bad</option>
      <option value="0.15">15% ok</option>
      <option value="0.20">20% good👍</option>
      </select>
      
    <p>No.of person sharing:</p>
      <input type="text" id="personsharing" placeholder="no.of people">
    </form>
      <div>
     <br>
   <button style="background-Color:black;color: white "id="calculate">Calculate</button>   
        </div>
    
  <br>
  <div id="total tip">
  <h style="color: white"><center>TIP AMOUNT</center></h>
    <br>
         <sup style="color: white"><center>$</sup> <span id="span" style="color: white">0.00</center></span>
    <small id ="small" style="color: white"><center>each</center><small>
    </div>
  </div>
  

script.js

function calculatetip() {
 var billAmt=document.getElementById("billamt"). value ;
var serviceRating=document.getElementById("servicerating").value;
  
var personSharing=document.getElementById("personsharing"). value ;
  if(billAmt===""||serviceRating == 0){
    
      alert("please enter the values");
      return;
      }
  var total=(billAmt*serviceRating)/personSharing;
  total=Math.round(total);
  total=total.toFixed(2);
  document.getElementById("span").innerHTML=total;
  }
  document.getElementById("calculate").onclick=function(){
    calculatetip();
    }
  

style.css

body{
  background: black;
  
  }
h{
  color: white;
  }
p{
  color: white;
  }

tip-calculator.markdown

Tip calculator

A Pen by Nandhini on CodePen.

License.