I made an array called destinations which contained an id, name, continent, description, cost and an image. I needed this array because I wanted to print out these objects in the array on my page using Vue.

I also made a hotel array because I wanted a div to print out a hotel object with an id, name, description, cost and image.

I finally made a diet array because I wanted this travel applications to consist of users booking a destination, reserving a hotel, and ordering a meal prep.

This div prints out all of the objects in the destinations array by using the Vue v-for loop. After looping through all of the object in the destination array. I chose to print out the destination image, name, continent, description, and cost. This is almost the exact same code for the hotel div and the diet div.

When making the travel application, I wanted the user to have a separate page for the whole "cart". So Vue allows you to switch between different pages and this div shows that if the page is on reserve then two button will be display while the item in list will be printed out on the reserve page.

This is what the reserve page looks like when the user inputs a destination, hotel, and meal.

This code function the same as the reserve page, but this page is the main page which prints out all of the destinations, hotel, and diet. It also prints out the same buttons and a dropdown list to search for what continent the user wants to travel to.

This is what the travel aka "Main Page" looks like. This page has everything that the users can pick.