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

We added one card, but now Muffin wants us to add a lot of cards at once, based on the received data. The data is not yet available, the system is glitching, but we won’t be losing any time in vain and will get everything ready to solve the problem.

The algorithm for adding one card is not much different from adding ten or twenty cards. We create elements, add classes, attributes and text content to them just like that, only many times. Of course, we must have a function here.

Declare the createCard function, which will be responsible for creating a product card. Inside the function, a list element will be created, and then other parts of the card will be created and packed into it: a header, a picture of the product, and cost. The function will return a ready-to-use DOM element. We will leave the search for the product list and insertion of DOM elements returned from the function into it outside the function.

Such “division of labor” will make our code more universal. The createCard function does not know anything about where to insert the DOM element of the product, and therefore you can reuse it anywhere without any changes. For example, you can insert product cards created in the function into the list of special offers or in a completely different list of new products.

We are gradually moving from handicraft to conveyor production. So it should be a ready-made program that stably and correctly works with any number of elements.