This project is an image generator that allows users to create a visual representation of their travel itinerary. The application automatically groups neighboring "Destinations" with the same "Locations", nesting them under the same list item. This feature enables users to view their itinerary at a glance, providing a clear and organized overview of their travel plans.
- Automatic Grouping: Neighboring "Destinations" with the same "Locations" are automatically grouped together.
- Nested Items: New inputs for "Destination" or "Meal" are nested under the previous "Location".
- Downloadable Image: The generated itinerary can be downloaded as an image for offline use.
- Dynamic Updates: The itinerary updates dynamically as users add or modify their travel plans.
- Date and Day Separation: The day number, date, and day of the week are displayed separately for clarity.
- Active Day Highlight: The border of the day container being edited is highlighted for better user experience.
- Import and Export: Users can import and export their itinerary data for easy sharing and backup.
- Add a Day: Click the "Add Day" button to add a new day to your itinerary.
- Add Locations and Destinations: For each day, you can add locations and destinations. Click the "Add Location" button to add a new location. Under each location, you can add destinations, meals, and transportation details.
- Edit Details: Click on any input field to edit the details. The border of the active day container will be highlighted.
- Move Items: Use the up and down arrows to move locations and destinations within the itinerary.
- Delete Items: Click the trash icon to delete a day, location, or destination.
- Import and Export: Use the "Import" button to import itinerary data from a file. Use the "Export" button to export your itinerary data to a file.
- Download Image: Click the "Download" button to download the itinerary as an image. You can choose to download it as a PNG or PDF file.
- Favicon: Customer journey icons created by Icon Hubs - Flaticon
- Layout: Fiori for Android Design Guidelines
- Font: DM Sans
- Icons: Font Awesome | Icons Reference
The code was entirely built using Artificial Intelligence (AI) tools as @ABagram currently has limited knowledge on JavaScript, which could impact the functionality and greatly reduce the quality of the user experience (UX). She thought that she could immediately make use of the website if it were developed to cater to her intended use.
The starting code was made using OpenAI's ChatGPT, while the majority of the edits and features (e.g., JavaScript) were primarily made using GitHub Copilot (GPT 4o). The prompts are completely directed by @ABagram.