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:

• [x] Make sure you're on the twocatz-frontend branch
• [x] 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.
• [x] Remove the "random name" feature in your Azure Function
• [x] 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:

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

[danielkimtest]

I found this week's content to be the most fun. I think it really helped connect the dots and was insightful as to why we did what we did in the first two weeks. I do wish sometimes there were refreshers, because often times I needed to use similar code from earlier in the course but I couldn't remember when I learned it. I also wish there was a file that just kind of summed up what we learned each week somewhere with like the key points and maybe like essential fragments of code (for example, the await fetch(url, options) sort of thing so I can easily reference how to make an HTTPS request).

I also really liked having the work sessions as opposed to a live stream. It's nice to be able to talk out the problems, either with instructors or other students, and having people help debug is super nice. Speaking of which, I think something that could be included in a resource page could be different debugging tips: explaining when and how to use console and context.log, how to check it in azure or in the console in vscode, using postman, etc. I often mix up/forget which debugging methods can be used and when, so a resource like that would be super handy.

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

[danielkimtest]

feedback commented

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