I developed this project to practice working with APIs, specifically TheCatAPI. The main objective of the project is to click a button and display a random cat breed from a pool of 67 breeds, accompanied by detailed descriptions and features of the selected breed.
TheCatAPI doesn't provide an endpoint for random objects, so I utilized Math.random() to implement this functionality. Following that, I incorporated the breed descriptions and features into the HTML and designed the website. It's worth noting that the images provided by the API lack standardization, which may lead to some distortions. To mitigate this, I set a max-width to ensure that the images stay within the container and do not affect other components on the site.
A creative addition to the project was the inclusion of a meow sound effect triggered when the button is clicked. This marked my first experience incorporating sound into a JavaScript function.
In summary, while this project was enjoyable and whimsical, it also significantly enhanced my understanding of working with APIs. I had the opportunity to learn and apply new features, ultimately making the learning process both educational and fun. I find myself chuckling every time I hear the playful meow sound effect hehe 🐱.
- HTML
- CSS
- JavaScript
- API
