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 Cat-Slideshow.zip which contains catshow-start.html and catshow-start.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.

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.

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.

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 breed. Each time the component is reused, the value of breed 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. 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 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.