The Catwalk

In this project, I created slideshows of five cat breeds using HTML, CSS, and JavaScript. I pulled information on the cats using an API, targeting and displaying their origins, descriptions, and temperaments using Vue elements, variables, and components.

Once I created the first breed component in JavaScript, I reused it to apply the other four by also renaming the Vue element. Through the loadNextImage function, I called a specific breed's images that will load in the slideshow. The 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.

In HTML, I set each slideshow within a div tag with the corresponding id of the Vue element. A button is also used to show new images, connecting to the variable, this.slideshow(). Once all the information and images were set, I used HTML and CSS to restructure the content and customize the overall look of the page.