ghost
commented
3 years ago 📝 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?
muctars
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:
twocatz-frontendbranchidofname1,name2,name3, andname4respectivelycatzapp/script.jsso that it calls your Azure Function with the 4 names as parametersimgtags, each with anidofimage1,image2,image3, andimage4respectivelycatzapp/index.htmlandcatzapp/script.js🚧 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
base64from 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)