Design a Travel Budget Calculator in Tailwind CSS
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 = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" > </ 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: