Twocatz frontend

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

[beatrixcendana]

• [x] How was the content? Did it help you? Was it too challenging or too easy? Did it help you complete the week's homework? This is the most challenging course because I had to learn API and the front-end at the same time. The video helped me but not so much. Step 3 is the most confusing one.

• [x] How was the pace? Was it hard to follow along? Did we go too slow? It was a little bit hard to follow but it was fun to see the result of the website that we created.

• [x] If you could add/improve something to/in the live stream, what would it be? The documentation at the last step, when we were told to append base64 data. The documentation should be more clear.

[ghost]

Providing Feedback

What was confusing about this week? If you could change or add something to this week, what would you do? Your feedback is valued and appreciated!

[beatrixcendana]

• [x] What was confusing about this week? If you could change or add something to this week, what would you do? Your feedback is valued and appreciated! The process of how to connect the front-end and back-end (in step 7). I think it is best to give more explanations on this.

[ghost]

⏰ Time to merge!

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

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