https://github.com/code-mike-code/excursions-order-panel
This project is a JavaScript-based travel order system that allows users to: • Upload a CSV file containing travel offers • Select trips, specify the number of adults/children, and add them to an order list • Review and remove items from the order summary • Submit the order with validated customer details
https://github.com/code-mike-code/excursions-order-panel
css3 data-processing dom dom-manipulation form-handling html5 javascript
Last synced: 10 days ago
JSON representation
This project is a JavaScript-based travel order system that allows users to: • Upload a CSV file containing travel offers • Select trips, specify the number of adults/children, and add them to an order list • Review and remove items from the order summary • Submit the order with validated customer details
- Host: GitHub
- URL: https://github.com/code-mike-code/excursions-order-panel
- Owner: code-mike-code
- Created: 2025-05-07T10:21:24.000Z (11 days ago)
- Default Branch: master
- Last Pushed: 2025-05-07T10:27:38.000Z (11 days ago)
- Last Synced: 2025-05-07T11:32:12.357Z (11 days ago)
- Topics: css3, data-processing, dom, dom-manipulation, form-handling, html5, javascript
- Language: JavaScript
- Homepage: https://code-mike-code.github.io/excursions-order-panel/
- Size: 22.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Excursions order panel
See the live version of [Excursions order panel](https://code-mike-code.github.io/excursions-order-panel/).
Project made during learning process with my mentor program [devmentor.pl](https://devmentor.pl/). This project is a JavaScript-based travel order system that allows users to:
• Upload a CSV file containing travel offers
• Select trips, specify the number of adults/children, and add them to an order list
• Review and remove items from the order summary
• Submit the order with validated customer details
The system dynamically generates trip cards from CSV data, calculates the total price, and ensures proper form validation before submission.
# Key Functionalities
1. CSV Data Processing
Parses uploaded CSV files with trip data (ID, name, description, adult/child prices)
Handles edge cases (commas in descriptions, line breaks)
Dynamically renders trip cards in the UI
2. Order Management
Adds/removes trips from the order summary
Recalculates the total price in real-time
Stores order data in a structured format
3. Form Validation
Validates required fields (name, email)
Checks email format (must contain "@")
Displays error messages for invalid inputs
4. Order Submission
Shows a confirmation alert with order details
Clears all forms and resets the UI after submission
## 💡 Technologies
## 🔗 See also
Are you interested in **SCSS** and **JavaScript**? See my other project [Landing Page MGUU](https://code-mike-code.github.io/landing_page_project/).
## 💿 Installation
No Required
## 💭 Conclusions for future projects
Dynamic Content Handling - Event delegation is crucial when working with DOM elements created after page load. CSV Parsing - Special characters require robust parsing logic beyond simple split(). State Management - A centralized "basket" array simplifies order tracking and calculations. Validation Feedback - Inline error messages improve UX more than generic alerts. This project demonstrates practical JavaScript skills including DOM manipulation, form handling, and data processing - all while maintaining clean, maintainable code.
## 🙋♂️ Feel free to Reach Out!
If you have questions, ideas, or just want to chat about code (or the meaning of life), don’t hesitate to contact me. Open an issue, drop me a pull request, or send a message—carrier pigeon works too, but GitHub might be faster. Let’s build something awesome together! 🚀
## 👏 Thanks / Special thanks / Credits
Thanks to my [Mentor - devmentor.pl](https://devmentor.pl/) – for providing me with this task and for code review.