Showing off your twoCatz API

Week 4 Step 5 ⬤⬤⬤⬤⬤◯◯ | 🕐 Estimated completion: 5-20 minutes

Create the CataaS Website ~ meow

Demo: 🐱

Create a website that return a picture from the CatAAS API with the name of the cat being the input (each click should call the Cataas API)

✅ Task:

[x] Create a new twocatz-frontend branch
[ ] Create an form page in a new HTML file called catzapp/index.html with a text input (type="text") and a button (type="button") that calls the Javascript function y1k3s() in twocatz/index.js
[ ] Create a img object with id image in catzapp/index.html
[ ] Write the y1k3s() function that replaces the img div with a picture from the CataaS API containing input from the text box
[ ] Commit your changes to catzapp/index.html and catzapp/script.js to the twocatz-frontend branch
[ ] Create a pull request that merges twocatz-frontend to main, but do not merge it

:bulb: Tip: It's a good idea to name your tags with id, since you'll then be able to use document.getElementById for modifying and getting values.

🚧 Test your Work

Open up your LiveServer plugin and start your local server. To test your web app:

⚠️ When you enter "catzrule" into the textbox and click the button, is there a picture that appears with a cat and "catzrule" on it?

Getting the Cat Pic

The img tag embeds an image, and it has attributes. We'll be using src.

:question: How can I modify src to get the picture?

When the button is clicked, it will call `y1k3s()`, so we will add a line of code in the function. In HTML, the img tag looks like this: ```html Girl in a jacket

``` We can change the `src` value to a URL, or a file on a server. In our case, we'll change it to a URL to the Cat API. > :bulb: Recall that the endpoint is https://cataas.com/cat/says/[your_text] ```js document.getElementById("YOUR_IMAGE_ID").src = THE_ENDPOINT + THE_INPUT ```

ganning127 / bp-serverless