HTML Academy
Find every single one
Introduction to JavaScript in the browser5/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”
Temporarily unavailable
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Under cover

We found all products on the page. Now we need access each found DOM element from the collection one by one and add the appropriate classes to it. How do we do it?

Note that the DOM collection obtained with querySelectorAll is similar to an array. It’s really so, it is similar to it, but it is not an array. Therefore such collections are also called pseudo-arrays. We’ll talk in detail about the differences between collections and arrays in other courses, but for now, we’ll go over our DOM collection. This can be done using the for we are already familiar with.

We’ll go through the found products and temporarily add to each DOM element the availability class product--available. That way we’ll make sure that the loop really works.

Comments

  • index.html
  • style.css
  • script.js
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Catalog | Technomart</title> <link rel="stylesheet" href="technomart/setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="products"> <li class="product"> <h2 class="product__title">Combination pliers “Superhook”</h2> <img class="product__image" src="technomart/good-1.jpg" width="200" height="150" alt="Combination pliers “Superhook”"> <p class="product__price">800 ₽</p> </li> <li class="product"> <h2 class="product__title">Screwdriver “Philly”</h2> <img class="product__image" src="technomart/good-2.jpg" width="200" height="150" alt="Screwdriver “Philly”"> <p class="product__price">550 ₽</p> </li> <li class="product"> <h2 class="product__title">Pliers “Copernicus”</h2> <img class="product__image" src="technomart/good-3.jpg" width="200" height="150" alt="Pliers “Copernicus”"> <p class="product__price">1,350 R.</p> </li> <li class="product"> <h2 class="product__title">Puncher “Hello, neighbor!”</h2> <img class="product__image" src="technomart/good-4.jpg" width="200" height="150" alt="Puncher “Hello, neighbor!”"> <p class="product__price">7,500 ₽</p> </li> <li class="product"> <h2 class="product__title">Hammer “Mjöllnir”</h2> <img class="product__image" src="technomart/good-5.jpg" width="200" height="150" alt="Hammer “Mjöllnir”"> <p class="product__price">2,000 ₽</p> </li> </ul> <script src="script.js"></script> </body> </html>
CSS
.product { position: relative; display: flex; flex-direction: column; align-items: center; width: 220px; margin-bottom: 20px; text-align: center; border: 1px solid #cccccc; } .product--available::before { content: ""; position: absolute; top: 5px; left: 5px; width: 15px; height: 15px; padding: 5px; background-image: url("technomart/check.svg"); background-repeat: no-repeat; background-position: center; background-size: 18px; border: 1px solid #4eb543; border-radius: 50%; } .product--unavailable { filter: grayscale(1) opacity(0.7); } .product--unavailable::before { content: "Out of stock"; position: absolute; top: 0; left: 0; padding: 5px; font-size: 14px; } .product--special { flex-basis: 100%; order: -1; border-color: #ee3643; } .product--special::after { content: "Product of the day"; position: absolute; top: 0; right: 0; height: 30px; padding-right: 10px; padding-left: 10px; line-height: 30px; color: #ffffff; background-color: #ee3643; }
JavaScript
var catalogData = [ { isAvailable: true, isSpecial: false }, { isAvailable: false, isSpecial: false }, { isAvailable: true, isSpecial: true }, { isAvailable: true, isSpecial: false }, { isAvailable: false, isSpecial: false } ]; var updateCards = function (products) { var elements = document.querySelectorAll('.product'); console.log(elements); }; updateCards(catalogData);

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

    In the body of the updateCards function:

    1. Delete log of elements in the console and instead write a for loop, which iterates through the elements list, increasing the value of variable i from 0 to the length of the list.
    2. Inside the loop, create a variable element and write in it the current DOM element of the elements[i] list.
    3. Log element in the console.
    4. Add product--available class to 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.