<html lang="en">

<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>

<link rel="stylesheet" href="./style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">

<div class="main_container">

<div class="heading">

<h1>🍕TIP CALCULATOR🍕</h1>

</div>

<div class="calbox">

<p>Enter The Amount To be Paid </p>

<input type="text" id="amt_inpt" placeholder="Enter Amount">

<p>How was The Service?🤔</p>

<select id="services">

<option value="25">25% - Execellent</option>

<option value="20">20% - Good</option>

<option value="10">10% - Average</option>

<option value="5">5% - Poor(Need of Improvement)</option>

</select>

<p>No of People ?</p>

<input type="text" id="persons" placeholder="No of People sharing the Bill">

<button value="" id="cal_tip">Calculate</button>

<div id="display_tip_amt">

<p>Tip Amount</p>

<span id="total"></span>

<span id="each">each</span>

</div>

</div>

</div>

<script src="./script.js"></script>