Travel Budget Planner

1 Devlogs
5 Total hours

Travel Budget Planner is a responsive web app that helps users estimate the total cost of a trip. Users enter their destination, number of days, number of travelers, hotel cost, food cost, transportation cost, activity cost, and extra budget percentage. The app calculates the full trip cost, cost per person, daily average cost, and category totals. The project also includes input validation, a Budget / Standard / Expensive trip label, visual spending bars, localStorage save/load support, a reset button, and a print summary feature. It was built with HTML, CSS, and JavaScript as a front-end travel planning tool.

Ship #1 Changes requested

@Ombama on Travel Budget Planner · about 4 hours ago

I made a Travel Budget Planner that helps users estimate the full cost of a trip. Users enter their destination, number of days, travelers, hotel, food, transportation, activities, and emergency-budget percentage. The app calculates each expense category, total trip cost, cost per person, and average daily cost. It also labels the trip as Budget, Standard, or Expensive, saves the latest trip, and includes reset and print options.

The most challenging parts were validating inputs, organizing the calculations, preventing incorrect results, and saving data with localStorage. I am most proud of the responsive design and visual budget breakdown.

To test it, enter trip details and click Calculate Budget. Also try missing fields, zero or negative values, refreshing the page, resetting the form, and printing the summary.

1 devlog
5h

Try project → See source code →

Open comments for this post

@Ombama on Travel Budget Planner · about 4 hours ago

5h 11m 41s logged

The final project includes a responsive interface where users enter their destination, trip length, number of travelers, hotel cost, food cost, transportation, activities, and an extra emergency-budget percentage. JavaScript reads and validates the form, calculates each expense category, total trip cost, cost per person, and average daily cost. It also labels the trip as Budget, Standard, or Expensive and displays visual spending bars. I added currency formatting, clear error messages, reset and print buttons, and browser localStorage so the latest trip can be saved and restored after refreshing the page. The CSS includes cards, responsive layouts, mobile support, and print styles. The finished GitHub project also includes a detailed README explaining its features, calculations, technologies, file structure, and possible future improvements.