.png)
Click Here to View the Live website
Click Here to view Original Source Code at github
Given Below is HTML Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="tip.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tip Calculator</title>
</head>
<body>
<div class="container">
<div class="header">Tip calculator</div>
<p>Bill Total</p>
<div class="billtotal">
<input type="text" id="billTotalInput" placeholder="0.00" onkeyup="calculateBill()"/>
</div>
<p>Tip(%)</p>
<div class="tipinput">
<input type="text" id="tipInput" placeholder="10" onkeyup="calculateBill()"/>
</div>
<div class="bottomcontainer">
<span class="noofpeople">No. of People <br>
<span class="buttoncontainer">
<span class="increase" onclick="increasePeople()"><button>+</button></span>
<span class="textvalue" id="numberofPeople">1</span>
<span class="decrease" onclick="decreasePeople()"><button>-</button></span>
</span>
</span>
<span class="totalcontainer">
<span class="title">Total Per Person </span><br><span class="total">₹</span>
<span class="total" id="perPersonTotal">0.00</span>
</span>
</div>
</div>
<footer><H2>Made By Vaibhav Yadav with ❤❤</H2></footer>
<script src="tip.js"></script>
</body>
</html>
CSS Code is Given Here:
body{
font-family: sans-serif;
margin: 0;
padding: 0;
font-weight: bolder;
}
.container{
width: 60vh;
border-radius: 8px;
box-shadow: 10px 10px 30px black;
margin: 20vh auto;
background-color: steelblue;
padding: 5vh;
}
.container input{
box-sizing: border-box;
padding: 0.4vh;
border-radius: 6px;
width: 100%;
}
input[type=text]:focus{
outline: none;
background-color: lightcyan;
}
footer {
text-align: center;
}
.header{
text-align: center;
font-size: 25px;
font-family: 'Times New Roman', Times, serif;
padding: 2vh;
}
.textvalue{
padding: 1vh;
}
.tipinput{
margin: 0;
padding: 0;
}
.totalcontainer{
margin: 2vh auto;
text-align: center;
}
.total{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: black;
}
.noofpeople{
margin: 2vh auto;
}
.bottomcontainer{
display: flex;
}
This is Javascript File
const billInput = document.getElementById('billTotalInput')
const tipInput = document.getElementById('tipInput')
const numberofPeopleDiv = document.getElementById('numberofPeople')
const perPersonTotalDiv = document.getElementById('perPersonTotal')
let numberofPeople = Number(numberofPeopleDiv.innerText)
const calculateBill = () => {
const bill = Number(billInput.value)
const tipPercent = Number(tipInput.value)/100
const tipAmount = bill*tipPercent
const total = tipAmount + bill
const perPersonTotal = total/numberofPeople
perPersonTotalDiv.innerText = perPersonTotal.toFixed(2)
}
const increasePeople = () => {
numberofPeople+=1
numberofPeopleDiv.innerText = numberofPeople
if(numberofPeople>1){
numberofPeopleDiv.style.color = "black";
}
calculateBill()
}
const decreasePeople = ( ) => {
if(numberofPeople<=1){
numberofPeopleDiv.style.color = "red";
alert("Invalid, Input")
return
}
numberofPeople -=1
numberofPeopleDiv.innerText = numberofPeople
calculateBill( )
}
.png)