Theory
Theory
Comments

Don’t repeat yourself

Note that as we are in the process of solving the task, we often repeat the same operations: we create elements with document.createElement(), we add classes to it using element.classList.add(), and in some cases also text content using element.textContent. It’s time to add the repeating code to the function so that you don’t have to write many similar lines of code each time.

Declare a function that will accept three input strings: tag name (tagName), class name (className) and text content (text) of the element. Inside it we’ll create an element with a class and text, and then take it out.

Not all elements have text content, that’s why let’s make sure that we can call the function not with three, but with two parameters. JavaScript alone allows us to do this. But we need to provide a check to see if the third parameter is present. We’ll add text to the element using textContent only if parameter text exists.

How to check if a parameter is present? If the parameter wasn’t transferred to the function, its value inside the function will be undefined, that is, it’s not defined. Value undefined is converted to logical value false, therefore, such a simple check is enough:

var createCard = function (required, optional) {
  if (optional) {
    // actions with optional
  }
}

// The function will work, but the actions
// with optional will not be executed
createCard('Required argument');

// The function will work and operations with optional are executed
createCard('Required argument', 'Optional argument');

And what if the argument is transferred? First, it will not equal undefined. Secondly, inside the parentheses operator, the program will get the value of this parameter and convert it into a logical type. As you know from the “Conditions” course, strings can act as conditions. An empty string is converted to false, and a non-empty one to true. That is, text content will be added to the element only when we transfer a non-empty string as the last argument. That is exactly what we need.

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

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); var title = document.createElement('h2'); title.classList.add('product__title'); title.textContent = 'Professional selfie stick'; listItem.appendChild(title); var price = document.createElement('p'); price.classList.add('product__price'); price.textContent = '1000'; listItem.appendChild(price);

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

Goalscompleted

At the beginning of the code, declare a function makeElement with parameters tagName, className, text.
In the body of the function, create a DOM element with tag name tagName and assign it to the element variable.
Add class className to the element.
Add a check to see if the text parameter is available. If the check is successful, add text content text to element.
Return element from the function.

Don’t repeat yourself

Comments

Log in

Sign up

Restore access