Twocatz frontend

[mariiahnied]

Changes made

• [Replace with summaries of general changes made]
• [Did you modify or delete?]
• [How do your changes fix the issue?]

Closes #[issue number]

[ghost]

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] Make sure you're on the twocatz-frontend branch
• [x] Create 4 input boxes to accept 4 names, each with an id of name1, name2, name3, and name4 respectively
• [x] Modify catzapp/script.js so that it calls your Azure Function with the 4 names as parameters
• [x] Create 4 img tags, each with an id of image1, image2, image3, and image4 respectively
• [x] Display the outputs of the Azure Function as images in the tags
• [x] Commit your updated changes to catzapp/index.html and catzapp/script.js

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

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?

:one: Retrieve the base64 values from your API :two: Append `data:image/png;base64,` in front of the base64 data :three: 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)

[ghost]

📝 Week 4 Livestream Feedback

Please complete after you've viewed the Week 3 livestream! If you haven't yet watched it but want to move on, just close this issue and come back to it later.

Comment your feedback:

Help us improve BitCamp Serverless - thank you for your feedback! Here are some questions you may want to answer:

• How was the content? Did it help you? Was it too challenging or too easy? Did it help you complete the week's homework?
• How was the pace? Was it hard to follow along? Did we go too slow?
• If you could add/improve something to/in the livestream, what would it be?

:camping: To move on, comment your feedback.

[mariiahnied]

Thank you!

[mariiahnied]

I loved the course!