Interactive online courses HTML Academy
2026-03-09 10:55 Diff
https://htmlacademy.org/courses/javascript-browser/browser-intro/check-special

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Special offer

All we have left to do is to find the product of the day and add the corresponding class to it.

The algorithm is simple: check the value of the isSpecial property of the current product; if it is true, add the product--special class to the DOM element.

And do not forget to remove from the code all console logs, the working program should not have any of them.

Muffin’s task is complete!

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'); for (var i = 0; i < elements.length; i++) { var element = elements[i]; console.log(element); var product = products[i]; console.log(product); var availabilityClass = 'product--available'; if (!product.isAvailable) { availabilityClass = 'product--unavailable'; } element.classList.add(availabilityClass); } }; updateCards(catalogData);

Thanks! We’ll fix everything at once!

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

100%

  1. At the end of the loop body, add one more check to make sure that the product is covered by a special offer.
  2. If the condition is met, add the product--special class to the current DOM element.
  3. Remove all console logs from the code.