# Tinker/Challenges - Slides Vue 1B
#### By An-Ting Hsiao, Yucheng Pan, & Patrick Sunwoo
#### MSTU 5013
---
### Activity 1: BASIC VUE BOILERPLATE
* **Our Solution Link**: https://codepen.io/ps3022/pen/VwbwyJN
* HTML

        <div id="app">
          <p>
            <h1>Wilkommen, bienvenue to {{cabaretName}}'s Cabaret!</h1>
          </p>
          <p>
            <h3>Persxnal Info at {{ age }}</h3>
          </p>
          <p>
            <span>The instructor's name is <strong><u>{{ firstName }}</strong></u>.</span>
            <span>{{ firstName }} is {{ isFun ? "fun" : "boring af"}} at the ripe old age of <strong><u>{{ age }}</u></strong> years old.</span>
            <span><u><em>{{ rando }}</em></u> years from now, {{ firstName }} will be <u><strong>{{ ageAdd }}</strong></u> years old. OMG!</span>
          </p>
          <p>
            <h3>Relationship Info about {{ firstName }}</h3>
          </p>
          <p>
            <span>His partner's name is <strong><u>{{ bfName }}</u></strong>.</span>
            <span v-bind:class="{ blue: bfAge }">{{ bfName }} is <em><strong><u>{{bfAge ? "38" : "40" }}</u></strong></em> years old.</span>
          </p>
        </div>

* CSS:

        h1 {
          color: red;
        }

        .blue {
          color: blue;
        }

* JS:

         let app = new Vue({
          el: "#app",
          data: {
            rando: parseInt(Math.random() * 20),
            cabaretName: "Sally Bowles",
            firstName: "Patrick",
            bfName: "Johnpaul",
            age: 32,
            bfAge: true,
            isFun: true
            },
          computed: {
            ageAdd() {
            return this.rando + this.age;
              }
            }
        });
        

**<center>Figure 1: Result of Part 1 Challenge - HTML, CSS, & JS with vue.js</center>**

* Inquiries generated RE: concepts and tasks
* One major inquiry that came up was why a ternary operator couldn't be used to determine the value of `age` in HTML, then incorporate this into the `ageAdd` function in JS. Was this because the ternary operator was not used in Javascript? That seems to be the most logical answer. On that note, is there a means by which the ternary operator could be used in JS? We tried to use this, with very little success.
* Another major inquiry that came up regarding concepts was why binding class to `{{ bfAge }}` made the whole sentence blue, rather than just the age/number associated with ` {{ bfAge }}`. This was interesting and is potentially worth exploring more in depth in the future.
* How the code works (critical lines, tying concepts, specific JS and Vue Jargon)
* For <u>HTML</u>, we used various tags, including `h1`, `h3`, and `span`. Within the HTML code, we used data binding via the use of text interpolation with braces using templates, like `{{cabaretName}}`. We also worked to bind the class `.blue` to data (or vue component state) associated with `bfAge`, making the entire sentence containing `bfAge` data appear blue (see Figure 1). We also incorporated a ternary, or conditional, operator, which used a Boolean to decide what number was displayed for the partner's age, using `?` and `:` in its syntax. For example, since `age` was set to `true` in JS, the partner's age was displayed as `38`. To add to the challenge, the tag `<span>`, associated with the `<span>...</span>` element, was used to place different parts of the madlib-like code inline with each other for `Persxnal Info`, as well as for `Relationship Info about Patrick`. The inclusion of tags like `<strong>`, `<em>`, and `<u>` allowed for text to be formatted bold, italicized, and underlined, respectively. Combining the `<span>` and `<u>` tags, we were able to give the game a true madlibs-esque feeling, with sections being placed together as inline text and `data` that was interpolated being underlined. Key lines included line 3, which incorporated use of interpolation from vue.js in the form of `{{cabaretName}}` with the `<h1>...</h1>` element to denote the title; line 6 to indicate a subheader using interpolation of data from vue.js in the form of `{{ age }}` with the `<h3>...</h3>` element to denote a subheader, similar to the interpolation of `{{ firstName }}` on line 14; lines 9-11 use interpolation of `{{firstName}}`, `{{age}}`, `{{ rando }}` and `{{ ageAdd }}` to ensure from vue.js as parts of the madlib information. In line 17, `{{bfName}}` is interpolated, whilst line 18 interpolates `{{ bfName }}` and `{{ bfAge }}`, where `{{ bfAge }} ` based on a ternary operator that contains a Boolean to determine what age is interpolated. With line 18, `v-bind` is used to bind the class `blue` from CSS to `bfAge` to make it blue.
* For <u>CSS</u>, there was *very* little actual code; the only specific CSS properties focused on color, the only class was `.blue` (line 6), and `h1` was incorporated to render `<h1>...</h1>` element red (line 2).
* For <u>Javascript</u>, after importing `vue.js`, we could easily incorporate data as part of HTML. Here, we let `app` as a variable be set to `new Vue` (line 1), representing the `CREATE` part of a vue lifecycle, with a relationship to instantiation. Within this variable, we have the `el` property, which helps us understand where the vue application starts on the page, with the id `#app` being used as the value of this property, where the application starts (line 2). The `data` property is indicative of information in the application, which the component uses on the screen. Here, data includes `cabaretName` (line 5), `firstName` (line 6), and `bfName` (line 7), all with strings; the `age` property was set to a value of 32 (line 8), whilst `bfAge` and `isFun` are associated with Boolean values that allow for certain numbers as strings to be displayed by being set to Boolean values of `true` (lines 9-10). Additionally, `rando` as part of the data here is determined by executing the `parseInt` function on a randomly-generated number using `Math.random()` multiplied by 20 (line 4); hence, the value of the `rando` property as part of `data` is an integer. Finally, we use a `computed` property of the vue component that calculates data used like data properties; this consists of executing the `ageAdd` function that adds the value of `rando` and `age` (line 14), incorporated to calculate how old Patrick will be a certain number of years from now. The `ageAdd` function runs anytime the value of `rando` changes.
* How code doesn't work and why
* We found that with Vue, as long as there is one syntax mistake, the whole page does not work and display as expected. unlike what we did with JavaScript last term, at least some correct parts still work while the wrong part wouldn't. Also with Vue, the "Analyze JavaScript" function on CodePen becomes less helpful. This can be a little bit challenging to identify what we had typed wrong. And we would return to the cheatsheet, examples in the videos, and solutions to compare and fix.
* Observations, Hypotheses, and Experimentations
* **Observations:** On the most general and obvious level, we noticed that using interpolation with templates via the use of `{{...}}` (content inside double curly braces) allowed for the values of properties like `bfName` to appear on the screen. We also observed that, upon running this program in Debug mode and using the `Inspect` option to increment the value of `age`, that the vue component updated automatically.
* **Hypotheses:** One hypothesis that we tested that was not shown in the instructional video on Canvas was that using the `<span>...</span>` element would not be impacted by the use of templates. This wound up being true, and this element allowed for the interpolations to be placed in line, as needed. We also hypothesized that the multiple elements, like `<u>...</u>` and `<em>...</em>` could be used and embedded for application to interpolated values; we tried this `<span>...</span>` elements in HTML, and this wound up working. How interesting! This truly allowed for a madlibs-esque experience!
* **Experimentations:** We experimented using the `<span>...</span>` element for multiple sentences that incorporated the use of interpolation and templates under the header element titled `"Persxnal Info at 32"`. The results of such experimentation were that the `<span>...</span>` elements both allowed for `templates` to interpolate information from Javascript, along with causing all of the `<span>...</span>` elements to be inline. This, in turn, verified our hypothesis regarding the fact that this element would not be impacted by the use of templates. We also incorporated the use of `<h1>...</h1>` as a header here, with interpolation for the title from the template. We also incorporated the use of the `computed` property with `ageAdd()`, in that this was interpolated into HTML to determine how old Patrick would be a certain number of years from now, using addition as an operator to return a certain value (i.e., `return this.rando + this.age` (line 14, JS). This was ultimately interpolated as part of line 11 in HTML. Finally, we utilized array-like properties with lines 4-10 of JS as part of the challenge and interpolated them in multiple lines as part of the likes of persxnal information in HTML and relationship information, as well; this incorporated the use of `{{ }}`, or double brackets.

* Our Code vs. Solution and Let's Build Videos
* **Solution:** Compared to the Solution, our code includes extra `computed` to add age by generating a random number of years.
* We also use Boolean for `bfAge` to display either `38` in blue or `40` in black. These numbers might have no meaningful function to users as we were just experimenting with the `{...? "" : "" }` if statement.
* We also only utilized one instance of binding class, as with whilst the solution did not use any instances of this binding, as with `<span v-bind:class="{ blue: bfAge }">...</span>` on Line 18 of Javascript.
* However, we did have ternary operators used in our code, much like with the solution code. We also had Boolean values in common with the solution code.
* **Let's Build:** Compared to the `Let's Build` video, we used the `<span>...</span>` element considerably more, perhaps for the purposes of keeping text as part of these elements inline with each other to reflect a more paragraph-like feel that one might associated with Mad Libs. One similarity, however, as would be expected, was that we used text interpolation with double-curly braces, in the format of `{{ }}` (e.g., `{{ user }}` in the `Let's Build` video and `{{ age }}` in our code). We used `data` in the Javascript in an array-like format, just like the `Let's Build` video did, as is expected when utilizing `vue.js`. Here, we did not use `Vue.component`, as we did not necessarily require instantiation of cards, for example, as we might with cards. This is more, instead, reflective of Activity 3, shown below. We also created more complexities in our code, such as the inclusion of `Math.random()` and `parseInt()` to incorporate age.

---
### Activity 2: DIFFERENT DATA-STATES AND VIEW-STATES
* **Activity 2 Link:** https://codepen.io/ps3022/pen/yLbyZeM
* HTML

      <div id="app">
      <h1> Characteristics </h1>
      <p>
        <div v-if="randomNo > 5">
          <div :class=" { big: meFunny }">
            <div :class="{ yellow: iFunny }">{{ meFunny }} {{ iFunny ? " funny and" : " not funny, but"}} {{percentQuality}}</div>
          </div>
        </div>
        <div v-else>
          <div :class="{ yellow: iFunny }">{{ meFunny }} {{ iFunny ? " funny.":" not funny."}}</div>
        </div>
      </p>
      <p>
        <div v-if="randomNo < 5">
          <div :class=" { big: bffFunny }">
            <div :class="{ yellow: themFunny }">{{ bffFunny }} {{ themFunny ? " funny and" : " not funny, but"}} {{percentQuality}}</div>
          </div>
        </div>
        <div v-else>
          <div :class="{ yellow: themFunny }">{{ bffFunny }} {{ themFunny ? " funny.":" not funny."}}</div>
        </div>
      </p>  
      </div>

* CSS:

        .yellow{
        color: gold;
        }

        .big {
        font-size: 20px;
        background-color: red;
        }

* JS:

        let choose = Math.floor(Math.random()*3)
        let app = new Vue({
          el: "#app",
          data: {
            me: "I",
            bff: "My best friend",
            iFunny: false,
            themFunny: false,
            extra: ["wild", "challenging", "interesting"],
            perHundred: 100
          },
          computed: {
            meFunny() {
              return this.me + " am"
            },
            bffFunny() {
              return this.bff + " is"
            },
            randomNo() {
              return Math.random() * 10
            },
            percentQuality(){
              return Math.floor(Math.random() * this.perHundred) + "% " + this.extra[choose] + "."
            }
          }
        });

**<center>Figure 2: Result of Part 2 Challenge - HTML, CSS, & JS with vue.js, default</center>**

**<center>Figure 3: Result of Part 2 Challenge - HTML, CSS, & JS with vue.js, when first statement is true</center>**

* Inquiries generated RE: concepts and tasks
* We were thinking to ourselves, why should we have to use `computed`, when there seems no computation going on? For example:
1. With our data `me: "I"` and `bff: My best friend`, the function `meFunny()` returns `"I am"` and`bffFunny()` returns `"My best friend is"`
2. But for the sentence to be grammatically correct, *I* must stick with *am* and *My best friend* should stick with *is*. The result will always be the same and no computation is seen.
3. Alternatively, we could bind the subject and verb together in `Data`. However, the logic of data property also would not make sense when we write `me: I am` instead of `me: I` and `bff: My best friend is` instead of `bff: My best friend`.
4. Or should we just type the linking verbs (am, is, are) in HTML as we did in Activity 1 for madlib?
5. All of the three methods work and result the same sentence, but which one would be logically correct?
* We also wondered why with interpolation using vue.js we didn't need to concatenate using the + sign, like we might have with the `+=` operator we used in MSTU 5003. We found this to be quite curious and interesting (please see HTML for specifics).
* How the code works (critical lines, tying concepts, specific JS and Vue Jargon)
* Throughout the HTML, we used data binding via the use of text interpolation with braces using templates with the likes of `{{ meFunny }}`, `{{ iFunny }}` with a ternary operator to decide what text was interpolated into a sentence, `{{ percentQuality }}`, ` {{ themFunny }}`, and ` {{ bffFunny }}` (lines 6, 10, 16, 20, HTML). This was cross-referenced with `data` property as part of information in the application with certain values; these included `me` with a value of string "I", `bff` with a value of string "My best friend", `iFunny` with Boolean value `true`, `extra` that existed as an array with three adjectives of `"wild", "challenging", "interesting"` for interpolation through indexing, and `perHundred` with a number value of 100 (JS, lines 4-10).
* First, we compute a random number using `Math.random` (line 1 of JS), and with `v-if` and `v-else` (lines 4 & 14, 9 & 19), let that number decide who is going to have a second characteristic other than *funny* by interpolating text from an array known as `extra` (line 9 of JS).
* We also use this `Math.random` to randomly get one of the three characteristics display in a sentence by using an index from the `extra` array (lines 9 & 23 of JS).
* For each secondary characteristic, we get a random number with `Math.random` to serve as the percentage of how *wild/challenging/interesting* a person is by multiplying it by 100% using the `computed` property `randomNo()` (line 20 of JS), and the `computed` property that is interpolated as `percentQuality()` (line 22 of HTML).
* In our data, we set the default value of *funny* to be false as a Boolean value, so whenever users refresh the page, they get "not funny" followed by a random second characteristic with a random percentage (lines 7 & 9, JS).
* The debug mode allows users to toggle with true/false. With our statement `{{ iFunny ? " funny and" : " not funny, but"}} `, users see "funny and..." in yellow text color or "not funny, but..." in red background.
* The `computed` properties `meFunny()` and `iFunny()` are used to create sentences about in the first person and about the friend by concatenating a returned value using dot notation (i.e., `this.me` and `this.bff` with `" am"` and `" is"`, respectively, lines 13-18, JS).
* In terms of styling, we use `v-bind: class` as a form of class binding from vue.js to manipulate the text color, font size, and background color (lines 5, 6, 10, 16, & 20, HTML). This incorporated use of lines 1-2 from CSS to incorporated the `.yellow` class. This also incorporated use of lines 5-7 from CSS to incorporate the `.big` class to both enlarge text and to make it red.

* How code doesn't work and why
* In our first line we originally had `let choose = Math.floor(Math.random()*2)`, then we realized that the third element of an array never appears. Later, we found that there was a miscalculation. We need to get a random value that will be equal to or greater than 2 in order for the third element to show. Hence, we changed it to `let choose = Math.floor(Math.random()*3)`. It works. The third element "interesting" now appears randomly. Aside from this, we also found that the code doesn't work automatically to toggle the statements of someone or their best friend being funny on or off; this is because, as part of the `app` variable, the Boolean values were set, without any changes being applied to them. Instead, this would require using `vue` and toggling these values manually in order for visual changes to occur.

* Observations, Hypotheses, and Experimentations
* **Observations:** We saw that computed properties in this case only consisted of two actual calculated values, which went into our inquiries generated from this exercise. We also observed that using `computed` properties required the use of `return` to actually output a value that could be displayed to the user. We also noticed that interpolating multiple forms of data did not require the use of "+" between different templates where data is interpolated as part of HTML, shown by double brackets, as seen with `{{ }}`.
* **Hypotheses:** One hypothesis we tested is whether we could add one `{ ? "" : ""}` if statement to another `v-if` statement with __HTML__. And, it worked, but we put a question mark to the necessity to do so, or in what situation we would need to do this. Another hypothesis we tested was that we could get away with not using `v-bind` in addition to `:class` as part of HTML to bind a class, which we found was successful with the likes of classes like `.big` and `.yellow`. Finally, we hypothesized that we could use an array via indexing to insert different strings as part of interpolations; we ultimately found this could work by using `choose` to determine a random index, then utilizing this with `this.extra[choose]`.
* **Experimentations:** We experimented with including a boolean and a child `if` statement within a parent `if` statement. Users can receive eight different combinations:
* I am funny + Bff is funny and...
* I am funny + Bff is not funny but...
* I am funny and... + Bff is funny
* I am funny and... + Bff is not funny
* I am not funny + Bff is funny and...
* I am not funny + Bff is not funny but...
* I am not funny but... + Bff is funny
* I am not funny but... + Bff is not funny
* In the future, we would like to experiment with advanced `if` techniques in `computed` so that we might not have to repetitively type the same template in HTML like what we do now.
* We also experimented with the use of "+" as part of the challenge to concatenate different types of data, which was successful, where spaces were included as part of string, such as with "% " (line 23, JS).

* Our Code vs. Solution and Let's Build Videos
* **Solution:** The Solution has cleaner code. Only one template `{{...}}` is used in a sentence, and the `if` statement determining someone is funny or not happens in JavaScript. On the other hand, our funny/not-funny statement happens in HTML, with Booleans in Javascript data.
* In terms of styling, our code invovles binding extra class to change the background color if a second characteristic is added.
* Unlike the solution code, we used `<v-if>` and `<v-else>` as part of our HTML code, instead of as part of the JS code (as seen in the solution code, which used `if` and `else` as part of the JS code).
* We also used considerably more data and the use of inequalities, compared to the solution code, but this was logical, considering that we incorporated `Math.random()` as part of the extra challenges.
* **Let's Build:** Our code used considered more instances of `v-bind` to bind a class, unlike the Pet Store. Furthermore, `Let's Build` used dot notation, which we did not use in our HTML. Moreover, we also utilized templates in our HTML code, just like `Let's Build` videos. Furthermore, unlike the `Let's Build` video, we did not use a custom-made element like `<pet>...</pet>`. Instead, we used the `<div>...</div>` element multiple times to allow for the CSS classes to be bound and hence applied. However, there was a similarity in terms of how the `<h1>...</h1>` element to allow for the header to be applied to this code. We also utilized a `let` statement in Javascript to define a variable as part of the challenge to generate a `computed` property that mixed different kinds of data together (i.e., percent values associated with a string denoting an adjective to describe the individual of interest).

---
### Activity 3: CUSTOM COMPONENTS
* **Activity 3 Link:** https://codepen.io/ps3022/pen/YzVzYob
* HTML

        <html>
          <div class="container col-xl-6" id="app">
            <div class="overlay">
                <card v-bind:animal="animal" v-for="animal in animals" class="symbol"></card>
            </div>
          </div> 
        </html>

* CSS:

        .card-maker{
          border-width: 1px;
          border-style: solid;
          border-color: black;
          margin-bottom: 5px;
          border-radius: 20px;
          font-family: cursive;
          color: blue;
          font-size: 13px;
        }

        .card-holder{
          width: 300px;
          height: 200px;
          padding: 0.5em;
        }

        .pic{
          width: 45px;
          height: 55px;
        }

        .symbol:before{
          content: "💖";
          position: relative;
          left: 0.05em;
          top: 0.05em;
        }

        .symbol:after{
          content: "💖";
          position: relative;
          left: 18.5em;
          top: 2em;
        }

        .symbol:hover:before{
          content: "Apparel";
          font-family: "Helvetica Neue";
          font-weight: bold;
          color: red;
          position: relative;
          left: 0.05em;
          top: 0.05em;
          opacity: 1;
        }

        .symbol:hover:after{
          content: "⤓";
          font-weight: bold;
          font-size: 20px;
          color: green;
          position: relative;
          left: 12em;
          top: 1.25em;
          opacity: 1;
        }

        .card-holder:hover{
          opacity: 0.8;
          background-color: #A9A9A9;
        }

* JS:

        Vue.component('card', {
          props: ["animal"],
          data () {
            return{
              isHungry: true
            }
          },
          computed: {
            isCute() {
              return this.animal.isCute ? " ":"not";
            }
          },
          template: `
          <div class="card-maker card-holder">
            <p>Pet is {{ animal.petName }}</p>
            <p>Pet is {{ animal.petAge }} years old</p>
            <p>Pet is {{ isCute }} cute.</p>
            <p v-show="isHungry">I want food.</p>
            <img v-bind:src=animal.url class="pic"/>
          </div>
          `
        });

        var app = new Vue({
          el: "#app",
          data: {
            animals: {
              pet1: {
                petName: "Pluto",
                petAge: 3,
                isCute: false,
                url: "https://kids.kiddle.co/images/6/6d/Plutodog.gif"
              },
              pet2: {
                petName: "Oliver",
                petAge: 1,
                isCute: true,
                url: "https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b6c4a6d-23e2-4688-a485-4421021ede61/ddoi0vz-bbda1cfd-b58a-42f7-91ee-ead0368c738a.png/v1/fill/w_1920,h_2330,strp/oliver_cat_disney_by_matheusmarkies_ddoi0vz-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjMzMCIsInBhdGgiOiJcL2ZcLzBiNmM0YTZkLTIzZTItNDY4OC1hNDg1LTQ0MjEwMjFlZGU2MVwvZGRvaTB2ei1iYmRhMWNmZC1iNThhLTQyZjctOTFlZS1lYWQwMzY4YzczOGEucG5nIiwid2lkdGgiOiI8PTE5MjAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.n2hqEE4rwHErtXJ8Pzh-EFy6p5UibQGShK7kMhXkBdk"
              },
              pet3: {
                petName: "Felix",
                petAge: 10,
                isCute: false,
                url: "https://upload.wikimedia.org/wikipedia/commons/0/0f/Felix_the_cat.svg"
              }
            }
          }
        });   

**<center>Figure 4: Result of Part 3 Challenge - HTML, CSS, & JS with vue.js, when one of the pinterest cards is hovered over</center>**

* Inquiries generated RE: concepts and tasks
* One inquiry was why we were able to use HTML as part of the template for Javascript. This was interesting, given that we traditionally have treated them separately. What was also interesting was that, just like with HTML, we were able to have data interpolated into the template. With that said, this also gave rise to another question: Would it ever be possible to not use HTML at all when using vue.js? This would be worth exploring more in detail.
* Another inquiry was, as part of `Vue.component`, we needed to use `this.animal.isCute` as part of a ternary operator; hence, we were wondering why this was necessary, which we found we needed to use, based on what we learned last semester, instead of using just `this.isCute`, if `props` was already here.
* A third inquiry was why `return` needed to be used on Line 5 of JS for `isHungry: true` in order for it to be interpolated into the template on line 19 of Javascript. Why wasn't it enough to not use `return` and merely incorporate `isHungry:true` here as part of `data ()` on line 3 of the Javascript?

* How the code works (critical lines, tying concepts, specific JS and Vue Jargon)
* First, we need to use component registration, where we use `Vue.component()`, and give the component a name, specifically `card` (line 1 of JS).
* We also needed to incorporate `props` as part of `Vue.component` to transfer data from the parent component to its child component in such a manner that properties required in child components was transferred into the props array, so that it can be placed in the HTML template. Here, on line 2 JS, `props` has the value of `"animal"` in an array. Associated with `Vue.component` is `data()` in the form of `isHungry`, data with the Boolen value of `true` that is returned for use in the HTML template to later generate the statement `"I want food"` for each of the cards generated (lines 4-5 of JS). Next, as part of this component, we have the `computed` property of `isCute()`, which is executed in such a manner that it returns either an empty string (if `this.animal.isCute` is true) or `"not"` (if `this.animal.isCute` is false... lines 9-11 of JS).
* Next, in lines 14-21 of JS, we incorporate the `template` property of a Vue component with HTML string that determines how the component appears, where `el` is replaced. Here, in the `template`, the `{{...}}` will get the data from the `prop:animal`. In this particular case, we incorporate the `div` classes of `card-maker` and `card-holder`, that allow for a rounded image of the cards to appear on the screen for each animal. Here, as part of the HTML template, we use dot notation to interpolate data in the form of `petName` and `petAge` through iterations for each of the pets (lines 14-16 of JS), then `{{ isCute }}` interpolates string based on the Boolean value of `isCute` from the computed property as part of a sentence. Here, `v-show` is used when `isHungry` is true to display `"I want food."` on the animal cards (line 19 of JS). Finally, as part of this template, `v-bind` is used to bind an image with an `src` property that is obtained by accessing the `url` property of props `animal`, with the CSS class `pic` being used to format the image, essentially placing this image at the bottom of the card (line 19 of JS). Here, we let `app` as a variable be set to `new Vue` (line 24), representing the `CREATE` part of a vue lifecycle, with a relationship to instantiation. Within this variable, we have the `el` property, which helps us understand where the vue application starts on the page, with the id `#app` being used as the value of this property, where the application starts (line 25). The `data` property is indicative of information in the application, which the component uses on the screen. Here, we name an array `animals` to be used later. The first object in the array is `pet1`, with the properties `petName`, `petAge`, `isCute`, and `url`, which have values that are a string, a number, a Boolean value, and string representing a link, respectively. The same goes for the other two objects, `pet2` and `pet3` (lines 27-44, JS).
* In HTML, the `classes` of the `<div>...</div>` element include `container` to place content in an arbitary width and `col-xl-6` to fit the view in a 6-column-wide screen, along with the `id` being set to `app` to invoke the variable `app` from Javascript, as it pertains to `vue.js` (Line 2). Next, we also have the CSS class `.overlay` to represent an overlay when the user hovers over a specific card, which will be covered with CSS. Finally, the `<card>...</card>` is incorporated here, where `v-bind` is used to bind the `prop` "animal" to each card using the template covered in HTML, along with `v-for` to iterate through a list of items in an array - namely `animal in animals` , where `animals` is the array and `animal` is the element we iterate through for each of the three elements; we also incorporate the class `.symbol` here to incorporate symbols here that appear on the top-left and lower-right corners of the card and that change in the style of pinterest cards, with changes upon hovering (line 4, HTML). Here, we bind `animal` to the parent component, such that it appears.
* In terms of CSS, for the `.card-maker` class, we set properties of `border-width`, `border-style`, `border-color`, `margin-bottom`, `border-radius`, `font-family`, `color` (corresponding to font color), and `font-size` to make rounded rectangular cards that have cursive blue font inside with 13px (CSS, lines 1-9). Next, the `.card-holder` class is used to set the `width`, `height`, and `padding` properties to allow for a specific width, height, and white space that fits all the information and the image inside (lines 12-15, CSS). Next, the `.pic` class is used to set the `width` and `height` properties to uniform values for the three images correspond to each of the pinterest cards (lines 18-20, CSS). Next, on lines 23-35 of CSS `.symbol:before` and `.symbol:after` have values of `content` (in the form of hearts), relative positions relative to the display, and `em` for the values of `left` and `top` (or positioning left and relative to the top, using values of `em`, instead of absolute values), much along the vain of playing cards. Next, on lines 37-57 of CSS, the `.symbol:hover:before` and `.symbol:hover:after` classes are used to change the `content` to text on the top-left corner and a download symbol on the bottom-right corner (much along the lines of pinterest), along with `font-family`, `font-weight`, `color`, `position` (being relative), `left` and `top` in `em` units, and `opacity` to position `"Apparel"` in the top left corner of each card in bold and the download arrow in the bottom right coroner of each card in bold relative to the screen's view, where the opacity is at a full value of 1 for each. The `color` properties make `"Apparel"` red and the download symbol green. Finally, the `.card-holder:hover` class has properties of `opacity` with a value of `0.8` and ` background-color` property with value of `#A9A9A9` (or grey) to represent the card becoming grey when the user hovers over it, with the symbols that appear, much along the lines of what happens on pinterest.

* How code doesn't work and why
* The code seems to work, but we noticed that, when we defined data as an object in the component, it did not work. This was because the component needed different storage for different component for multiple uses, so we needed to define it as a function. Beyond this, we also realized that hovering over the cards at certain lower opacities made the symbols faded, quite possibly because the z-index wasn't set high enough or because there was not a definitive overlay property that would superimpose the text above the elements in the card.

* Observations, Hypotheses, and Experimentations
* **Observations:** One key observation we made was that the data in the component was defined as a function. We also observed that incorporating the image into the `card` component required the use of `v-bind` to allow these images to appear, as failing to use `v-bind` caused the image to *not* appear on the card. Finally, we observed that using `v-for` and `v-bind:animal` did not require each of the elements to be listed in HTML code.
* **Hypotheses:** One hypothesis we tested was that, when we could not use `isCute()` as a computed property, we would need dot notation in order for this to work. We realized that using this dot notation on line 8 of JS, written as `this.animal.isCute` as part of a ternary operator to allow for an animal to be considered cute or not. Another hypothesis was that we would not be able to use the `for` loop successfully with templates, given the complexity of the code and the fact that it could potentially not be used in HTML. This wound up being true, leading to us needing to experiment with using `v-for`, as described below.
* **Experimentations:** We experimented using `v-for` to iterate over array elements using the format of `"x in y"` as part of the `<card>...</card>` without extensive code and to clean it up for HTML. The result of such experimentation was that doing this did the same thing as writing `<card:animal="petx"></card>` being done three times for `pet1`, `pet2`, and `pet3`, hence saving us time and allowing for efficiency with code. We believe that we could also use this successfully with larger arrays. We also experimented with using `isHungry` being set to a Boolean value of `true` as part of `Vue.component`, instead of extensive amounts of data, while the array that detailed specific parts of the `animals` array could be used as part of the `data` that is part of the `app` variable. This wound up working better, as using `isHungry` allowed for interpolation as part of the template using `v-show` on line 18 of Javascript to allow "I want food" to appear.

* Our Code vs. Solution and Let's Build Videos
* **Solution:** The biggest difference is that we use `v-for` in HTML and loop in JavaScript to get `animals` in the `data` displayed. On the other hand, the Solution uses `component` in HTML. This also results in differences in JavaScript in which we have two layers of data (`data: { animals: { pet: {...} } }`) whereas the Solution only needs one `data: { pet: {...} }`.
* In terms of the content, we add more attribute to the data that pass to each component such as the `src` of the image. As for styling, we code more CSS to make the page look richer.
* We used considerably less code in our HTML, compared to the solution, which made sense, given that we used `<v-for>` with `animal in animals` to allow for iteration over an array of elements, eliminating the need for repetitive code.
* Unlike the solution code, we used dot notation with the `prop` to cut down on code with `data` like `petName` and `petAge`, whilst the solution code doesn't seem to use dot notation.
* We also used `v-show` to display "I am hungry", unlike the solution code, which called for the use of `v-bind:hidden`. In thinking about this, we felt that `v-bind:hidden` with `"!isHungry"` was quite complicated, whilst `v-show="isHungry"` allowed for more simplicity.
* **Let's Build:** Like the Pet Store, we imported images as part of our cards and with careful formatting for size for each of the cards. However, we did not incorporate the use of a user as part of the vue.js code for Javascript. We also did not use a template in our Javascript, as shown for the `Fido` cards in the Vue Pet Store, but rather `v-bind` with `v-for` to allow for the `props` to bind and to allow for the use of an array. Furthermore, we incorporated the use of `template` in Javascript as part of `vue.js` with `Vue.component`, instead of in HTML. This allowed for more efficiency in HTML, even if there was considerably more code in Javascript. However, we did have similarities in using `dot` notation, such as with `animal.petName`; however, there is a subtle difference here, in that `animal` matches to a `prop`, whilst the `Let's Build` video uses a property associated with `data` (e.g., `petA`, as in `petA.name`).