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:
[ ] 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
```
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
```
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:
twocatz-frontendbranchcatzapp/index.htmlwith a text input (type="text") and a button (type="button") that calls the Javascript functiony1k3s()intwocatz/index.jsimgobject with idimageincatzapp/index.htmly1k3s()function that replaces theimgdiv with a picture from the CataaS API containing input from the text boxcatzapp/index.htmlandcatzapp/script.jsto thetwocatz-frontendbranchtwocatz-frontendtomain, but do not merge it🚧 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
imgtag embeds an image, and it has attributes. We'll be usingsrc.: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