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] 1: Create a new twocatz-frontend branch
[x] 2: 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
[x] 3: Create a img object with id image in catzapp/index.html
[x] 4: Write the y1k3s() function that replaces the img div with a picture from the CataaS API containing input from the text box
[x] 5: Commit your changes to catzapp/index.html and catzapp/script.js to the twocatz-frontend branch
[x] 6: Create a pull request that merges twocatz-frontend to main, and only merge the pull request when the bot approves your changes!

💡 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.

🚨 NOTE: The CounselorBot will be checking the code to see if you use the CataaS API endpoint. However, if the API is down, you may use the substitute version for testing purposes. Make sure to change it back when you submit your code!

🚧 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?

1: Creating an HTML template

In Visual Studio Code, you can create a html template containing the basic header tags by typing ! + Tab. This will create something like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Everything that appers on the page will be in the <body> tags, and this is where you will be adding most (if not all of your html code.

2: 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. > 💡 Recall that the endpoint is https://cataas.com/cat/says/[your_text] ```js document.getElementById("YOUR_IMAGE_ID").src = THE_ENDPOINT + THE_INPUT ```

📹 Walkthrough Video

counselorbot[bot] commented 2 years ago

⚡️ You're ready for Serverless!

Move on to the next issue.

moveon

counselorbot[bot] commented 2 years ago

⏰ Time to merge!

Go ahead and merge this branch to main to move on. Great work finishing this section!

merge

⚠️ If you receive a Conflicts error, simply press Resolve conflicts and you should be good to merge!

ThienNguyen2002 / ITServerless

Showing off your twoCatz API #66