Week 4: Ultimate CAT INVASION!

[counselorbot[bot]]

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:

• [ ] 1: Make sure you're on the twocatz-frontend branch
• [ ] 2: Create 4 input boxes to accept 4 names, each with an id of name1, name2, name3, and name4 respectively
• [ ] 3: Modify catzapp/script.js so that it calls your Azure Function with the 4 names as parameters
• [ ] 4: Create 4 img tags, each with an id of image1, image2, image3, and image4 respectively
• [ ] 5: Display the outputs of the Azure Function as images in the tags
• [ ] 6: Commit your updated changes to catzapp/index.html and catzapp/script.js
• [ ] 7: Create a pull request to merge twocatz-frontend onto main, and only merge the pull request when the bot approves your changes!

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

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

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

📹 Walkthrough Video

[counselorbot[bot]]

📝 Week 4 Video Feedback

Please complete after you've viewed the Week 3 walkthroughs! 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 videos, what would it be?

:camping: To move on, comment your feedback.

[saniazkhaja]

I think the walkthroughs are really helpful.

[counselorbot[bot]]

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!

[saniazkhaja]

I got confused over the fact that 4.6 and 4.7 were very similar but different videos. Like 4.7 video showed we were on 4.6, which confused me since we were actually were on 4.7. The instructions also looked very similar.

[counselorbot[bot]]

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

[counselorbot[bot]]

That's it for Week 4! Great job on finishing the course!