# **Final Notes**
# Group 15

**HELEN SONG (hs3288), CHENYOU WU (hw2864) & ERIC DIOS (emd2206)**

Codepen Link: https://codepen.io/hs3288/collab/qBpzQgG?editors=1100

Firestore Collection: https://console.firebase.google.com/u/2/project/mstu5013-playground/firestore/data/2Fpins~2F2p0oCllEBN3oaxtKTofA

*Our application enables users to gain insight to other cultures by developing a better understanding of how other people see the world. Our application begins with the user entering some demographic and personal identity information which will provide others with an understanding of the users background and therefore potential perspective on the world. Users are then prompted to choose a checkbox and its corresponding theme which contains three different words for them to select from and write about. (IE. Food-noodles, hobbies-music.
*The users description will be displayed on a card which also includes their background information. This card will appear alongside all other cards which describe the same word. Through this users can see multiple interpretations of the same word from other users of diverse backgrounds.

# Top 3 Design Concepts
1. User information and input linked to the Firebase
2. V-modeled/V-For Themes
3. Component Card which includes Userdata and Definition of Word from their selected Theme

---

**User interaction flow:**
1. Provide User Information (Uploads to Firebase)
2. Select word theme (Via Checkbox)
3. Choose specific word (Via Radio Buttons)
4. Input user's interpretation of that word and submit (Uploads to Firebase)
5. View cards of how other users come up with the same word

**Initial Inpiration for the layout:**
Pintrest:

#### **Initial Notes**
*Establishing the structure of this page became increasingly difficult as we looked to have a linear plan on how to accomplish our endstate.
*We spent nearly as much time planning this site out as we did coding it.

#
# Basic Stucture: (Sketches)
- We plan to use 3 to 4 web-pages to create an cohesive user experience.
- Page 1:
- 
- Page 2:
- 
- Page 3:
- 

- For the coding part. we started off buiding and testing all the pages' core function before seperating them into three pages: 

---
# Data Structure:
In firebase:

Local data in codepen:

data() {
    return {
	    newPin: {
		    username: "",
			wordInterpreted: "",
			language: "",
			culture: "",
			location: "",
			input:""
			},
		pins: [],
		currentPin: {},
		emotions: ["Happy", "Sad", "Angry"],
		foods: ["Meat", "Noodles", "Drinks"],
		hobbies: ["Sports", "Books", "Music"],
		emotionChecked: false,
		foodChecked: false,
		hobbiesChecked: false,
		currentWord: "",
		newWord:"",
		newAction:"",
		onPageOne: true,
		onPageTwo: false,
		onPageThree: false
	};
},

# Relevant Code Snippets
## *HTML*

The Login Form (Page 1)

<form>
    <div>Username </div>
	<input type="text" placeholder="Username" v-model="newPin.username">
	<div> Languages</div>
	<input type="text" placeholder="Languages you speak" v-model="newPin.language">
	<div> Cultural Background</div>
	<input type="text" v-model="newPin.culture" placeholder="Your cultural identity">
	<div> Location</div>
	<input type="text" placeholder="Where are you?" v-model="newPin.location">
	<br>
	<button class="btn btn-light" style="border: 2px; border-style: solid; margin: 5px;" type="button" @click="update"> Submit </button>
</form>

The Theme Checkboxes (Page 2)

    <label><input type="checkbox" v-model="emotionChecked"> Emotion </label>
	<label><input type="checkbox" v-model="foodChecked"> Food </label>
	<label><input type="checkbox" v-model="hobbiesChecked"> Hobbies </label>
	<div v-if="emotionChecked">
	    <emotion-comp @select="updateWord" :emotion="emotion" v-for="emotion in emotions"></emotion-comp>
	</div>
	<div v-if="foodChecked">
		<food-comp @select="updateWord" :food="food" v-for="food in foods"></food-comp>
	</div>
    <div v-if="hobbiesChecked">
		<hobby-comp @select="updateWord" :hobby="hobby" v-for="hobby in hobbies"></hobby-comp>
	</div>

## *JS*

methods: {
	addPin() {
			let docRef = doc(pinsRef);
			setDoc(docRef, {
				id: docRef.id,
				username: this.newPin.username,
				culture: this.newPin.culture,
				language: this.newPin.language,
				location: this.newPin.location,
				input: this.newPin.input,
				wordInterpreted: this.currentWord,
			});
			this.newPin.input= "";
			this.onPageTwo = false;
			this.onPageThree = true;
		}

The Pin Component (Page 3)

App.component("pin-comp", {
	props: ["pin"],
	template: `
    <div style = "display: inline-block; border-width: 2px; border-style: solid; height: 400px; width: 200px; margin: 10px;"> 
	    <div style = "postion: relative; ">
            <b>My interpretation about {{pin.wordInterpreted}}:</b> {{ pin.input }} 
	        <b>User:</b> {{ pin.username }} <br>
	        <b>Location:</b> {{ pin.location }} <br>
	        <b>Cultural Background:</b> {{ pin.culture }} <br>
	        <b>Language:</b> {{ pin.language }} <br>
	    </div>
	</div>`

## CSS
https://codepen.io/YinkaEnoch/pen/PxqrZV (Heavily Referenced)
W3Schools.com and some of our older pens.

# Final Reflection
*This assignment really made us think about what we learned the last few weeks and how to employ the lessons to the requirements of a functional webpage. We spent quite a bit of time planning the page out and thinking about it computationally so that it became more clear what we would have to do and where we would have to do it. Especially, we struggled, and learnt the interactions between the local data in codepen and how we can use them to update the database.

We enjoyed completing this project and think that working on a page which could have actual use in the educational environment made it more fun to work on even as we found ourselves frustrated making some things work and look the way we wanted them to.