Introduction to Web APIs: Dynamically Generated Elements
This practical lesson explores a combination of multiple Web APIs that can be used to create dynamically generated elements on a page.
Learning Objectives
- Learn how to add an event listener to a button and reference a function to handle the event
- Learn how to create a fetch request to return JSON data
- Learn how to parse JSON with the .json() method
- Learn how to loop through parsed JSON data through the then statement
- Learn how to create a list item element within the for loop
- Learn how to extract specific parts of the parse data to use as text content for the list item
- Learn how to place the list item on the page within the unordered list element
Intended Audience
This lesson is intended for anyone who wants to learn about creating and placing dynamically generated elements on a page.
Prerequisites
Anyone with an interest in dynamically generated elements or Web APIs in general.
The following lessons can be helpful in understanding the concepts presented in this lesson:
Introduction to Web APIs: Fetch API
Introduction to Web APIs: Event Listeners
Introduction to Web APIs: DOM Manipulation
Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.
Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.
Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.
Farish is an avid powerlifter, sushi lover, and occasional Funko collector.