Calculator

// custom function
function calculateTip(){

// store data of inputs
var billAmount = document.getElementById("billAmount").value;
var serviceQuality = document.getElementById("seviceQuality").value;
var numPeople = document.getElementById("totalPeople").value;

// Quick Validation
if(billAmount === "" || serviceQuality == 0){
alert("Please enter some values")
return;
}
if(numPeople === "" || numPeople <= 1){
numPeople = 1;
document.getElementById("each").style.display="none";

} else {
document.getElementById("each").style.display="block";
}
var total = (billAmount * serviceQuality) / numPeople;
total = Math.round(total * 100) / 100;
total = total.toFixed(2);
document.getElementById("totalTip").style.display="block"
document.getElementById("tip").innerHTML = total;

}

// script.js

// hide the tip amount
document.getElementById("totalTip").style.display ="none";
document.getElementById("each").style.display="none";

//clicking the button calls our custom function

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




CSS

body{
background:url("https://images.unsplash.com/photo-1529753253655-470be9a42781?ixlib=rb-1.2.1&w=1000&q=80") center center no-repeat;
background-size: cover;
color:#532827;
}

#container {
width:400px;
margin:40px auto 0;
padding:50px;
box-sizing: border-box;
background-color: #1f4954 top left no-repeat
box-shadow:0 10px 15px -8px #000;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
text-align:center;
}
.pppo{
margin:0 0 20px;
padding:0 0 20px;
border-bottom: solid 1px #ddd;
}
form{
text-align: left;

}
form label{
display: block;
margin:25px 0;
font-weight:bold;
}
form input,
form select {
padding:8px;
margin: 10px 0;
}
form input [type="text"]{
width:90px;

}
button {
background:#6c2726;
color:white;
border:none;
border-bottom: solid 4px #222;
text-transform:uppercase;
font-size:18px;
padding:20px 30px;
width:100%;
}
button:hover {
background:#4c2827;
border-bottom-color:#111;
}
button:active {
position:relative;
top:1px;
}
#totalTip{
font-size:50px;
margin-top:40px;
}
#totalTip:before{
content:"Tip Amount" ;
font-size: 14px;
font-weight:bold;
display:block;
text-transform:uppercase;
}
#totalTip sup {
font-size:24px;
top:-18px;

}
#totalTip small {

font-size:14px;
font-weight:bold;
display:block:;
}