Exercise: Cats

Now that we have worked our way through the dog API, it’s time to take on a more complicated animal (and api). The cat api (catapi.com), like the dog api, has lots of images but also offers additional information as the screen capture at right indicates. In this exercise we are going to work through the process of getting at that information and, of course, lots of cute and weird kitty images!

To begin our feline journey, click this link to see the initial information set we will be drawing from. This url brings up a page with detailed information about 67 breeds of domestic cats in one great big array.

Download Cat-Start.zip, unzip it and move the contents into wherever you are doing the work for this class. Open both files with your editor and take a look at the code.

As you can see, the code in kitty.js is pretty simple so far. Basically, all we are doing is using axios to pull data from https://api.thecatapi.com/v1/breeds, the url that you just visited. For starters, let’s get some of that information to display on our html page.
Create an empty array variable in your data named catArray. Then use the new catArray to capture the data from response as shown below.
```
data: {
        catArray: []
      },
```
Use a v-for loop to show the name of each cat breed. You should see a long list of names running from Abyssinian to York Chocolate.
```
<li v-for="eachCat in catArray">{{ eachCat.name }}</li>
```
Our next job is to get the URL of an image for a given cat breed. If you take a careful look at the json feed, you should see a value at the bottom of each object named reference_image_id. Well, it just so happens that the CatAPI people have a unique image for each breed at tied to this URL: https://cdn2.thecatapi.com/images/
For example, if you visit the url https://cdn2.thecatapi.com/images/ozEvzdVM-.jpg
you will see an example of how this URL combined with a reference it, plus .jpg at the end brings up one of those images! So, add two new variables to catArray:
```
dpart1: "https://cdn2.thecatapi.com/images/",
dpart2: ".jpg"
```

Add an image tag inside the v-for loop:

<img :src="dpart1 + eachCat.reference_image_id + dpart2">

At this point, names and 67 images should appear but some of those images are quite big, so let’s add a bit of CSS.

<style>
    body {
      font-family: system-ui, sans-serif;
      margin: 20px;
    }
    
    img {
      width: 100%;
      max-width: 400px;
      border-radius: 10px;
      margin-top: 10px;
      display: block;
    }
  </style>

Now that you know how to bring in names, bring in at least three additional sets of information such as temperament, description, etc. Here is one example:
```
 Origin: {{ eachCat.origin }}
```
Notice as well that some of those characteristics are tied to numbers. Give some thought to how you would use one or two of those numerical values to make (for example) a different sized bar chart appear for each cat breed. Or make the text color change if the cat is not Child Friendly. For example:
```

 Child Friendly: {{ eachCat.child_friendly }}/5

```

And then add an indicator to CSS:

.warn { color:#b91c1c; font-weight:600; }

Finally, format your page! Use flex or some other method to create a clean layout.