0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
2
<ul><li>Theory</li>
2
<ul><li>Theory</li>
3
<li>Theory</li>
3
<li>Theory</li>
4
<li>Comments</li>
4
<li>Comments</li>
5
</ul><h2>Special offer</h2>
5
</ul><h2>Special offer</h2>
6
<p>All we have left to do is to find the product of the day and add the corresponding class to it.</p>
6
<p>All we have left to do is to find the product of the day and add the corresponding class to it.</p>
7
<p>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.</p>
7
<p>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.</p>
8
<p>And do not forget to remove from the code all console logs, the working program should not have any of them.</p>
8
<p>And do not forget to remove from the code all console logs, the working program should not have any of them.</p>
9
<p>Muffin’s task is complete!</p>
9
<p>Muffin’s task is complete!</p>
10
<h2>Comments</h2>
10
<h2>Comments</h2>
11
<ul><li>index.html</li>
11
<ul><li>index.html</li>
12
<li>style.css</li>
12
<li>style.css</li>
13
<li>script.js</li>
13
<li>script.js</li>
14
</ul><p>HTML</p>
14
</ul><p>HTML</p>
15
<p><!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></p>
15
<p><!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></p>
16
<p>CSS</p>
16
<p>CSS</p>
17
<p>.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; }</p>
17
<p>.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; }</p>
18
<p>JavaScript</p>
18
<p>JavaScript</p>
19
<p>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);</p>
19
<p>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);</p>
20
<p>Thanks! We’ll fix everything at once!</p>
20
<p>Thanks! We’ll fix everything at once!</p>
21
<p>Click inside the mini browser to put the focus in this window.</p>
21
<p>Click inside the mini browser to put the focus in this window.</p>
22
<p>100%</p>
22
<p>100%</p>
23
<ol><li>At the end of the loop body, add one more check to make sure that the product is covered by a special offer.</li>
23
<ol><li>At the end of the loop body, add one more check to make sure that the product is covered by a special offer.</li>
24
<li>If the condition is met, add the product--special class to the current DOM element.</li>
24
<li>If the condition is met, add the product--special class to the current DOM element.</li>
25
<li>Remove all console logs from the code.</li>
25
<li>Remove all console logs from the code.</li>
26
</ol>
26
</ol>