Week 4: Ultimate CAT INVASION!

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

Ultimate CAT INVASION! ~

Demo: 🐱

It's now time to connect everything together! (catzapp/index.html, catzapp/script.js, and your Azure function)

✅ Task:

[x] 1: Make sure you're on the twocatz-frontend branch
[x] 2: Create 4 input boxes to accept 4 names, each with an id of name1, name2, name3, and name4 respectively
[x] 3: Modify catzapp/script.js so that it calls your Azure Function with the 4 names as parameters
[x] 4: Create 4 img tags, each with an id of image1, image2, image3, and image4 respectively
[ ] 5: Display the outputs of the Azure Function as images in the tags
[ ] 6: Commit your updated changes to catzapp/index.html and catzapp/script.js
[ ] 7: Create a pull request to merge twocatz-frontend onto main, and only merge the pull request when the bot approves your changes!

:bulb: If your test doesn't pass the first time, it might be because your Azure Function is slow to respond. Simply re-run the job like this.

🚧 Test your Work

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

⚠️ When you enter FOUR NAMES into each of the text boxes, do FOUR CAT PICTURES show up below?

1: How can Base64 turn into a Cat?

Now that you should've received strings of base64 from your Azure function call, you need some way to display them for the users.

:question: How can I display base64?

1. Retrieve the base64 values from your API 2. Append `data:image/png;base64,` in front of the base64 data 3. Like you've done previously, modify the `src` attribute of the image tags and set it equal to the string you created in :two: Read more [here](https://www.w3docs.com/snippets/html/how-to-display-base64-images-in-html.html)

ColeHorvat / serverless-camp