The Travel Budget Calculator is a web application designed to help users calculate their daily budget for a trip based on the total budget amount and the duration of the trip in days.
Approach:
- Create a new HTML file and include the necessary HTML structure.
- Use Tailwind CSS for styling the elements.
- Write JavaScript code to handle the calculation logic.
- Test the application to ensure it functions as expected.
Example: The below code helps you in creating the travel budget calculator app usong HTML, TailwindCSS, and JavaScript.
HTML
<!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 >
|
Output:
Recommended Articles