Theory
Theory
Comments

Describe yourself

The card is already in the layout, but so far it is empty. Let’s start adding content to it. First of all, we’ll add the name of the product and its price.

The algorithm is almost the same as when adding the card: creating an element, adding a class, inserting text content (product name and price), adding the element to the end of the card. All steps are familiar to us, except adding text. How do we do it?

Each DOM element has a textContent property. It contains the text content of the element. textContent does not get any layout, only text.

// HTML
<p>I am <em>a text element</em>.</p>

// JS
var p = document.querySelector('p');
console.log(p.textContent);
// Logs 'I am a text element.'

This is an object property that can not only be read but also written or rewritten. Therefore, if we want to assign text content to an element, it is enough to write the necessary value in the property.

p.textContent = 'Now I have new contents.';
console.log(p.textContent);
// Logs 'Now I have new contents.'

// In HTML, the tag content will change
<p>Now I have new contents.</p>

Add product name and its price to the card. Make sure that all new elements are displayed on the page.

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:empty { background-color: rgb(225, 225, 239); } .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

var cardList = document.querySelector('.products'); console.log(cardList.children); var listItem = document.createElement('li'); listItem.classList.add('product'); cardList.appendChild(listItem); console.log(cardList.children);

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

Goalscompleted

At the end of the program, create title for the product card h2 and write it into the title variable.
Add the product__title class to the header.
Specify header text 'Professional selfie stick' using textContent.
Add DOM element title to the end of DOM element listItem.
Similarly, after the header, create DOM element p with class product__price and text '1000' and assign it to variable price. Then add price to the end listItem.

Describe yourself

Comments

Log in

Sign up

Restore access