Showing off your twoCatz API

ghost commented 3 years ago

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:

[ ] 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?

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.

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 ```

ghost commented 3 years ago

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

One Cat isn't enough ~ Meow

Now that we've got a frontend that can only return one picture, let's take it to the next level and return FOUR pictures at the same time. To do this, let's edit our old twoCatz function.

✅ Task:

[ ] Make sure you're on the twocatz-frontend branch
[ ] Edit your twoCATZ HTTP Trigger from Week 1 so it takes in 4 parameters (name1, name2, name3, name4) and returns four pictures in base64 with the parameters.
[ ] Remove the "random name" feature in your Azure Function
[ ] Commit twocatz/index.js and test your result with Postman

❗Requirements

Make sure you encode the pictures in base64
Make sure your parameters are named correctly!
The Function URL should still be in your TWOCATZ_ENDPOINT secret since you are editing the same function

🚧 Test your Work

Open up Postman again since we are testing an API.

⚠️ Make a GET request with the four name parameters. Do you get a JSON object containing name1, name2, name3, and name4 attributes encoded in base64?

:bulb: Having trouble? Look back to old branches - these skills were all used before!

ghost commented 3 years ago

That's it for Week 4! Great job on finishing the course!

derk1021 / serverless-bitproj