# Summer B - Tinker 1
#### Maria, Xi Liao, Alex & Rainy
---
## Part 1B Slide 2
Hands-On Activity:
- Create and setup a new Codepen Pen
- Create the My Best Friend (madlib) demo

Extra (Reach)
- Create a more sophisticated template with interpolation. (i.e. h1, p, span, table, etc.)
- Used click counter to up the number
- Find a way to interpolate data from inside Objects and Arrays.
- All data pulled is date from inside an object
- Find ways to incorporate computed properties.
- Attempted to try and use the computation but it wouldn't allow the sscript to work (meaning it put {{dataReference}} instead of the value)

`let app = new Vue({
  el:"#app",
  data: {
    carName: "Tessie",
    nameFriend: "Carlene",
    looksLike: "goodt",
  },
  computed: {
    number() {
			if (this.value > 15) {
				return true;
			} else {
				return false;
      }
    },
});

Questions:
- Can you describe the structure of Vue component?
> The components of Vue are meant to be resuable code that can work for various parts of your page for functionality purposes. It is a way to define "something" and have it work continuously while also acting as its own function. The structure of Vue component includes ``` Vue.component(insert components name. {"insert vue instance"})```. Instances are things like `el`, `data`, `methods`, `template` and `compute` that will tell the component how to function.

- What is the relationship between the template and data when interpolating?
> The data is a way to reuse the
same instances throughout different areas of your page template. Using the double curly brackets {{}}, you are able to put a defined data's object. For example,is you have a data object of `number: 0` then anywhere in the template where you put {{number}} the number 0 will populate on the page. So if you have `<p>today the temperature is {{number}} degrees</p>`, on the HTML'S DOM side it will read `today the temperature is 0 degrees` and this will continue to happen wherever you place the {{number}}, even if it is resused it multiple parts of the template. When the data's object is changed, it will also change the templates return. So from our previous example, if we changed the `number: 0` to `number: 2` then the new way the sentence would read is `today the temperature is 2 degrees`. The data's objects works as a way to inerst certain information into the template.

- What are the key syntactical features needed to interpolate?
>Some key syntactical features that are needed to interpolate are what you want the data to return when written inside of the {{}}. There are several ways to have the data like having one distinct return (as in it will always return that string/ number). You must also have a way to link it to the DOM. This is where the `el` instance can reference the id within the HTML so it knows where to reference the data. It is also necessary to have the {{}} when calling the data object into the template with the correct data reference within the {{}} like `{{}}`. Finally the data reference must have a value to it so that when it is input it is called it have a value to it.

## Part 1B Slide 8
Hands-On Activity:
- Create computed properties methods:

{isShown: function () {
        this.isShow = !this.isShow;},
            random: function () {
                this.score=Math.floor(Math.random() * 100); // this.score = **missed =/ used return this.score.Math.random
        }
}

- Use data/computed properties to manipulate class

<span v-if="score%2==0">
    <p :class='{even:isShow}'>Even</p>
</span>
<span v-else>
    <p :class='{odd:isShow}'>Odd</p>
</span>

- Extra (Reach):
- Try creating an interesting computed property based on Math.random()

methods: {
random: function () {
    this.score = Math.floor(Math.random() * 100);
    }
}

- Try creating a computed property based on multiple data properties of different data types.
- Apply a class if a numerical value is greater than 5
- I created one if a the reminder is euqal to zero then change the class to the green border outlook, if else, which is odd number, then change the class to green border.
- Full code below:

<style>
        .odd {
            border: 3px solid red;
        }

        .even {
            border: 3px solid green;
        }

        button {
            font-size: 25px;
        }
    </style>
<body>
<div id='gd'>
        <h1 style="text-align:center;">
            <span><strong>{{score}}</span><span> is ...</span>
            <span v-if="score%2==0">
                <p :class='{even:isShow}'>Even</p>
            </span>
            <span v-else>
                <p :class='{odd:isShow}'>Odd</p>
            </span>
        </h1>
        <button @click='random'>GO</button>
    </div>
</body>
<script>
let app = new Vue({
        el: "#gd",
        data: {
            score: '0',
            isShow: true,
        },
        methods: {
            isShown: function () {
                this.isShow = !this.isShow;

            },
            random: function () {
                this.score = Math.floor(Math.random() * 100); // this.score = **missed =/ used return this.score.Math.random
            }
        }
    });
</script>

Questions:
- How does class-binding work?
>Class-binding allows us to align an element's class list and its inline styles. For example, in the template below, the div class of 'pet' is bound to the class list of data pertaining to whether the data has been adopted or not. Similarly, the image of the pet is bound to the url of that picture.

template: `<div class="pet" :class="{ adopted:petdata.isAdopted }">
		<P>Name: {{ petdata.name }}</P>
		<img v-bind:src="petdata.imgURL">
		<p>Age: {{ petdata.age }}</p>
		<p>Days Listed: {{ daysListed }}</p>
		<p>Adopted: {{ isAdopted }}</p>
	</div>`

- How would you decide if something should be a data property, or a computed property?
>A data property is information that is stored. A computed property, on the other hand, is a property that calculates and returns a value. In deciding whether something is a data or computed property, it is important to look at what characteristics of the property is changing. For instance, in the pet store example, the daysListed is computed as this data changes as each day passes.

daysListed() {
			if (this.petdata.dayUnlisted) {
				return this.petdata.dayUnlisted - this.petdata.dayListed;
			} else {
				return this.daynum - this.petdata.dayListed;
			}

- What is the relationship between the Data-state, View-state, and CSS?
>Data-state is when the information lies in a concrete set. These values can be referenced to and attributed in Javascript or CSS. View-state is when the data is displayed and visible, which could be on a single page or multiple pages. CSS allows us to take the infromation from the data-state and portray it in view-state.

## Part 1B : Slide 12

- Define and Register custom components

>Our group explored the use of custom components by first exploring the TODO #app, and later the Pet Store #app. The custom component is the reusable structure to help shape the way the #app is organized both on the user side, and the programmer side. The outward facing structure which the user interacts with is the representation of the custom component on the programmers' end.

The component is directed by the methods, data, elements,computed, and template. Based upon the organization of the component, it will register data differently. By organizing the data with properties like eg."firstName" and "lastName", the component will determine where and how to store the information, cacheing each interaction.

- Create/Instantiate custom components

> First step is to create register a component and the simbiotic counter part/ definition. After creating the component syntax in JS with a "name", reference the same "name" in the HTML interpolation.

- Create template

> The template portion of the Vue #app is the skeleton of the component. The dog {{ dataHere }} swimming. The template is the format which houses the double curly braces. Creating a template for a Vue component must involve some forethought about the purpose of the app and what data we are trying to account for.

html
<div id ="app"> 
    <p>
        I am {{ isHungry ? " : " }} . 
    </p>
    <p>
    I had a {{ breakfastSize }} breakfast.
    </p>
</div>

js`
let app= new Vue ({
    el: "#app",
        data:{
 isHungry: "so full!",
 ateBreakfast: true,
 breakfastSize: large,
     } 
 });
`

*When creating the template, the ternary operation is used for boolean.*

- Use props

> The properties are the ways that we communicate and pass information from the parent component to the child component. The child component. When creating custom components, we use camelCase in the JS and kebab-case for the HTML. We have to define the properties in HTML by creating an object which defines the camelCase as kebab-case for the computer to read.

<div id="app">
  <welcome-message :welcome-message="welcomeMessage">
  </welcome-greeting>
</div>

Vue.component ("welcome-message", {
    props: ["welcomeMessage"],
    template: `<div>
      <p> {{ welcomeGreeting }}</p>
    </div>`
});

var app = new Vue({
  el: "#app",
  data: {
      welcomeGreeting: "Welcome to New York!"
   }
});

Questions:

- Explain the difference between defining, registering, and instantiating a custom component?
>Defining a custom component is the first step to creating a Vue component. For example, in the Pet Store Vue video, the following Vue component is created.

>Vue.component("pet", {
	props: ["petdata", "daynum"],
	data() {
		return {};
	},
	computed: {
		isAdopted() {
			if (this.petdata.dayUnlisted) {
				return true;
			} else {
				return false;
			}
		},
		daysListed() {
			if (this.petdata.dayUnlisted) {
				return this.petdata.dayUnlisted - this.petdata.dayListed;
			} else {
				return this.daynum - this.petdata.dayListed;
			}
		}
	},
	template: `<div class="pet" :class="{ adopted:petdata.isAdopted }">
		<P>Name: {{ petdata.name }}</P>
		<img v-bind:src="petdata.imgURL">
		<p>Age: {{ petdata.age }}</p>
		<p>Days Listed: {{ daysListed }}</p>
		<p>Adopted: {{ isAdopted }}</p>
	</div>`
});

Regitering a custom componenet is giving the component a name, such as "pet". Instantiating a component involves connecting connecting the div from html to Vue.js. For instance, the pet store video demonstrates:

let app = new Vue({
	el: "#app",
	data: {
		user: "rd2705",
		day: 100,
		pets: [
			{
				name: "Fido",
				imgURL:
					"https://www.adorama.com/alc/wp-content/uploads/2018/02/shutterstock_591809333.jpg",
				age: 2,
				dayListed: 1,
				dayUnlisted: 5
			},
			{
				name: "Woofy",
				imgURL:
					"https://www.adorama.com/alc/wp-content/uploads/2018/02/shutterstock_591809333.jpg",
				age: 5,
				dayListed: 4,
				dayUnlisted: null
			}
		]
	}
});

- Explain the difference between the root and custom template.

>When creating a custom template, it should be nested within a root instance created with a newVue. You can avoid creating a new root for each custom component by wrapping it in a parent element. A custom template is the series of fill in the blanks which can be wrapped in a parent.

- What are the crucial ideas of props?
>Props allows us to pass data from Vue.js directly to HTML. Data types include string, number, boolean, array, object, and many more. In other words, by using props, we are able to pass data to a component. For example, we can use props to pass data to child components or to parent components. This enables us to write more concise code while also creating loops of information.

---

## Part 1A Slide 13
Hands-On Activity:
- Play with the todo app
- Use vue devtool and change the data values
- a todo object task and done
- the todos array by adding:{ "task":"snack", "done":true }
- Use the elements tool in inspector and observe the DOM before and after you change the data

Questions:
- Before you make changes to the data, what do you infer will happen?
>I anticipate that by declaring a todo object task as "done", the activity will be striked through. If I add a task called "snack" and declare it as done, the to do list will add snack but will have it stiked through as the task has been completed.
- After you change the data, what happened to the HTML?
>
>The HTML code has not changed only the data inputted has changed. Because the HTML code has the double curly braces which allows for updated data to be interpolated, the data automatically changes without the coder having to manually change the HTML.

 <li v-for="todo in todos" v-bind:class="{ done:todo.done }" v-on:click="toggle(todo)">
      {{ todo.task }}
    </li>
  </ul>

  <p>{{ totalTasks }} total tasks.</p>

- In the CODE, what do you think is the purpose of: el, data, computed, template, and methods?

let app = new Vue({
  el: "#app",
  data: {
    todo: { done: false, task: "" },
    todos: [
      { done: true, task: "Have breakfast" },
      { done: false, task: "Have lunch" },
      { done: false, task: "Have dinner" }
    ]
  },
  computed: {
    totalTasks() {
      return this.todos.length;
    }
  },
  methods: {
    toggle(todo) {
      todo.done = !todo.done;
    },
    addItem() {
      this.todos.push(this.todo);
      this.todo = { done: false, task: "" };
    }
  }
});

>- In the CODE, el calls forth the div component from the DOM, which in this case is #app.
>- Data is all the information that should be used and/or displayed. Using data in Vue also allows us to to track changes to a particular property that we would prefer to be reactive. For example, while the name of tasks show up, the done nature of these tasks do not signify false or true, instead whether these tasks are completed or not are shown visually as striked through or not.
>- Computed properties in Vue has some similarities to data in that we are able to define properties, but computed also has its own logic when it is cached based on its dependencies.
>- Template, as its name suggests, uses a HTML-based template syntax that allows us to bind the rendered DOM to the underlying component's data.
>- Methods are essentially functions that are connected to an object. In this case, the methods toggle the state of todos and add items to the to do list.