Using Vue 3,
The Cat API, and a bit
of JavaScript, HTML, and CSS, this Cat Show was made possible!
Once your new Vue app is set up in your JS file and connected to your
HTML file, the first step in the process is to load the data from the
API - which I did by creating the loadNextImage function/method and
leveraging axios. The Cat API differentiates the cat breeds using an
specific ID for each. Therefore, I gave the loadNextImage method the
argument of breedID and set it to the variable whichcat (this.whichcat).
In the following step, I will give this variable a value (each breed's
specific ID) which will allow me to extract my desired data and breed.
I wanted to display various breeds with the same formating and set of
data, so I created a Cats component that can be reused as many times as
needed. In the template section of my component, I included the HTML
that displays the data for each cat breed. Further, I gave the component
a prop of whichcat and set it to String. Then, in my HTML file, I called
my Cats component and made the value of each whichcat the specific ID of
the breed I wanted to display. For example, the American Bobtail's breed
ID is 'abob', so in my HTML file I displayed it using < cats
whichcat="abob">.
In order to be able to look through the images, I created the slideshow
function/method and gave it an argument of direction. When the forward
HTML button is clicked, if direction is strictly equal to 'forward', the
i variable will increase by 1. Once it arrives to the last item in the
array, it will stop - defined by % this.allofit.length. When the
backward HTML button is clicked, since the direction argument is not
strictly equal to 'forward', the i variable decreases by 1.