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.

[paryswest]

How was the content? Did it help you? Was it too challenging or too easy? Did it help you complete the week's homework? The content was definitely helpful. As I've said last week, keep doing looms, they are great 😊

How was the pace? Was it hard to follow along? Did we go too slow? Ever since week 2, the pace has DRASTICALLY improved. The pace was just right for me.

If you could add/improve something to/in the livestream, what would it be? I would just make sure that next go around in the camp, to have some disclaimers that people should know at a minimum one coding language proficiently enough. It probably would have saved me a lot of trouble (and I also would more than likely have asked way less questions 😅)

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

[paryswest]

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!

Honestly it was definitely the last step. It was omitted, and I honestly read the documentation over and over and I was still confused. I've realized through this camp that many of us are visual learners, so having those visuals (the videos) helped. Even if in the future you guys want to drop videos as hints instead of outright telling people the answer, I think that would help as well.

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