INDUSTRY INTERNSHIP REPORT

Submitted in
partial fulfillment of requirement for the award of degree of

Bachelor of Technology
in
Information Technology

By
Mr. Priyanshu

Industry / Organization Guide

Mr. Pawan Pakhale
at
Park Me Safe

Institute Guide (from College)

Prof. Rupali Vairagade
(Assistant Professor)

Department of Information Technology

G H Raisoni College of Engineering, Nagpur
(An Autonomous Institute affiliated to Rashtrasant Tukadoji Maharaj Nagpur University, Nagpur)
Accredited by NAAC with “A+” Grade
th
Ranked 163 by NIRF, in the Engineering Category for India Ranking 2022,

June 2023
 INDUSTRY INTERNSHIP REPORT

Submitted in
partial fulfillment of requirement for the award of degree of

Bachelor of Technology
In
Information Technology

By
Mr. Priyanshu

Industry / Organization Guide

Mr. Pawan Pakhale
at
Park me Safe

Institute Guide (from College)

Prof. Rupali Vairagade
Assistant Professor

Department of Information Technology

G H Raisoni College of Engineering, Nagpur
(An Autonomous Institute affiliated to Rashtrasant Tukadoji Maharaj Nagpur University, Nagpur)
Accredited by NAAC with “A+” Grade
th
Ranked 163 by NIRF, in the Engineering Category for India Ranking 2022,

June 2023
© G H Raisoni College of Engineering, Nagpur, Year 2023
 Declaration

I hereby declare that the Industry Internship report submitted herein has been carried
out by me in Park Me Safe towards partial fulfillment of requirement for the award of Degree
of Bachelor of Technology in Information Technology. The work is original and has not been
submitted earlier as a whole or in part for the award of any degree / diploma at this or any
other Institution / University.

I also hereby assign to G H Raisoni College of Engineering, Nagpur all rights under copyright
that may exist in and to the above work and any revised or expanded derivatives works based
on the work as mentioned. Other work copied from references, manuals etc. are disclaimed.

Name of student Mobile No Mail ID Signature

(Other than Raisoni.net)

Priyanshu 7461975793 [email protected]

Place Nagpur
Date
 Certificate

The Industry Internship Report entitled as “Travel Planner Website – QtripDynamic”

carried out under our supervision in Park Me Safe by Priyanshu for the award of Degree of
Bachelor of Technology in Information Technology. The work submitted is comprehensive,
complete and fit for evaluation.

Mr. Pawan Pakhale Prof. Rupali Vairagade

Industry Guide Instiute Guide
Supervisor Assistant Professor
Park Me Safe,Amravati Department of Information Technology
G H R C E, Nagpur

Prof. Swati Shamkuwar Dr. Mahendra Gaikwad

III Coordinator Head of Department
Assistant Professor Department of Information Technology
Department of Information Technology G H R C E, Nagpur
G H R C E, Nagpur

Mr. Gurpal Singh Dr. Sachin Untawale

Dean III Cell Director
G H R C E, Nagpur G H R C E, Nagpur
 Certificate

This is to certify that Mr. Priyanshu student of Information Technology from G H Raisoni
College of Engineering, Nagpur has completed Internship successfully from 14/12/2022 to
14/06/2023. During this period they have shown good interest in the assignment/works given
to them and worked hard. During their tenure of internship, they were hard working and
focused on activities assigned to them.

Student have worked during internship period on following project under the guidance of Mr.
Pawan Pakhale
1. Travel Planner Website – QtripDynamic

Regards, Date:
Mr.Pawan Pakhale
Supervisor
Park Me Safe
HOUSE NO. 2307,
PATHROT
Amravati - 444803
Maharashtra – India
 Certificate
Ref.No. PMSI/OPG/2022-23/T-001 Date:

Cost of Industrial Solution Certificate

This is to certify that Mr. Priyanshu student of Information Technology from G H Raisoni
College of Engineering, Nagpur has completed Internship successfully from 14/12/2022 to
14/06/2023. During this period they have shown good interest in the assignment/works given
to them and worked hard.

Students have worked during internship period on following project/industrial problem under
the guidance of Mr. Pawan Pakhale(Supervisor).
Travel Planner Website – QtripDynamic
Industry has spent Rs. NIL amount on their ideas/industries problem, which they have
successfully implemented.

Regards,

Mr. Pawan Pakhale

Supervisor
Park Me Safe
HOUSE NO. 2307,
PATHROT
Amravati - 444803
Maharashtra – India
Ref.No. PMSI/OPG/2022-23/T-001 Date:

Savings to Industry Certificate

This is to certify that Mr. Priyanshu students of Information Technology from G H Raisoni
College of Engineering, Nagpur has completed Internship successfully from 14/12/2022 to
14/06/2023. During this period they have shown good interest in the assignment/works given
to them and worked hard.

Students have worked during internship period on following project/industrial problem under
the guidance of Mr. Pawan Pakhale (Supervisor).
Travel Planner Website – QtripDynamic
Project work submitted by them has the potential to save cost up to Rs. NIL Lakh/year. Also
they were entitled for stipend of Rs. NIL /- per month along with canteen, transportation &
accommodation facilities.
Regards,

Mr. Pawan Pakhale

Supervisor
Park Me Safe
HOUSE NO. 2307,
PATHROT
Amravati - 444803
Maharashtra – India
 ACKNOWLEDGEMENT
I would like to take this opportunity to express our deep sense of gratitude to all who have
provided me with direct or indirect assistance during this internship.
I am thankful to my College guide, Prof. Rupali Vairagade, Department of Information
Technology, GHRCE, Nagpur for guiding me through
this entire project and giving me good lessons, I wish to gain valuable knowledge and
guidance from her.
I am very grateful to Park Me Safe Solutions Pvt Ltd, Amravti for giving me the wonderful
opportunity to work with their esteemed organization, which left me with valuable
experiences.
I am very grateful to Dr. Mahendra Gaikwad, Head of the Department of Information
Technology GHRCE, Nagpur, our Dean-Industry Relations Mr. Gurpal Singh and Dr.
Sachin Untawale Director of GHRCE, Nagpur for his constant support and for providing
necessary facilities for conducting out the project. I had a lot of fun completing this project
and also learned a lot. I am sure that in the upcoming projects, I will actively participate and
complete.
Additionally, I extend my gratitude to III Coordinator, Prof. Swati Shamkuwar, for her
support and guidance throughout the Internship project.
I am expressing my gratitude to Mr. Pawan Pakhale for guiding me during my internship.
His guidance is extremely valuable for building professionalism.

Finally, I would like to express my gratitude to our family members who supported and
encouraged me all the time

Place: Nagpur
Date:
 ABSTRACT

This project report focuses on implementing dynamic functionality for the QTrip website's
frontend using JavaScript. The goal is to enhance the site's interactivity by utilizing REST
APIs to fetch data from the backend and send data for storage. Without the backend
component, QTrip would be limited to static pages that cannot retrieve or store data. To make
the site publicly accessible, the frontend will be deployed using Netlify, while the backend
will be deployed using Render.
The main objective of QTrip Dynamic is to transform the existing static travel site, built with
HTML/CSS, into a dynamic site using JavaScript. The website will feature four key pages:
1. Landing Page: This serves as the starting page and showcases a list of cities where
users can explore adventures.
2. Adventures Page: Accessed by clicking on one of the city cards on the Landing Page,
this page presents the available adventures for the selected city.
3. Adventure Details Page: Users can access this page by clicking on a specific adventure
on the Adventures Page. It provides detailed information about the chosen adventure.
4. Reservations Page: Once users make reservations on the Adventure Details Pages, they
can use this page to view all their reservations.
To achieve these dynamic functionalities, JavaScript will be employed to build upon the
provided HTML and CSS files for QTrip. The JavaScript code will utilize REST APIs to fetch
data related to cities, adventures, adventure details, and reservations from the backend server.
Subsequently, this information will be dynamically manipulated in the HTML page's
Document Object Model (DOM), resulting in an interactive and user-friendly website." QTrip
website is ready with all the necessary content. backend running on the VM and were viewing
the frontend (website) using the Live Server and your VM’s IP address. But this cannot be
shared with others since the VM will be shut down after a while. To be able to share this
website with others and to be able to access it publicly, it needs to be deployed. So to do this
using render and netlify. Render is the platform where the deployment of the backend and
netlify is the platform where frontend will be deployed.

i
 LIST OF FIGURES

Sr.no Figure Name Page Number

1. Architecture of QtripDynamic 9

2. Landing Page View 10

3. JSON View of Cities 13

4. Landing Page Completion 14

5. Backend Data 15

6. Inserting cards to DOM 16

7. Showing the filter pills 17

8. Storing the data in Local Storage 18

9. Adventure detail page overview 19

10. Carousel View 22

11. Implementing features in Carousel 22

12. Conditional Rendering 23

13. Calculating Cost of Reservation 24

16. Showing the banner if already reserved 25

17. Reservation data in JSON View 26

18. Reservation View 27

19. Render UI and Backend Deployment Logs 27

20. Netlify Authorisation and Updating 28

Backend Config.

ii
 INDEX
Sr. No. CONTENTS Page No.

1 CHAPTER 1: Introduction to Company 1

1.1 About the Company 2

1.2 Location 3

1.3 Services 3

1.4 Vision And Mission 3

1.5 Operational Structure 4

2 CHAPTER 2: Case Study 5

2.1 Introduction 6-7

2.2 Problem Identification 7-9

2.3 Objective 10

2.4 Work Carried Out 11-12

2.5 Solution Provided(Designing the Website) 13-35

2.6 Deployment 35-40

2.7 Results and conclusion 41-42

References 43-44

iii
 CHAPTER 1

INTRODUCTION TO COMPANY

1
1.1 About the Company:
Park me safe was implemented on the problems that consumers faced during car Parking. To
provide a fluid experience in Car-Parking.It recognizes the importance of knowledge sharing
and learning in the entrepreneurial journey. The platform offers a wide range of educational
resources,including webinars, workshops, and online courses, delivered by experienced
professionals and thought leaders. These resources cover essential topics such as business
strategy, marketing, fundraising, and product development, equipping entrepreneurs with the
knowledge and skills needed to navigate the challenges of building and scaling a successful
startup.

In today's rapidly evolving business landscape, aspiring entrepreneurs, startups, and is the
investors encounter significant obstacles when it comes to finding the right connections and
resources to support their entrepreneurial endeavors. Existing platforms and networks often
fall short in providing the necessary features, accessibility, and community of the engagement
required for meaningful collaboration and growth. As a result, entrepreneurs struggle to
establish valuable connections, startups face challenges in gaining visibility is and traction,
and investors encounter difficulties in identifying and evaluating promising investment
opportunities. This prevailing gap in the ecosystem hampers the progress and success of
startups, restricts the flow of capital, and stifles innovation.

One of the key problems that entrepreneurs encounter is the difficulty of establishing Valuable
connections with like-minded individuals, industry experts, and potential Collaborators.
Existing networking platforms may lack the necessary focus, structure, or Critical mass to
provide meaningful networking opportunities. As a result, entrepreneurs Struggle to find
mentors, advisors, and partners who can provide guidance, expertise, and Support. By
providing a robust networking infrastructure and facilitating interactive discussions, virtual
meetups, and networking events, the proposed platform can bridge this gap and enable
entrepreneurs to build valuable relationships that propel their Entrepreneurial journey
forward.

2
1.2 Location:
HOUSE NO. 2307,
PATHROT
PATHROT
Amravati - 444803
Maharashtra – India

1.3 Company Services:

 Hassle-Free Booking Reserve a space with a few taps and skip the parking hunt.
 No-Surprise Pricing Compare prices, see your total cost up-front and choose your
parking.
 Lightning-Fast Parking Park your car in seconds.
 Saves Time Traditional parking takes a lot of time. In today’s new age, there is much
lesser space left, pre-book your parking and save time

1.4 Vision and Mission:

Park me safe was implemented on the problems that consumers faced during car
Parking. To provide a fluid experience in Car-Parking.

 Hassle-Free Booking Reserve a space with a few taps and skip the parking hunt.
 No-Surprise Pricing Compare prices, see your total cost up-front and choose your
parking.
 Lightning-Fast Parking Park your car in seconds.
 Saves Time Traditional parking takes a lot of time. In today’s new age, there is
much lesser space left, pre-book your parking and save time

3
1.5 Operational Structure:

The primary objective of parkmesafe.com is to create a visually appealing and intuitive

Design that enhances the user experience and promotes engagement within the underly
Entrepreneurial community. The platform will feature a modern and clean design
aesthetic, Incorporating user-friendly navigation and intuitive interfaces to ensure a
seamless Browsing experience. The design prospective of parkmesafe.com aims to
create an inviting and professional environment that encourages entrepreneurs,
startups, and investors to Explore, connect, and collaborate effectively. User
experience is a top priority for parkmesafe.com. The objective is to provide a user-
centric platform that caters to the specific needs and goals of entrepreneurs, startups,
and investors. The platform will offer personalized user profiles, customizable
dashboards, and interactive features that enable users to easily connect with like-
minded individuals, access Relevant resources, and discover valuable opportunities.
The user experience prospective of parkmesafe.com focuses on simplicity,
convenience, and responsiveness, ensuring that Users can navigate the platform
effortlessly and derive maximum value from their Interactions.

4
CHAPTER 2

CASE STUDY

5
2.1 Introduction

Travel planner websites have become essential tools for modern-day travelers. These
platforms offer a range of services, from flight and hotel bookings to itinerary planning and
destination recommendations.This project report focuses on implementing dynamic
functionality for the QTrip website's frontend using JavaScript. The goal is to enhance the
site's interactivity by utilizing REST APIs to fetch data from the backend and send data for
storage. Without the backend component, QTrip would be limited to static pages that cannot
retrieve or store data. To make the site publicly accessible, the frontend will be deployed using
Netlify, while the backend will be deployed using Render.
The main objective of QTrip Dynamic is to transform the existing static travel site, built with
HTML/CSS, into a dynamic site using JavaScript. The website will feature four key pages:
1. Landing Page: This serves as the starting page and showcases a list of cities where
users can explore adventures.
2. Adventures Page: Accessed by clicking on one of the city cards on the Landing Page,
this page presents the available adventures for the selected city.
3. Adventure Details Page: Users can access this page by clicking on a specific adventure
on the Adventures Page. It provides detailed information about the chosen adventure.
4. Reservations Page: Once users make reservations on the Adventure Details Pages, they
can use this page to view all their reservations.
To achieve these dynamic functionalities, JavaScript will be employed to build upon the
provided HTML and CSS files for QTrip. The JavaScript code will utilize REST APIs to fetch
data related to cities, adventures, adventure details, and reservations from the backend server.
Subsequently, this information will be dynamically manipulated in the HTML page's
Document Object Model (DOM), resulting in an interactive and user-friendly website."

6
Introduction to the important files
 backend/db.json - local database file used by the backend, to store all the data sent
from the frontend
 We make use of a library called lowDb to perform reads/writes to the database file
 backend/server.js - backend server in NodeJS and Express, with all necessary API
endpoints
 frontend/__tests__ - contains files related to the unit tests which helps to understand if
you got the requirements implemented correctly.
 The test files will be present in frontend/__tests__/modules
 frontend/conf/index.js - configuration file which specifies the Backend API endpoint
URL where the Frontend needs to connect to.
 Backend URL is the workspace IP along with its port - <workspace-ip>:8082
 This file will need to be updated every time the workspace is opened since you get a
new workspace IP every time
 frontend/css/styles.css - contains all the styles for the QTrip webpages
 frontend/modules - contains Javascript module files for the different QTrip
pages. These are the files you will be working with in this ME.
 frontend/index.html - HTML file for the QTrip Landing page
 the entry point HTML file that can be accessed at the default route "/"
 the HTML files for other pages within a frontend/pages folder as and when it’s get to
their respective modules

7
2.2 Problem Identfication:

Travel planner websites have become essential tools for modern-day travelers. These
platforms offer a range of services, from flight and hotel bookings to itinerary planning and
destination recommendations. However, like any technological solution, travel planner
websites are not without their flaws. In this article, we will explore some of the key problem
areas that users may encounter while using a travel planner website.

1. Lack of User-Friendly Interface:

One common issue with travel planner websites is the lack of a user-friendly interface. Many
platforms overwhelm users with excessive information, making it difficult to navigate and
find relevant details. Cluttered layouts, complicated menus, and confusing search functions
can frustrate users and deter them from using the site. A streamlined, intuitive interface is
crucial to ensuring a positive user experience.

2. Limited Destination Coverage:

Another significant problem is the limited destination coverage of some travel planner
websites. Users often find that these platforms focus on popular tourist destinations and
overlook lesser-known or offbeat locations. This limitation restricts the options available to
travelers who seek unique experiences. Expanding the destination database to include a wider
range of locations would greatly enhance the website's appeal and usefulness.

3. Inaccurate or Outdated Information:

Travel planner websites heavily rely on accurate and up-to-date information to provide
valuable recommendations to users. However, maintaining such information can be
challenging, resulting in inaccuracies and outdated data. This can lead to users making
incorrect bookings or encountering unexpected issues during their trips. Regularly verifying
and updating information is vital to ensure users can trust the website's recommendations.

8
 4. Inadequate Customization Options:

Many travel planner websites offer pre-defined itineraries and packages, but they often lack
sufficient customization options. Travelers have diverse preferences and requirements, and
they may want to tailor their itineraries according to their specific needs. Limited
customization can leave users feeling dissatisfied and unable to create personalized travel
plans. Providing more flexibility and customization features would greatly enhance the
website's appeal.

5. Lack of Comprehensive Reviews and Recommendations:

While travel planner websites often include user reviews and recommendations, they may not
always be comprehensive or reliable. Users may encounter a limited number of reviews,
biased opinions, or irrelevant recommendations. A robust review system that includes a wide
range of experiences and filters out fake or biased reviews would greatly enhance the
credibility and usefulness of the platform.

6. Poor Mobile Experience:

With the increasing use of smartphones and tablets, it is crucial for travel planner websites to
have a seamless mobile experience. However, some platforms fail to optimize their websites
for mobile devices, leading to slow loading times, unresponsive design, and difficulties in
accessing essential features. Given the growing number of travelers who rely on mobile
devices, improving the mobile experience is essential to attract and retain users.

7. Inadequate Customer Support:

When using a travel planner website, users may encounter various issues or require assistance
during their travel planning process. However, some platforms lack efficient customer support
channels, making it challenging for users to seek help or resolve their problems promptly.
Providing responsive customer support through multiple channels, such as live chat or email,
is crucial for ensuring user satisfaction.

9
2.3 Objective:

1. Design a visually appealing and user-friendly static travel website that showcases
various travel destinations and provides essential information to users.
2. Present clear and concise content about destinations, including descriptions,
attractions, accommodation options, and transportation details.
3. Create an intuitive navigation system with a well-structured layout to ensure easy
access to different sections of the website.
4. Implement responsive design principles to ensure the website is accessible and
visually appealing across different devices and screen sizes.
5. Optimize the website for search engines by utilizing appropriate HTML tags, meta
descriptions, and keyword-rich content.
6. Ensure fast loading times by optimizing images, minimizing code, and utilizing
browser caching techniques.
7. Validate HTML and CSS code to ensure compliance with web standards and cross-
browser compatibility.
8. Incorporate effective use of typography, color schemes, and imagery to create an
engaging and visually appealing user experience.
9. Integrate social media sharing buttons to encourage users to share their favorite travel
destinations with their networks.
10. Provide a contact form or email address to enable users to inquire about travel-related
information or seek assistance.

For Making it Dynamic using JavaScript:

1. Enhance user interactivity by incorporating dynamic elements into the website, such
as interactive maps, image sliders, and dropdown menus.

10
2. Implement a search functionality that allows users to search for specific destinations,
activities, or accommodations, providing instant results as they type.
3. Integrate a booking system that enables users to check availability, compare prices,
and make reservations directly through the website.
4. Create dynamic image galleries or slideshows to showcase destination photos and
attract users' attention.
5. Develop a user review and rating system, allowing travelers to share their experiences
and recommendations for specific destinations or services.
6. Implement real-time weather updates for each destination, providing users with
current weather conditions and forecasts.
7. Incorporate a currency converter to help users easily convert prices and currencies for
different destinations.
8. Enable users to create and save personalized itineraries by adding destinations,
activities, and accommodations, and allow them to share or print their itineraries.
9. Implement a newsletter subscription feature to keep users updated with the latest travel
deals, news, and destination recommendations.
10. Utilize JavaScript to add dynamic form validations, ensuring that user-submitted data
is accurate and complete.

11
2.4 Work Carried Out

The project aims to transform a static travel website built using HTML/CSS into a
dynamic and interactive platform by incorporating JavaScript. The objective is to
enhance user experience, improve functionality, and provide real-time information to
users, thereby making the website more engaging and useful for travelers.
Hardware/Software Implementation:
1. Hardware Requirements:
 The project primarily focuses on the software implementation and does not
require specific hardware components. Any computer or device capable of
running a web browser will be sufficient.
2. Software Requirements:
 Text Editor: A text editor such as Sublime Text, Visual Studio Code, or
Atom will be required to write and edit the HTML, CSS, and JavaScript
code.
 Web Browser: Any modern web browser like Google Chrome, Mozilla
Firefox, or Safari will be needed to test and view the website during
development.
 Web Server: While not mandatory for development, a web server may be
required for hosting the dynamic website in a production environment.
 Version Control Systems: Git
 Live Server: For viewing the dynamic Effects while creation of the website.

12
 2.4 Solution Provided

Solution Implementation:
1. JavaScript Integration:
 The existing static travel website, built using HTML/CSS, will be enhanced by
integrating JavaScript code.
 JavaScript will enable dynamic functionality by adding interactivity, real-time
updates, and data manipulation to the website.
2. Navigation and User Interaction:
 JavaScript will be used to implement interactive menus, dropdowns, and
navigation elements, enhancing user experience and ease of navigation.
 Event listeners will be added to handle user interactions, such as clicks, hover
effects, and form submissions.
3. Real-time Data Display:
 JavaScript will be utilized to fetch and display real-time data such as weather
information, currency exchange rates, or flight availability from relevant APIs.
 API integration will be implemented to retrieve data and dynamically update
the website content based on user queries or preferences.
4. Form Validation and Error Handling:
 JavaScript will be employed to validate user inputs in forms, ensuring that the
data submitted is accurate, complete, and meets specific criteria.
 Error handling mechanisms will be implemented to display meaningful error
messages and guide users in correcting their inputs.
5. Interactive Content and Media:
 JavaScript will enable the creation of interactive image sliders, carousels, and
galleries to showcase travel destinations and attract user attention.
 Users will be able to interact with images, zoom in/out, view captions, or
navigate through a collection of photos.
6. Booking and Reservation Functionality:
 JavaScript will be utilized to implement a booking system that allows users to
check availability, select dates, compare prices, and make reservations.

13
  Real-time updates will be provided on room availability, pricing, and confirmation
messages upon successful bookings.
7. User Reviews and Ratings:
 JavaScript will enable the integration of a user review and rating system, allowing
travelers to share their experiences and recommendations.
 Users will be able to submit ratings, write reviews, and view the average ratings
and comments for specific destinations or services.
8. Personalized Itineraries and User Accounts:
 JavaScript will facilitate the creation of user accounts or profiles, allowing users
to save and manage personalized itineraries.
Users will be able to add destinations, activities, and accommodations to their itineraries,
view or edit them, and share or print their plans.

14
2.5 Designing the Website:

Fig: Architecture of Qtrip Dynamic

15
2.5.1 Crafting the Landing Page

Start the Frontend application using Live Server

let’s get started by viewing the Landing Page. Follow the instructions below to do that.

1. Right click on the index.html file at and click the “Open with Live Server” option.
2. see the “Go Live” option at the bottom of the page change to “Port: 8081”.
3. can find your workspace IP address at the top of the workspace window (your
workspace IP will be different from the one in the image shown below)
4. Open a new browser tab and visit <your-workspace-ip>:8081/frontend to see the
rendered content of index.html

Fig: Landing page (mobile and desktop view)

16
2.5.2 Start the Frontend application using Live Server
Now that you have the overview of the code, let’s get started by viewing the Landing Page.
Follow the instructions below to do that.
1. Right click on the index.html file at /home/workspace/priyanshurocky5-
ME_QTRIPDYNAMIC/frontend and click the “Open with Live Server” option.
2. see the “Go Live” option at the bottom of the page.
3. workspace IP address at the top of the workspace window (your workspace IP will be
different from the one in the image shown below)
4. Open a new browser tab and visit workspace-ip/frontend to see the rendered content
of index.html

Fig: JSON data of Cities

As our application continues to grow, we have decided to organize our code into multiple files
known as "modules." Each module will contain either a class or a library of functions that
serve a specific purpose.

17
In the earlier days of JavaScript, there was no built-in module syntax at the language level.
This wasn't a problem initially because scripts were small and uncomplicated. However, as
scripts became more complex, the need for organizing code into modules arose, leading to the
development of various module systems and libraries to load modules on demand.
Some notable module systems, rooted in history, include:
 AMD: An ancient module system initially implemented by the library require.js.
 CommonJS: A module system created specifically for Node.js server.
 UMD: Another module system suggested as a universal solution, compatible with both
AMD and CommonJS.
Although these module systems have gradually become less prevalent, they can still be found
in older scripts.
Since 2015, a language-level module system was introduced into the JavaScript standard. It
has evolved over time and is now supported by all major browsers and Node.js. Therefore, we
will focus on studying the modern JavaScript modules.
So, what exactly is a module? In simple terms, a module is just a file. Each script is considered
a module.
Modules have the ability to load other modules and utilize special directives such as "export"
and "import" to exchange functionality and call functions between modules:
 The "export" keyword is used to label variables and functions that should be accessible
from outside the current module.
 The "import" keyword allows us to import functionality from other modules.

The Landing Page for QTrip is now ready. We’ll address the Adventures Page in this module.
Clicking on a particular city card on Landing Page will bring the users to this Adventure Page
which lists adventures for that city.
 The city id will be extracted from the URL and adventures for that city will be fetched
with a REST API request to the backend server
 The adventure cards will be populated and displayed from the contents of the API
response
 Clicking on an adventure card will take users to the Adventure Details page

18
There are also filters on the Adventures Page which can be used to filter the adventures based
on category or duration. These filters will be addressed in the next module.

Fig: Completion of Landing Page

2.5.3 Creating the cards for adventures grid page

The frontend/pages/adventures/index.html file represents the Adventures page. Let’s make

some observations here
1. The page has a header, footer and a navbar which are responsive
2. It has a section with a heading and paragraph at the top
3. It has a section where filters are specified, which are not functional yet
4. There is an empty section with id as data. This needs to get populated with the
adventure cards dynamically
5. JS methods have been imported from frontend/modules/adventures_page.js
6. There are a couple of global variables - adventures and filters which are used across
different sections of the page. Go through the comments to understand their usage.
7. The file invokes a number of methods for the page to be populated. Go through the
comments to understand their usage.

19
 8. The HTML file also has methods of its own. Check where these are being invoked. A
couple of these methods will be written by you in the next module.
o selectDuration()
o clearDuration()
o selectCategory()
o clearCategory()

Fetching the list of adventures for a particular city can be achieved by making a REST API
call to the Backend Server. You will have to modify the fetch Adventures() method to do this.
Some observations Populate the fetch Adventures () method to invoke the Backend’s REST
API using the configured backend Endpoint and the /adventures?city=<city_name> API
endpoint, where city name is the result from getCityFromURL() .Get the json data from the
Backbend’s response Understand the fields in the response, you’ll need to extract and use
them in the next milestone. There are multiple ways to view the response contents. You can
run the curl command from another terminal to check the server Response to this API Request.
You could do the same from the browser with your workspace’s ip address and correct API
endpoint. You can also check the response in the Network tab on Chrome Dev Tools when
your page makes this request. Return this json data.

Fig: Backend data

20
2.5.4 Iterate over Adventures and insert into HTML DOM
The method that needs to be filled in is addAdventureToDOM()
This method has to take a list of adventures as input and insert the adventure cards into the
DOM. Key things to note:
1. we have to loop through the list of adventures passed and for each adventure, create a
card
2. Use these fields from the adventure information to create the card
- id, category, image (URL), name, costPerHead and duration
3. Provide a link to the adventure cards such that users can click on a card to get to the
Adventure Details pages for that adventure. The link should be in this format
- detail/?adventure=<adventure_id> where adventure_id is extracted from the input.
4. Using these classes from the provided frontend/css/styles.css file
o category-banner
o activity-card
o activity-card img
5. Use divs, justification and flex as needed to create the cards shown below
6. The end result look like this and it is responsive

Fig: Inserting cards to DOM

21
DOM manipulation is a key aspect that JavaScript is good at. This makes pages dynamic and
capable of user interaction. With these modules you are now capable of making DOM changes
to the HTML pages. You will continue to explore some more capabilities of JavaScript in a
web application in the upcoming modules.

The QTrip site now has the first two pages, namely, Landing Page and Adventures Page
populated. With the visual aspects of these two pages, you have become familiar with some
of the key design elements used in today’s web pages.
The Adventures Page still has the filtering functionality to be implemented. You will address
that in the next module.

2.5.5 Creating filters for adventures

The Adventures Page now has the Adventure cards listed but the filters aren’t working yet. In
this module you’ll implement the filter functionality.

There are two filters - Category and Duration - which can either be specified individually or
together. The Category filter allows for multiple selection. Only Adventures that satisfy the
filters should be displayed. The selected filters should be displayed so the users know which
filters are selected. An option to clear the filters should also be provided.

The other functionality that needs to be supported is to persist the filters in the browser’s local
storage. This will ensure that the filters are retained even if the page is refreshed or opened in
another tab.
the method filterFunction() and filterByCategory(). filterFunction() is invoked
by frontend/pages/adventures/index.html before populating the adventure cards in the DOM,
so that only the adventures that satisfy the filter get displayed. Take a look at the different
places where the filter method gets invoked.

Some observations:

23
  There is a global variable called filters in the html file which is used across different
sections of the page. Refer to this html file to see the format of contents of this variable.
 filterFunction() is invoked for all filters. It could be a Category filter or Duration filter
or both. You have to check the filters provided as input and based on the type of filter,
invoke either filterByCategory() or filterByDuration() or both, from filterFunction()
 In this milestone you will only handle Category filter by invoking filterByCategory()
 The inputs provided to filterFunction() are filters and the list of adventures.
 If the category filter is present in the filters, extract the category list from it and pass
the list of adventures and category list to filterByCategory() which should return the
filtered adventures that belong to any of the categories in the category list.
 Finally, return the filtered list of adventures from filterFunction()
 If the filters provided as input is empty, return the entire list of adventures that was
provided as input.

2.5.6 Populating the filter pills

The highlighted section (in a green rectangle) in this snapshot is called "pills". The Category
filter can have multiple filters selected and the purpose of having this is to show the user what
filters have been selected

Fig: Showing the filter pills

24
2.5.7 Data Persistence

When users visit the QTrip website and specify filters for adventures, they should be able to
retain their filter selection even if the page is refreshed or the website is opened in a different
tab. The way to achieve this is through data persistence. The filter selection needs to be stored
in the browser’s memory. Read through the references provided below to understand the
various options available for data persistence, before you proceed further.We will be using
local storage to persist the filter selection.
 Use JSON.stringify() while it is being stored in LocalStorage. The consistency of storing
filter data into localStorage in saveFiltersToLocalStorage() since local storage can only
store string data.
 Use JSON.parse() to convert the string data from localStorage back to JSON format
in getFiltersFromLocalStorage() and return the data

Fig: Storing the data in Local Storage

Providing filters using a drop down is a common requirement on web pages. You have learnt
how to visually present filters and allow users to select them. Further, the user selection has
to be visible so user knows what’s been filtered. The next thing is to apply these filters every
time the selection changes using HTML and JavaScript to achieve the necessary result.

25
Several types of data persistence are available to choose from - session storage, local storage
and cookies. Each one varies in the purpose it serves. You have used local storage and its
methods to store and retrieve data, so that user experience is better.
The Adventures page is now complete, along with the Landing page. It can list all adventures
related to a city and provide filter functions for users to select adventures based on Category
and/or Duration. Further, clicking on a particular adventure card will take the user to the
Adventure Details page, which we’ll address in the next module.

2.5.8 Creating the adventure details page

The first two pages of QTrip are complete, namely, Landing Page and Adventures Page. Now,
it's time to address the Adventure Details Page. Users can get to this page by clicking on a
particular adventure card on the Adventures Page.
The Adventure Details Page contains details about the adventure along with an image gallery
on a carousel. There is a reservation panel where users can put in their details and make a
reservation. They can then view their reservations by going to the Reservations Page. We will
address the adventure details in this module and handle the reservations in the next module.

Fig: adventure detail page overview

26
2.5.9 Extracting Adventure details and inserting into the DOM

The method that needs to be implemented is addAdventureDetailsToDOM(). This method is

responsible for taking an adventure as input and inserting its details into the DOM. The key
fields to be used from the adventure details are the name, subtitle, images, and content. To
populate the DOM with the adventure details, we need to retrieve the corresponding HTML
elements by using their element ids. These elements will serve as the placeholders for the
adventure information.
It's important to note that there could be multiple images associated with the adventure. In
such cases, we need to iterate through the images, create a div element for each image, and
insert it into the photo-gallery section of the DOM. For the images, we should apply the
provided activity-card-image class from the frontend/css/styles.css file to ensure consistent
styling. Once the addAdventureDetailsToDOM() method is executed, the final result should
display the adventure details as intended. Specifically, the images should appear one below
the other in the photo-gallery section, creating an appealing visual representation of the
adventure.
2.5.10 Add bootstrap photo gallery
We see that the images in the gallery are one below the other. We need to add the images to a
carousel so that one image can be seen at a time and users can go through the images by
clicking on the arrows on the carousel. See the sections highlighted with green rectangles
below

Fig: Carousel View

27
To achieve the desired outcome, we will be updating the addBootstrapPhotoGallery() method.
The objective is to utilize Bootstrap's carousel component to enhance the HTML content of
the photo-gallery element.
Firstly, we need to update the HTML content of the photo-gallery element by integrating
Bootstrap's carousel component. This will involve making adjustments to the existing HTML
structure and incorporating the necessary Bootstrap classes and attributes. Detailed references
and documentation on the carousel component should be consulted for guidance.
Next, we will iterate through the images provided as input and create a div element for each
image. These div elements will be inserted into the carousel-inner element of the Bootstrap
carousel. This will allow for the dynamic generation of the image slideshow within the photo-
gallery section.
It is crucial to ensure that only one of the images (carousel-item) is set as active to ensure
smooth transitions between images. This can be accomplished by adding the appropriate class
or attribute to the respective HTML element.
By implementing these updates, the end result will showcase a responsive and visually
appealing photo gallery that utilizes Bootstrap's carousel component. Users will be able to
navigate through the images seamlessly, experiencing a smooth and responsive slideshow.

Fig: Implementing features in Carousel

28
Arranging images on a carousel is a key ingredient to make image galleries look good and
makes it easier for users to view them. I have successfully implemented an image carousel to
improve the aesthetics of the Adventures Detail page. By completing this module, you have
partially finished the Adventure Details page. The page looks pleasing and the users get to see
the details on a good layout. Still have to handle the "Sold out" message and the reservation
functionality, which you’ll get to in the next module. By adding support to make and view
reservations, QTrip functionality will be complete.

2.5.11 Adding support for adventure reservations

The Adventure Details page now needs to support reservations. In this module, you’ll enable
this using the reservation form on this page. Users will be able to make reservations and the
reservation data will be sent to the Backend server using a POST REST API call.

Also, I am adding functionality to the Reservations Page, which will fetch all user reservations
from the Backend server and display them using the appropriate date format.

2.5.12 Conditional rendering of reservation panel

The first method we address is conditionalRenderingOfReservationPanel(). Let's make some

observations and establish the steps to be taken.

We will utilize the available field of the input adventure to make a decision using an if-else
statement. If the adventure is available, we will hide the reservation-panel-sold-out panel and
show the reservation-panel-available panel. Additionally, we need to update the appropriate
element to display the cost per head using the costPerHead field of the input adventure. On
the other hand, if the adventure is not available, we will hide the reservation-panel-available
panel and show the reservation-panel-sold-out panel. It is important to consult the provided
references to understand the appropriate methods for hiding or showing a panel. By correctly
implementing these steps, the given test case will pass, indicating that the reservation panel is

29
rendered conditionally based on the availability of the adventure. Further, when the adventure
is not available (i.e. already booked), the Sold Out section should be shown and the
Reservation form should not be shown.

Fig: Conditional Rendering

2.5.13 Calculate reservation cost and update DOM

To achieve this, I modified the calculateReservationCostAndUpdateDOM() method. Consider

the following observations and steps to accomplish the task:
Firstly, take note that the onPersonsChange event in the HTML file triggers this method. Refer
to the HTML file to identify the user action that triggers the onPersonsChange event. Hence I
The method receives the adventure details and the number of persons as input parameters.It is
task is to update the DOM by locating the appropriate element and displaying the total cost
based on the inputs provided (number of persons and the required field from the adventure
details).
Ensure that you correctly implement this method in conjunction with the previous method.
Hereby accurately implementing these modifications, the specified test cases will pass,
indicating that the reservation cost is calculated and the DOM is appropriately updated based
on the user's input and adventure details.

30
 Fig: Calculating Cost of Reservation

2.5.13 Capturing data from reservation form and make POST request
using Fetch API

Implementing the captureFormSubmit() method, following these steps:

Firstly, you need to capture the form data when the user submits the form. This can be done
by adding an event handler to the form with the ID "myForm."
Next, will make a POST API call to send the captured form data to the backend server using
the Fetch API. Construct the API request using the appropriate URL, which consists of the
configured "backendEndpoint" and the "/reservations/new" API endpoint.
The request body should include four properties: "name," "date," "person," and "adventure."
Extract the "name," "date," and "person" values from the form data. The "adventure" property
should contain the ID of the current adventure.
After sending the API request, you will receive a response from the server. Check if the
reservation was successful by examining the response. If it was successful, display an alert

31
with the message "Success!" and refresh the page to provide a fresh booking experience for
the user.
On the other hand, if the reservation fails, show an alert with the message "Failed!" to inform
the user about the unsuccessful booking attempt.
It's important to note that this is the first time you'll be making a POST request in this module.
Previously, only GET requests were used.
If the backend server is operational and responds with success, you should see a popup
window similar to the example provided when a user makes a reservation. The exact
implementation may vary depending on the programming language or framework you are
using.

2.5.14 Show banner if adventure is already reserved

The method to be addressed is showBannerIfAlreadyReserved(). This banner needs to show

up if the adventure has been reserved previously.
 By using the reserved field of the input adventure to make the if else decision (this
field gets set on the Backend server when the reservation is successful)
 If the adventure is reserved, show the reserved-banner, else don’t show it.

Fig: Showing the banner if already reserved

32
2.5.13 Fetching the reservations from the backend and Displaying the
reservations

To fetch the details of all reservations, modify the fetchReservations() method to make a
REST API call to the Backend Server. Follow these steps:
1. Make an API request by invoking the Backend's REST API using the configured
backendEndpoint and the /reservations/ API endpoint.
2. Retrieve the JSON data from the response received from the Backend Server.
3. Take note of the fields in the response and understand their significance as you will
need to extract and utilize them in the next milestone or task.
4. Return the JSON data obtained from the Backend Server, which includes the details
of all the reservations.
By implementing these steps, you will be able to actively fetch the reservation details by
making a REST API call to the Backend Server in the fetchReservations() method.

Fig: Reservation data in JSON View

In the development of the Reservations page, a crucial method called

addReservationToTable() needs to be addressed. This method aims to present the fetched
reservations in a clear and organized table format. By following a set of key observations, the
reservations can be dynamically rendered on the page, providing users with a comprehensive
overview of all reservations made.

33
Conditionally Render Banner or Reservation Table: To begin with, it is important to
conditionally render either the "no-reservation-banner" or the "reservation-table-parent" based
on whether the input reservations are empty or not. This ensures that the appropriate visual
representation is displayed, providing clarity to the user.
Iterate Through Reservations: Next, a loop should be implemented to iterate through the input
reservations. For each reservation, a row should be dynamically inserted into the reservation
table. The table fields should match the ones indicated in the table header on the Reservations
page, maintaining consistency and clarity.
Utilize Date Functions: The built-in Date functions should be utilized to present the "Date"
and "Booking Time" fields in the specified format. It is crucial to refer to the comments in the
method for guidance on formatting these fields correctly. Additionally, setting the locale to
"en-IN" ensures that the test cases pass successfully, providing accurate date and time
representations.
Include Adventure Link Button: Incorporate a button using the provided "reservation-visit-
button" CSS class. This button should serve as a reference link, directing the user to the
respective adventure page upon clicking. To create the reference link, the adventure ID should
be used, allowing for a seamless and intuitive user experience.
Note on Reservation Scope: It is important to note that these reservations are not specific to
individual users but represent the overall reservations made. This broader perspective ensures
that the displayed reservations offer a comprehensive overview of the reservation activity.

Fig: Reservation View

34
Forms are an important component on websites and a good skill to have under the belt.POST
request is used to send data to the backend for the first time in QTrip. Knowing the difference
between when to use GET vs POST is key to getting the REST API implementations
right. completed all the functionality required for your Qtrip website - Landing page,
Adventures page, Adventure Details page and Reservations page.The only part remaining now
is to move from a local frontend and backend to a publicly deployed frontend and backend.

Note on Reservation Scope: It is important to note that these reservations are not specific to
individual users but represent the overall reservations made. This broader perspective ensures
that the displayed reservations offer a comprehensive overview of the reservation activity.

2.6 Deployment:

QTrip website is ready with all the necessary content. backend running on the VM and were
viewing the frontend (website) using the Live Server and your VM’s IP address. Therefore is
But this cannot be shared with others since the VM will be shut down after a while. Hence is
To be able to share this website with others and to be able to access it publicly, it needs to be
deployed. So to do this using render and netlify. Render is the platform where the deployment
of the backend and netlify is the platform where frontend will be deployed.

2.6.1 Backend deployment to Render:

To deploy this Backend publicly so that it can be used by a publicly deployed Frontend.And
To deploy the Backend to Render. Render is a cloud service to deploy your apps and websites.
 Starting by signing in to Render with Google Sign-in.
 In the dashboard, click "New +" button then select the second option which is Web
Services.
 In the Create a new Web Service, click on Connect GitHub, here there will be a option
of selecting the GitHub repository which contains your project.
 Sign in to the GitHub account.
 Then Render would ask for permission to access the GitHub repository, click on
Authorize Render.

35
 Here you select "All repositories", just for simplicity, or we can also hand-pick the
repositories we want to deploy. Then click on Install.
 You will be redirected to the dashboard, click "New +" button then select the second
option which is Web Services. Then select the repository which is to be deployed and
click on Connect.
 almost done, there will be some logs that will be visible upon successful deployment.
 now hit the API endpoints by using the below provided URL.

36
Fig: Log of Successful Deployement

37
2.6.2 Frontend deployment to Netlify:

The QTrip static website is ready. Now, let's deploy it publicly so that it can be shared with
others. We will be using netlify to do the deployment, which is a platform that can be used for
this purpose.

1. Configure the frontend/conf/index.js to point to the backend URL.

2. Sign up on https://www.netlify.com/. either your email id or your GitHub account can
be used to sign up.
3. Login to netlify from your workspace terminal using netlify login. It will prompt you
with a link to confirm your identity.
4. Ctrl + Click on the link shown in the Terminal, to open it up in a new tab on your
browser. Click on Authorize to provide permissions for Netlify CLI to access your
account. a confirmation message on your terminal will be shown.
5. Now run the command netlify deploy from the frontend directory to deploy the
website. It will prompt you for a couple of answers as shown below. Fill it in and
provide a name for your site. The result will show a Website Draft URL, which is a
draft URL. You can Ctrl+Click on the URL and verify the contents.
6. Once done, now we can run netlify deploy --prod to deploy the website to the actual
URL which can be shared publicly. Ctrl + Click on that URL to see the website and
make sure everything is working. This URL can be shared publicly with others.

38
39
40
2.7 CONCLUSION:

While travel planner websites have revolutionized the way people plan their trips, there are
several areas that require improvement. Enhancing the user interface, expanding destination
coverage, ensuring accurate and up-to-date information, offering more customization options,
providing comprehensive reviews and recommendations, optimizing the mobile experience,
and implementing efficient customer support channels are key areas that need attention.
Addressing these issues will not only enhance the user experience but also establish the travel
planner website as a reliable and indispensable tool for travelers worldwide.
The system provides a user-friendly and interactive interface that automates and streamlines
banking operations, including account management, transaction tracking, fund transfers, bill
payments, and loan processing. The system improves the accuracy and speed of banking
services, reduces wait times, minimizes errors, and increases customer satisfaction.

The project's methodology, which involves a combination of qualitative and quantitative

approaches, ensures that the project is well-structured, executed in a timely manner, and
achieves the desired outcomes. The methodology involves requirement gathering, system
design, system implementation, system testing, and results evaluation.

By incorporating JavaScript into the static travel website, the project aims to transform it into
a dynamic and interactive platform. The integration of JavaScript will enhance user
experience, provide real-time information, enable user interactivity, implement booking
functionalities, and create personalized itineraries. This will ultimately make the website more
engaging, user-friendly, and valuable to travelers.

The learnings included:-

 Linking of JavaScript to HTML
 Invocation of REST API and parsing the data in the response
 Updating the DOM of an HTML page
 Converting a static website to a dynamic one by adding methods that can react to user
interaction and events

41
  Local storage to improve user experience
 Using JavaScript libraries and inbuilt methods
 Some key components needed for websites including the layout, stylesheet, form,
table, bootstrap, carousel, responsiveness, links etc.
 Deployment using Netlify and Render

The project's methodology, which involves a combination of qualitative and quantitative

approaches, ensures that the project is well-structured, executed in a timely manner, and
achieves the desired outcomes. The methodology involves requirement gathering, system
design, system implementation, system testing, and results evaluation.

By incorporating JavaScript into the static travel website, the project aims to transform it into
a dynamic and interactive platform. The integration of JavaScript will enhance user
experience, provide real-time information, enable user interactivity, implement booking
functionalities, and create personalized itineraries. This will ultimately make the website more
engaging, user-friendly, and valuable to travelers.

42
REFERENCES

43
 REFERENCES:

 Research of key approaches to responsive website development and their practical

application -
https://www.researchgate.net/publication/311960073_Research_of_key_approaches_
to_responsive_website_development_and_their_practical_application
 Ali Darejeh and Dalbir Singh, “a review on user interface design Principles to increase
software usability for users with less computer literacy “, 2013 1549-3636.
 Freecodecamp.org
 Bootstrap.com
 Duckett, Jon. Accessible XHTML and CSS Web Sites Problem Design Solution,
Wrox, 2005.
 Gilbert, Regine M. Inclusive Design for a Digital World: Designing with Accessibility
in Mind (Design Thinking) , Apress, 2020.

44