Theory
Theory
Comments

Be careful, children!

Muffin was pleased with your work and gave you a new task: now you need to add product cards to the page of the selfie stick shop.

Previously, we received data about the state of the products; this time, complete information will be loaded from the 1-Muffin program. The data will contain the name of the product, its price, image, availability for order and other information. Therefore, to solve the problem, we do not need a layout designer, because we will have all the data. We will add the elements to the layout using scripts.

Even though 1-Muffin program is glitching for now and does not want to give us the loaded info. Therefore, first, in order not to lose time, we will create one card from scratch. The layout designer showed us how the product cards should be laid out, and that’s why we already have them in the layout. We will use these cards as models when creating our own, and then delete them and add all the cards by ourselves.

As usual, we will solve the task step-by-step: create an element, fill it with the necessary content and add suitable classes.

To make the card appear in the layout, you need to find the parent element where this card will be added to. In our case, it is the products list. It’s in it that the product cards are stored, and three of them are already in the layout. We can find them not only with querySelectorAll, but also with property children of the products list.

Accessing the property looks like this: element.children. This property returns a collection of child, that is, nested, DOM elements. In the case of our list, the collection must consist of three elements: one for each element of the li list.

Before adding a new card, we’ll find the products list and log the list of its child elements in the console using children. Let’s sure that the collection length is equal to the number of nested elements, and only then will we begin to add a new card.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Catalog | Device</title> <link rel="stylesheet" href="device/setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="products"> <li class="product product--available"> <h2 class="product__title">Selfie stick for beginners</h2> <img class="product__image" src="device/item-1.jpg" alt="Selfie stick for beginners"> <p class="product__price">200 ₽</p> </li> <li class="product product--unavailable"> <h2 class="product__title">Professional selfie stick</h2> <img class="product__image" src="device/item-2.jpg" alt="Professional selfie stick"> <p class="product__price">1,500 ₽</p> </li> <li class="product product--available"> <h2 class="product__title">Unsinkable selfie stick</h2> <img class="product__image" src="device/item-3.jpg" alt="Unsinkable selfie stick"> <p class="product__price">2,500 ₽</p> </li> </ul> <script src="script.js"></script> </body> </html>

CSS

.products { display: flex; flex-wrap: wrap; justify-content: space-between; width: 570px; margin: 20px auto; padding: 0; list-style: none; } .product { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; width: 270px; margin-bottom: 30px; } .product__image { order: -1; width: 270px; height: 380px; margin-bottom: 15px; } .product__title { max-width: 180px; margin: 0; font-weight: 500; font-size: 18px; line-height: 24px; } .product__price { max-width: 80px; margin: 0; text-align: right; font-weight: 300; font-size: 16px; line-height: 27px; } .product--special { order: -1; width: 100%; height: 380px; flex-direction: column; justify-content: flex-start; align-content: space-between; } .product--special .product__title { width: 270px; max-width: 100%; margin-bottom: 10px; font-size: 28px; line-height: 36px; } .product--special .product__price { width: 270px; max-width: 100%; text-align: left; text-decoration: line-through; color: #cccccc; } .product--special .product__special-price { margin: 0; } .product--special .product__image { outline: 3px solid #ffc600; } .product--special::before { content: "Product of the day"; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; padding: 5px 10px; font-weight: 500; color: #111111; text-transform: uppercase; background-color: #ffc600; } .product--available::after, .product--unavailable::after { position: absolute; top: 343px; left: 50%; padding: 10px 5px 2px 5px; border-bottom: 1px solid #57c74b; transform: translateX(-50%); } .product--available::after { content: "In stock"; } .product--unavailable { filter: grayscale(1) opacity(0.7); } .product--unavailable::after { content: "Out of stock"; } .product--special.product--available::after, .product--special.product--unavailable::after { left: 135px; }

JavaScript

Click inside the mini browser to put the focus in this window.

Goalscompleted

Use querySelector to find the element with the products class and write it into the cardList variable.
Log cardList child elements in the console.

Be careful, children!

Comments

Log in

Sign up

Restore access