<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
The Travel Budget Calculator
</title>
<link rel="stylesheet" href=
</head>
<body class="bg-gray-100">
<div class="container mx-auto max-w-lg mt-8 p-6
bg-white rounded-lg shadow-lg border-2 border-green-500">
<h1 class="text-3xl font-bold text-center mb-4">
Travel Budget Calculator
</h1>
<div class="mb-4">
<label for="budget" class="text-lg font-semibold mb-2 block">
Budget (INR):
</label>
<input type="number" id="budget"
class="border border-gray-300 rounded-md px-4
py-2 w-full focus:outline-none focus:border-blue-500">
</div>
<div class="mb-4">
<label for="duration" class="text-lg font-semibold mb-2 block">
Duration (days):
</label>
<input type="number" id="duration"
class="border border-gray-300 rounded-md px-4
py-2 w-full focus:outline-none focus:border-blue-500">
</div>
<button class="bg-blue-500 text-white py-2 px-4
rounded-md hover:bg-blue-600 focus:outline-none w-full mb-4"
id="calculateButton">Calculate</button>
<div class="text-center text-xl font-semibold" id="result"></div>
</div>
<script>
document.getElementById('calculateButton').
addEventListener('click', function () {
const budget =
parseFloat(document.getElementById('budget').value);
const duration =
parseInt(document.getElementById('duration').value);
if (isNaN(budget) || isNaN(duration) || budget <= 0 || duration <= 0) {
document.getElementById('result').textContent =
'Please enter valid budget and duration.';
} else {
const dailyBudget = budget / duration;
document.getElementById('result').textContent =
`Your daily budget is ₹${dailyBudget.toFixed(2)}.`;
}
});
</script>
</body>
</html>