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>Check yourself</h2>
5
</ul><h2>Check yourself</h2>
6
<p>The layout of the first three products was needed only as a hint. We used it when we put our card together using JavaScript.</p>
6
<p>The layout of the first three products was needed only as a hint. We used it when we put our card together using JavaScript.</p>
7
<p>Now, when the function for creating a product card is written, it’s time to get rid of the original layout. HTML code must contain empty tag ul.</p>
7
<p>Now, when the function for creating a product card is written, it’s time to get rid of the original layout. HTML code must contain empty tag ul.</p>
8
<p>Feel free to delete all the list elements from the layout, then call the createCard function and add the result of this function to the DOM. That way we will check that the function works correctly.</p>
8
<p>Feel free to delete all the list elements from the layout, then call the createCard function and add the result of this function to the DOM. That way we will check that the function works correctly.</p>
9
<h2>Comments</h2>
9
<h2>Comments</h2>
10
<ul><li>index.html</li>
10
<ul><li>index.html</li>
11
<li>style.css</li>
11
<li>style.css</li>
12
<li>script.js</li>
12
<li>script.js</li>
13
</ul><p>HTML</p>
13
</ul><p>HTML</p>
14
<p><!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></p>
14
<p><!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></p>
15
<p>CSS</p>
15
<p>CSS</p>
16
<p>.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; }</p>
16
<p>.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; }</p>
17
<p>JavaScript</p>
17
<p>JavaScript</p>
18
<p>var makeElement = function (tagName, className, text) { var element = document.createElement(tagName); element.classList.add(className); if (text) { element.textContent = text; } return element; }; var createCard = function () { var listItem = makeElement('li', 'product'); var title = makeElement('h2', 'product__title', 'Professional selfie stick'); listItem.appendChild(title); var picture = makeElement('img', 'product__image'); picture.src = 'device/item-4.jpg'; picture.alt = 'Professional selfie stick'; listItem.appendChild(picture); var price = makeElement('p', 'product__price', '1000'); listItem.appendChild(price); return listItem; }; var cardList = document.querySelector('.products'); console.log(cardList.children);</p>
18
<p>var makeElement = function (tagName, className, text) { var element = document.createElement(tagName); element.classList.add(className); if (text) { element.textContent = text; } return element; }; var createCard = function () { var listItem = makeElement('li', 'product'); var title = makeElement('h2', 'product__title', 'Professional selfie stick'); listItem.appendChild(title); var picture = makeElement('img', 'product__image'); picture.src = 'device/item-4.jpg'; picture.alt = 'Professional selfie stick'; listItem.appendChild(picture); var price = makeElement('p', 'product__price', '1000'); listItem.appendChild(price); return listItem; }; var cardList = document.querySelector('.products'); console.log(cardList.children);</p>
19
<p>Thanks! We’ll fix everything at once!</p>
19
<p>Thanks! We’ll fix everything at once!</p>
20
<p>Click inside the mini browser to put the focus in this window.</p>
20
<p>Click inside the mini browser to put the focus in this window.</p>
21
<p>100%</p>
21
<p>100%</p>
22
<ol><li>Delete all li from the layout.</li>
22
<ol><li>Delete all li from the layout.</li>
23
<li>In the JS tab, remove all remaining console logs.</li>
23
<li>In the JS tab, remove all remaining console logs.</li>
24
<li>At the end of the program, call the createCard function and write down its result in a variable cardItem.</li>
24
<li>At the end of the program, call the createCard function and write down its result in a variable cardItem.</li>
25
<li>Insert cardItem at the end of cardList DOM element.</li>
25
<li>Insert cardItem at the end of cardList DOM element.</li>
26
</ol>
26
</ol>