The title of this assignment may sound a little macabre, but your mission is quite innocent. I provide you with a fully functional slideshow that draws information and images from the Cat API and your job will be to create and re-use a component that will allow you to create a series of slideshows, each of which displays images of a different cat breed.

Let's begin this show by downloading and unzipping catshow.zip which contains catshow.html and catshow.js.  Open both files side by side with your editor and take a look at the code in both. As you can see, we have a Vue with an element value of #bobcat (el: "#bobcat') that corresponds to the bobcat div in the html file. Go ahead and run this thing to see images of the American Bobcat breed.

We are not going to focus a great deal on functionality in this exercise but take a look at the code anyway, because I worked a lot harder than I should have had to, in order to make it work properly. Then the API changed and I had to rework the whole thing again!

The first part of the loadNextImage function uses axios to set the value of response to data from a URL that varies based on the value of an argument named breedID. Similar to the previous exercise, each URL contains image links and information, but this time we are loading an array that contains several images.

On line 15 we call the loadNextImage function, and set the breedID argument to the variable whichcat (this.whichcat) which was created and set to "abob" in the data section. abob is appended to a URL (below in bold) which calls the American bobcat breed. If we had set whichcat to "abys" the slideshow would load abyssynian images. This is important!!

At this point, it is worth taking a look at the api that appears for each cat breed, which in that case is abob:
https://api.thecatapi.com/v1/images/search?breed_ids=abob

As you can see, you get a URL for an image (although somehow by following the instructions from the catapi people, we bring in an array of images), an id, and width and height. I'm not completely clear on what width and height are about, but further down we add the id to another URL in order to get additional data about a given cat breed.

We set the value of this new URL to response2 which grabs a ton of useful data such as whether or not the cat breed is dog friendly, kid friendly, healthy, affectionate, as well as links to even more information! Here is an example of the new URL that shows its data.

Odds and Ends

As you can see on line 31 we tie the data from the response variable to another variable named allofit . On line 37 we create a slideshow that cycles through the values of allofit by
  (a) incrementing this.i (the i variable was created in data) every time the function is called, and
 (b) setting the value of image to each item in turn. (The first part of slideshow prevents it from exceeding the length of the allofit array)

In the html file we use image to load a picture and the name of the cat breed. Every time the button that calls slideshow is clicked a new image appears. And that's it!

The Assignment

Now that you more or less know how this thing works, your job is to complete the following tasks.

1. Create a reusable component with a prop tied to the value of whichcat. Each time the component is reused, the value of whichcat should cause the slideshow to load a new breed of cat images. To do this you will need to change the value of abob to manx, for example. All of the cat ids that you can possibly imagine are available on this api.
2. You should have at least 5 separate slideshows.
3. Each slideshow should be inside of a div tag that can be reached by clicking a button.
4. Add the description, temperament, and origin of each breed to your slideshow (this may be easier to do before you create the component).

The breeds object that provides the name, temperament, etc. also contains a lot of

numeric information.  For example, the numbers at right that come from the Abyssinian breed indicate that Abyssinians are more or less OK with dogs and children, energetic, have terrible grooming habits and pretty bad health issues. Use some of those numbers along with style binding to visually represent the values.  Bar charts work really well and all you have to do is tie the width of a given div to a value that you get from the api. Do your best to impress me!

6. Explain how it works. For example, explain how the loadNextImage and slideshow functions do what they do; talk about vue components and props; tell us what the template does, use of arrays. Explain how you (and I ) made this happen.

Grading Rubric

1.  (50 %) Functionality: it has to work!
2. (25%) Appearance: Make it look good. Use a template if you want to.
3. (25%) Written explanation of how everything works.