HTML Academy
Refactor and conquer
Introduction to JavaScript in the browser15/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”
One more function
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Adding a picture

Our card does not have a picture of the product. Let’s create it with makeElement, transferring the 'img' tag name and 'product__image' class to the function. We are not going to transfer the third parameter, because the image has no text content.

To make the picture appear on the page, we need to specify the image file address, that is, the value of the src attribute. The value of this attribute can be managed using the property of the DOM element with the same name:

var picture = document.createElement('img');
picture.src = 'images/picture.jpg'

In the same way, we will add an alternative text to the image, that is, a description of the photo. If the photo does not load, the page will display this text so that the user understands what kind of block they are looking at. In addition, this text is recognized by the electronic reader; that is why, when adding this description, we just make the interface element available in a user-friendly way. Add alternative text using the alt property. As you can see, the names of tag attributes and properties of DOM elements are often (but not always) the same.

picture.alt = 'Unsinkable selfie stick';

After creating the image and setting its properties, add the image to the card. Please note, we must add the photo before the product price, because the order of the tags is exactly like this in the layout. Therefore, the code for creating a picture needs to be added before the price creation code.

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 = makeElement('li', 'product'); cardList.appendChild(listItem); console.log(cardList.children); var title = makeElement('h2', 'product__title', 'Professional selfie stick'); listItem.appendChild(title); // Add an image here var price = makeElement('p', 'product__price', '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. Before creating a price, assign the result of the makeElement function call with arguments 'img' and 'product__image' to picture variable.
    2. Give to the created element the 'device/item-4.jpg' image address
    3. and alternative text 'Professional self-stick'.
    4. Add picture to the end listItem.

    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.