<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>The Tip Calculator</
title
>
<
link
href
=
rel
=
"stylesheet"
>
<
style
>
body {
background-color: #4CAF50;
}
.container {
width: 80%;
margin: auto;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container px-4 py-8"
>
<
div
class="tip-calculator
bg-white rounded-lg shadow-lg p-8">
<
h1
class
=
"text-2xl font-bold text-center text-gray-800 mb-8"
>
TIP CALCULATOR
</
h1
>
<
div
class
=
"mb-4"
>
<
label
for
=
"amount"
class
=
"block text-gray-700"
>
Bill Amount
</
label
>
<
input
type
=
"text"
id
=
"amount"
placeholder
=
"Amount to be paid"
class="input-field border border-gray-300
rounded-md px-4 py-2 w-full focus:outline-none
focus:ring focus:ring-blue-400">
</
div
>
<
div
class
=
"mb-4"
>
<
label
for
=
"services"
class
=
"block text-gray-700"
>
How was the service ?
</
label
>
<
select
id
=
"services"
class="input-field border border-gray-300
rounded-md px-4 py-2 w-full focus:outline-none
focus:ring focus:ring-blue-400">
<
option
selected disabled hidden>Select</
option
>
<
option
value
=
"0.25"
>25% - Top Notch</
option
>
<
option
value
=
"0.20"
>20% - Excellent</
option
>
<
option
value
=
"0.15"
>15% - Good</
option
>
<
option
value
=
"0.10"
>10% - Bad</
option
>
<
option
value
=
"0.05"
>5% - Worst</
option
>
</
select
>
</
div
>
<
div
class
=
"mb-4"
>
<
label
for
=
"persons"
class
=
"block text-gray-700"
>
Total number of persons
</
label
>
<
input
type
=
"text"
id
=
"persons"
placeholder
=
"Number of people sharing the bill"
class="input-field border border-gray-300
rounded-md px-4 py-2 w-full focus:outline-none
focus:ring focus:ring-blue-400">
</
div
>
<
button
id
=
"calculate"
class="btn-calculate bg-blue-500 text-white
rounded-md px-4 py-2 w-full focus:outline-none
focus:ring focus:ring-blue-400">
Calculate
</
button
>
<
div
id
=
"tip-amount"
class="tip-amount hidden text-2xl
font-bold text-center
text-gray-800 mt-4">
</
div
>
</
div
>
</
div
>
<
script
>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById('calculate')
.addEventListener('click', calculateTip);
});
function calculateTip() {
let amount = parseFloat(document.getElementById('amount').value);
let persons = parseInt(document.getElementById('persons').value);
let service = parseFloat(document.getElementById('services').value);
if (isNaN(amount) || isNaN(persons)
|| isNaN(service) || service === 0 || persons === 0)
{
alert("Please enter valid values");
return;
}
let total = (amount * service) / persons;
total = total.toFixed(2);
document.getElementById('tip-amount').
classList.remove('hidden');
document.getElementById('tip-amount').
innerHTML = `Tip Amount: ${total} ₹ each`;
}
</
script
>
</
body
>
</
html
>