Self-Paced Work: What Does the Cat Say Now?

Continue to explore the cataas API and the TikTok Text-to-Speech API with these exercises.

GIFs Only

Is it pronounced gif? Or is it gif? The world may never know. The one thing we can all agree on is that there are GIF images of cats on the internet. And luckily, the cataas API has a way to send them!

Do some research to figure out how to limit images returned by the API to only GIFs.

For an added challenge, add a checkbox in the HTML to see if the user would like GIFs or all images, and add the /gif/ to the URL if the box is checked! Additionally, update the speak function so that, if a gif is being generated, it waits a little longer to speak. Or, figure out how to make it speak only after the new image has loaded.

Cat Tags

Another cool thing the cataas API can do is search by tag. For example, to display only cats where "cute" is a tag, just add /cute before /says!

Do some research and figure out how to find cats with certain tags.

For an added challenge, add another text box in the HTML, and allow the user to enter a tag. But what tags could they enter???

All Tags

Amazingly, there is an cataas API endpoint that returns the complete list of tags for cat images. Go to https://cataas.com/api/tags to see the full list.

There are a few options here:

  • Copy the current list into the script.js file directly, and use it to check before sending requests
  • Create a dropdown in the HTML with a few selected tags hard-coded into the page
  • Use fetch to dynamically load up the full list of tags, and dynamically create a dropdown in the HTML so the user can choose between all available tags

Feel free to use the tags however you'd like!

Cat Filters

One additional fun thing that can be appended to any URL is the use of image filters! These filters take an image and transform it in some way. There are several filters available:

  • blur
  • mono
  • sepia
  • negative
  • paint
  • pixel

The filter option is added to the URL as a query parameter! For example, a URL could look like this: https://cataas.com/cat/cute/says/meow?filter=negative

There are some options here:

  • Add a default filter to every image returned
  • Add a random filter to every image returned
  • Allow the user to select a filter to apply to the image

Feel free to use filters however you'd like!

New Voices

There are plenty of TikTok voices to try. Figure out how to swap out the Rocket voice for another voice of your choosing. Then, make a dropdown to let the user decide which voice to use!

More

These are some of the options available, but it's up to you to make whatever you'd like. Take these tools and create something fun!

results matching ""

    No results matching ""