Twocatz frontend

[ghost]

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]

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:

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

[chrisasma103]

I think that HTML is not my strong suit. The syntax is surprisingly forgiving for a coding language in that it will generally get what you want on screen no matter your formatting, but combining it with JS was annoying. Also, it would have been nice to have more frontend design stuff included, but I understand that would have been difficult to test for with a bot.

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

[chrisasma103]

I don't think I have any big, specific issues besides the ones I already mentioned.

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