7 - Render Images from Data Sources - JSON APIs and AJAX - freeCodeCamp Tutorial

We look at rendering the images from our API Data. We create an image tag for each picture, extracting and assigning the source and alt text properties from each object.

Link to challenge : https://www.freecodecamp.org/learn/data-visualization/json-apis-and-ajax/render-images-from-data-sources Concepts: img The HTML img element embeds an image into the document. The src attribute is required, and contains the path to the image you want to embed. The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

forEach() The forEach() method executes a provided function once for each array element. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

innerHTML The Element property innerHTML gets or sets the HTML or XML markup contained within the element. https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML -————————————————————————————————————- JSON (JavaScript Object Notation) is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types.

Ajax is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page.

freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience.

Thanks for Watching! ... https://www.youtube.com/watch?v=HgFt5R-zUEg