Travel Itinerary Planner with Day-by-Day Timeline

Planning a group trip usually happens across scattered notes, screenshots and spreadsheet rows — timings drift, costs are forgotten, and nobody knows the real total until the money is gone. The honest problem this project solves is modest but real: give a traveller one place where each day of a trip is a timed, costed timeline, and the budget adds itself up. Most student-built planners stop at a static list of places; this one makes every activity carry a time, a category and a cost, so the day view, the budget charts and the packing checklist all derive from a single data model. That single-source design is the interesting engineering: add an activity once and it appears on the timeline, in the per-day totals, in the category charts and (where relevant) in the packing list. The demo ships with a complete 5-day Goa itinerary so every screen is demonstrably working, plus a trip creator so the flow can be exercised end to end.

1. A trip is a JSON object: metadata plus an array of days, each holding timed activities with cost and category fields.
2. The day-by-day view renders one day at a time from this model; adding an activity inserts it into the day's array, sorts by time, and re-renders.
3. The budget engine reduces the same arrays twice — once grouped by category, once by day — and draws canvas bar charts plus the line-item table.
4. Custom trips created in the trip creator are serialized to localStorage and reloaded on every visit, alongside the bundled demo trip.
5. The packing checklist reads the itinerary to seed relevant items (boat day → dry bag) and persists tick state per trip.
6. Hash routing (#/overview, #/itinerary, #/budget, #/checklist) switches views without reloads; deep links open any screen directly.
7. The full project extends this core with a backend (user accounts, shareable read-only trip links, PDF export).

Tech stack:

• HTML5, CSS3 (custom design system, no framework)
• Vanilla JavaScript (ES6 modules pattern in one file)
• Canvas API for budget charts
• localStorage for persistence
• Hash-based SPA routing

• [Day-by-day timeline] Each trip day is a timed activity list with per-day totals; activities sort by time automatically and can be added or deleted live.
• [Costed activities with categories] Every activity carries a cost and a category (stay, food, transport, fun, shopping), so budgeting is a side effect of planning, not a separate chore.
• [Live budget dashboard] Spending is aggregated by category and by day into canvas bar charts, with a full line-item table — all recomputed from the itinerary data.
• [Multi-trip dashboard] Trips carry status (upcoming, planning, completed), traveller counts and budget-vs-spend progress bars.
• [Trip creator] Name, dates and traveller count generate a new trip entry with its day skeleton; stored in localStorage.
• [Packing checklist] Category-grouped checklist with persistent tick state, seeded from the trip's activities.
• [Hash-routed SPA] Four views (My Trips, Day-by-Day, Budget, Packing) with clean routing and no page reloads, in a single deployable file.

• Complete single-file travel itinerary planner web app
• Bundled demo trip (5-day Goa itinerary, 21 costed activities)
• Budget engine with category/day aggregation and charts
• Trip creator and packing checklist modules
• Project report PDF (requirements, data model, architecture, screenshots)
• PPT presentation for final review
• Viva Q&A preparation document (SPA routing, state management, charting)