Interactive online courses HTML Academy
2026-03-09 10:47 Diff
https://htmlacademy.org/courses/javascript-browser/browser-intro/add-object

Finally, Muffin sent out an example of data load for one product. It’s not much, but it’s enough to complete working on the createCard function. After all, now all the data in it is static, that is, the same, and no matter how many times we call it, the cards will look like spitting images of each other.

Information about the product is an object, each property of which describes the characteristic of the product. First, we’ll work with these properties:

  • imgUrl is an image address;
  • text is product name;
  • price is price.

In order for the function to return different data in the end, it must receive different input data. Therefore, we first add parameter product to the createCard function and will then transfer the received object with data to it (by the way, it is already inserted in the code, but it was commented out).

Then inside the function, we need to replace the fixed values ​​with the properties of the input parameter. For example:

// Before: var title = createElement('h2', 'product__title', 'Professional selfie stick'); picture.alt = 'Professional selfie stick'; // After: var title = createElement('h2', 'product__title', product.text); picture.alt = product.text;