In this assignment, we are expected to create a web application for Hikkaduwa Turtle Hatchery to streamline ticket booking and enhance visitors’ experience. The present website has a "Book Now" button that, when clicked, takes users to a new JavaScript application called the Tickets page. Visitors may pre-book their tickets using this interactive and user-friendly interface. I mainly used Alpine.js derivative to implement this web site’s dynamic features.
The Tickets page is divided into three sections: Dates, Duration, and Guests. Each element has been thoughtfully created to provide customers with simple navigation. In the "Dates" area, visitors can select their preferred date from an integrated calendar. The customer is then given the option to choose successive timeslots. After that, based on the type of guest ticket they need—SL Adults, SL Children, Foreigner Adults, Foreigner Children, and Infants—the user may select the quantity of tickets they need. Showcased on the right-hand side of this page is the summary table that includes user's selections, such as date, time, tickets, charges, and total price. This summary table is designed to update in real-time as users modify their selections. Once the necessary data has been correctly entered, users may view the Details page.
- Ticket Booking System: Implemented a user-friendly ticket booking system using Alpine.js for dynamic features.
- Real-time Summary Updates: Summary table on the Tickets page updates in real-time as users modify their selections.
- Detailed Navigation: Divided the Tickets page into three sections—Dates, Duration, and Guests, for simple navigation and user convenience.
- Interactive Interface: Integrated an interactive calendar for selecting dates and timeslots, enhancing the user experience.
The Sea Turtle Website caters to visitors of the Hikkaduwa Turtle Hatchery who wish to pre-book tickets online. The website aims to streamline the ticket booking process and provide a seamless experience for users.
- Alpine.js: I utilized Alpine.js for the ticket booking system on this website. Alpine.js enabled me to implement dynamic features and interactive components, such as date selection, time slots, and quantity selection for tickets, providing users with a seamless booking experience.
- CSS Animations (Keyframes): In this project, I showcased the use of CSS animations using keyframes in two main areas to enhance the overall user experience. Firstly, I incorporated CSS animations with keyframes to add visual appeal and interactivity to the footer section of the website. Secondly, the Bentota page featured a slideshow functionality that utilized CSS animations with keyframes to achieve smooth transitions between images. These animations contributed to a more immersive and engaging browsing experience.
- Localhost Data Storage: Localhost data storage played a crucial role in facilitating the ticket booking system's functionality. By leveraging localhost data storage, users were able to proceed with their ticket selections and purchases seamlessly. This approach ensured that users could complete their bookings without interruptions or data loss, contributing to a smoother user experience overall.
The project website is hosted at the following link: Sea Turtle Website
Users can access the website to explore the features and functionalities implemented in the project.