I took a good chunk of the original HTML and stuck it into my JavaScript to serve as a template for a component called 'newbreed'.
I also took the variable 'whichcat' and made it a property of my new component. This means that I can insert my component into my HTML like any other element.
When I do this, the template will be slotted into place without having to retype it over and over again. Also, by having whichcat set as a property,
I can include that in the brackets to get the data displayed to change. For example, if I wanted to display the information for the Scottish Fold, I would
set whichcat equal to the species ID for the Scottish Fold, which is 'sfol'. Since whichcat is also a variable, whenever I set the property to something different,
the data displayed will be different as well.
Getting the 5 different slideshows was pretty simple. All I need to do is insert my newbreed component along with the whichcat property set to whichever breed I want to display.
Because newbreed is a component, you can reuse it over and over with different IDs for the whichcat property.
Getting the slideshows to pop up on a button click was probably the trickiest part. What I wound up doing is wrapping each newbreed component in my HTML with div tags along with an ID based on each species' name
(that ID isn't required, but it helps me stay organized). I then added a v-if statement to each of these div tags so that they would only show if a variable tied to a button press was true. Now, what the hell does this mean?
Let's use the Scottish Fold as an example. At the top of my HTML document is a button named Scottish Fold. Its slideshow is in its own div tag with a v-if statement saying that the entire div tag will only show if scotShowClicked is true.
Since scotShowClicked is set to false in the data for my Vue app, the entire div, and the slideshow inside, will not show. But at the very top of my HTML is a button named Scottish Fold. It is tied to an event listener, @click,
so that it will run the method scotShow upon being clicked. When a user clicks the button, scotShow runs, which sets scotShowClicked to true. Because scotShowClicked is now true, the slideshow for the Scottish Fold will show.
I did a similar process for each of the five slideshows with differently named variables and functions. A bit tedious, but it got the job done!
To get the description, temperament, and origin to be displayed, I had to go in and change the newbreed component. I did this by looking at my starting HTML and taking note of how
the data was reached. I noticed that the long pathways to access data within an array weren't there. Instead, these paths were assigned to simple names (for example, having 'adapt' in curly brackets instead of 'response2.data.breeds[0].adaptability').
I followed this same format, setting the origin, temperament, and description to more simple values so I could call them more easily. These values were then inserted into p elements so they could be displayed as paragraphs.
Because these changes were made to the entire component, they will show every time the newbreed component is used without needing to rewrite it constantly.
And for my last trick, I added some bars to visually represent numerical data. This is another one I had to edit my component for,
as I had to add another set of div tags. I also used the same method mentioned in step 1 regarding assigning data to variables. By doing this, I was able to set the width of each div tag to the number of the variable + 0px. So, if a cat's affection
level is 5, the width would be 50px.