The first step in creating this project was downloading the template from the assignment page. The template included HTML and JavaScript files. The HTML file includes a DIV element with the ID “bobcat” which is tied to the Javascript file. In the Javascript file, there is an element within the Vue that has a value of #bobcat. The id for each element with each Vue is connected to the different DIVS in the HTML file.
To add multiple cats on the page, I copied the bobcat DIV four more times to have 5 cats in total on the page. The two things that changed are the div id to correspond the different cat breed and h2.
Within data, the prop “whichcat”is the ID from the API for the breed of cat. Similarly, “des”. “temp”, “orig”, and “adapt” are also ids from the API used to pull data for description, temperament, origin, and adaptability score.
“let theid = response.data[0].id;” is used to tell us the breed of cat we are pulling data for. “this.des = response2.data.breeds[0].description;” is pulling data for the description of the specific cat breed. This line of code is repeated multiple times, but the arrays “des” and “description” is changed to fit either “temperament”, “origin”, or “adaptability” depending on which data is being pulled. I then copied that vue component 4 other times for the 4 other cat breeds I pulled data for.
After I finished the HTML and JS, I worked on the styling of the project. I used CSS within the HTML file to change the background color of the entire website and the explanation section. I also styled the buttons and added borders to the image. Styling the website makes it more fun to look at because without it, the website would just be in black and white with the images of cats.
JavaScript and things like Vue component has been tricky concepts for me to fully understand, but this assignment helped me to better understand how everything works.