To create various slide shows using the catAPI by implementing the use of componentswith axios.
Given the base HTML file sets up the Vue.js and Axios frameworks from Professor Emuel, this contains the page's primary structure which has been modified. It has a component "cat" that is resued. The "cats" prop, which contains the breed ID of the cat to be displayed, is accepted by the component and returns us information about the cat's image, grooming needs, adaptability, energy level, shedding, name, origin, description, and temperament. This is possible with the letresponse2 variable that uses axios to retrieve the information and assigns it to the variables created (energy, groom, shedding, etc). Similarly, the loadNextImage method "gets" us the image of the cat by using the breedID. BreedID is very important, hence the use of cat cats ="[breedID]"> under each slideshow div in the HTML"
The button is linked to the slideshow function that is is mainly used to move through the slideshow to the next picture If you look at the slideshow function, we can see that the pictures are actually being loaded from response.data, and looking further back in the program to loadNextImage, this is where we get our pictures of the cats. By utilizing axios, we can asign the variable response to the images, "getting" with the url + breedID obtained from the div. There is a limit of 10, so the slideshow mainly consist of 10 pictures. This simplifies things and allows us to loop back to the beginning picture when the variable i>this.allofit.length.
With the help of Prof Emuel's bars div, I was able to modify the bars to be veritcal by changing the width under the css to 20px and changing the format of each bar to vertical instead of the original, width. Next up, instead of mulitplying the number of each variable by 100, I changed it to only 20 so that it is not too big. The variables, groom, shedding, energy and adaptability were retrieved using axios, assigning the number from the api to each variable name, and then printing that out using {{}} brackets in the html under the "template".
To make it so that the button "click me" does not annoyingly move everytime the height of the image change, I created 2 more divs within the acat div. Div id=sect1 includes h1 and p of the template and id=image surrounds just the img source, I set it at a certain height for so that everything is stable and length is constant. Think of it as 2 containers within a container (acat). In addition, I made it a scrollable format by setting the cat display to flex.