# **Group 4 FINAL PROJECT**
#### Weikang Xiong, Xiaomeng Yang, Yilin Zhang, Chenyu Yan

#### codepen link: https://codepen.io/cy2535/collab/mdrVwgz

Our website: Travel Buddy
Problem definition: Users want to look for travel inspirations and find people to travel with.

## **<1 --INTRO-- Weikang Xiong>**
The intro page comes with a menu section, a welcome section and a slideshow section. When users first click into our website, they will be greeted with a picture that has medium opacity and a welcome note that gradually fades in. Users can navigate the website using the menu bar on top. Clicking on each menu button will help users jump to the corresponding page. At the bottom of the intro page, there is a slideshow of user feedback.

#### Reflection
When desiging the website, we aimed for simple layout and easy navigation to help users find what they need efficiently. Therefore, we designated each page for a specific function. The intro page serves as a user guide that promotes the website and introduces various features to new users. The gif picture and the slideshow both give a sense of moving forward, which echoes the central idea of our website - travel. When coding the page, I drew inspirations from various sources such as W3schools and other similar travel websites. For me, having an initial visual skecth was very helpful, because I was able to conceptualize my ideas and visualize the logic relationships bewtween different items.

## **<2-- QUOTE INSPIRATIONS --Xiaomeng Yang>**
This interactive function is designed to inspire users with a randomly selected quote about travel. It's like opening a fortune cookie without knowing what could be inside.Users can click the button that says "inspire me!" for a random travel inspiration quote and keep doing it for new quotes.

#### Reflection
During our group's design process we refered to our past projects and tinkers,and that helped us generate new ideas of interaction functions that we know we could execute. I kept going back to the FCC units while coding the javascript of this function, it was helpful to refresh my memory and apply learned knowlege in our designs.

## **<3-- COLOR INSPIRATIONS - Yilin Zhang>**
The color inspirations section design for people who want to travel but don’t have a clear travel plan or destination. In this section, users can choose their “mood” color. We decided to make it as a flip card, on the back of the flip card, we provided different travel suggestions, such as 10 ocean vacation ideas perfect for the holiday season. 

#### Reflection
Travel buddy finder is a really helpful website, we come up with lots of different functions and ideas for the website. After we have the rough ideas, we use figma to draw the wireframe. Wireframe helps us to build the website structure, during the design process we keep updating the functions, want to make the website more useful.

## **<4-- TRAVEL BUDDY FINDER --Chenyu Yan>**
user input information to find travel buddy

For the travel buddy finder section, the main idea is to provide a platform for users to interact and find their travel buddies. The first section is where all the messages posted by other users who are looking for their buddies. Some functionalities here are: you can get these people’s contact information by clicking on the contact button or you can choose to join the team with the updated number to indicate the capacity. A full team will have a solid border while an empty one will have a dotted border. Also, people can filter the posts by destinations.

The second section is where you can put your requirements and post them on the previous section. Information, such as name, destination, budget, days, number of people, note, and contact information will be asked to input to generate the post. Filter would also be responsive to your post.

#### Reflection
For the travel buddy finder, previous demonstrating example, such as the todo list, is really helpful. Also, debug is using all the time to figure out what is the problem in the code. With these practices, it is more comfortable to code in javascript. If there are more time for this, format could be something to improve so that it is more visually pleasant.

# **Initial Visual Sketch:**