HTML Academy
Don’t repeat yourself
Introduction to JavaScript in the browser14/23
Back to the list of tasks
  • 1. Script to start!
  • 2. Ready or not, here I come
  • 3. First class
  • 4. Find every single one
  • 5. Under cover
  • 6. Temporarily unavailable
  • 7. Special offer
  • 8. Summary of “JavaScript in the browser”. Part 1
  • 9. Twelfth program: “Ice cream test”
  • 10. Be careful, children!
  • 11. Creating a card
  • 12. Describe yourself
  • 13. Don’t repeat yourself
  • 14. Refactor and conquer
  • 15. Adding a picture
  • 16. One more function
  • 17. Check yourself
  • 18. Live data
  • 19. Got it in stock? What if I find one?
  • 20. Special offer
  • 21. Start the conveyor
  • 22. Summary of “JavaScript in the browser”. Part 2
  • 23. Thirteenth program: “Ice cream returns”
Adding a picture
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Refactor and conquer

Now that we have a special function, we can replace all lines of code with element creation, addition of a class and text content with one line with makeElement call. It’ill make the code more readable and convenient.

Please note that when creating a product card with makeElement, we transfer only the li tag and product class to the function. The card does not have any text content, only its child elements have it (product names and prices). Here’s the case for which we wrote a check in the function!

Comments

  • 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 makeElement = function (tagName, className, text) { var element = document.createElement(tagName); element.classList.add(className); if (text) { element.textContent = text; } return element; }; 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);

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

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

100%
Console
Goalscompleted
0
    1. Replace value listItem with makeElement('li', 'product') and delete the string with addition of the class to this element.
    2. Similarly, override the value of the title variable with the result of calling the makeElement function with arguments 'h2', 'product__title', 'Professional selfie stick'. Below, remove the addition of the class and text content to the header.
    3. Similarly, replace the value of the price variable and delete the strings of the code where a class and text content are added to the price element.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.