t-rexamarin · t-rexamarin · Oct 26, 2021 · Oct 31, 2021 · Nov 8, 2021
diff --git a/1 текст вместо картинки/app.js b/1 текст вместо картинки/app.js
@@ -0,0 +1,76 @@
+'use strict';
+// 1. получите все кнопки и сохраните в переменную
+
+// 1.1 затем проитерируйтесь по кнопкам и каждой из
+// них добавьте обработчик клика - функцию handleClick
+let buttons = document.querySelectorAll('button');
+buttons.forEach(function(button) {
+    button.addEventListener('click', handleClick);
+});
+
+/**
+ * Функция обрабатывает клик по кнопке в карточке товара и попеременно вызывает
+ * функции для показа или скрытия текста о товаре.
+ * @param {MouseEvent} clickedButtonEvent 
+ */
+function handleClick(clickedButtonEvent) {
+    // 2. из объекта события получите ссылку на .product и
+    // сохраните в переменную:
+    // const cardNode = ;
+    const cardNode = clickedButtonEvent.target.parentNode;
+
+    // 3. создайте литерал объекта со следующими свойствами:
+    const card = {
+        wrap: cardNode, // здесь элемент с классом .product
+        img: cardNode.querySelector('img'), // здесь картинка внутри .product
+        productName: cardNode.querySelector('.productName'), // здесь .productName, который внутри .product
+        button: cardNode.querySelector('button'), // здесь button, который внутри .product
+    };
+
+    // 4. получаем текст на кнопке, которая внутри .product
+    let btnTxt = card.button.innerText;
+
+    if (btnTxt === 'Подробнее') { // 4.1 проверяем равняется ли этот текст строке "Подробнее"
+        // 4.2 если да, то передаем объект card в функцию showMoreText
+        showMoreText(card);
+    } else if (btnTxt === 'Отмена') { // 4.3 проверяем равняется ли текст на кнопке строке "Отмена"
+        // 4.4 если да, то передаем объект card в функцию hideMoreText
+        hideMoreText(card);
+    }
+}
+
+/**
+ * Функция скрывает текст с описанием товара.
+ * @param {Object} card 
+ * @param {HTMLDivElement} card.wrap
+ * @param {HTMLImageElement} card.img
+ * @param {HTMLDivElement} card.productName
+ * @param {HTMLButtonElement} card.button
+ */
+function hideMoreText(card) {
+    // 5. картинке внутри .product ставим стиль display: block
+    card.img.style.display = 'block';
+    // 5.1 внутри .product находим элемент с классом .desc и удаляем его
+    card.wrap.querySelector('.desc').remove();
+    // 5.2 кнопке, которая внутри .product ставим текст "Подробнее"
+    card.button.innerText = 'Подробнее';
+}
+
+/**
+ * Функция показывает текст с описанием товара.
+ * @param {Object} card 
+ * @param {HTMLDivElement} card.wrap
+ * @param {HTMLImageElement} card.img
+ * @param {HTMLDivElement} card.productName
+ * @param {HTMLButtonElement} card.button 
+ */
+function showMoreText(card) {
+    // 6. картинке внутри .product ставим display: none
+    card.img.style.display = 'none';
+    // 6.1 сохраняем произвольный текст в переменную
+    const myTxt = 'A Node object, representing the parent node of a node, or null if the node has no parent';
+    // 6.2 внутри .product есть .productName, после него вставляем div.desc и текстом из переменной из п. 6.1
+    card.productName.insertAdjacentHTML('afterend', `<div class="desc">${myTxt}</div>`);
+    // 6.3 внутри .product у кнопки текст ставим "Отмена"
+    card.button.innerText = 'Отмена';
+}
diff --git a/1 текст вместо картинки/card.html b/1 текст вместо картинки/card.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <p>
+        Сделайте, чтобы при клике по кнопке, вместо картинки над этой кнопкой
+        появлялся какой-нибудь текст.
+    </p>
+
+    <div class="products">
+        <div class="product">
+            <div class="productName">Product 1 name</div>
+            <img src="http://unsplash.it/150/150?random&gravity=center" alt="">
+            <button>Подробнее</button>
+        </div>
+        <div class="product">
+            <div class="productName">Product 2 name</div>
+            <img src="http://unsplash.it/150/150?random&gravity=center" alt="">
+            <button>Подробнее</button>
+        </div>
+        <div class="product">
+            <div class="productName">Product 3 name</div>
+            <img src="http://unsplash.it/150/150?random&gravity=center" alt="">
+            <button>Подробнее</button>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/1 текст вместо картинки/style.css b/1 текст вместо картинки/style.css
@@ -0,0 +1,22 @@
+body {
+    font-size: 24px;
+}
+
+.products {
+    display: grid;
+    grid-template-columns: repeat(3, 150px);
+    grid-gap: 20px;
+}
+
+.product {
+    width: 150px;
+}
+
+img {
+    display: block;
+}
+
+button {
+    margin-top: 15px;
+    display: block;
+}
diff --git a/2 подгрузка постов/код/load.html b/2 подгрузка постов/код/load.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>
+            Нужно сделать, чтобы при прокрутке на страницу подгружались все новые
+            и новые посты.
+        </h1>
+        <div class="scrollCheck"></div>
+    </div>
+
+    <script src="load.js"></script>
+</body>
+</html>
diff --git a/2 подгрузка постов/код/load.js b/2 подгрузка постов/код/load.js
@@ -0,0 +1,58 @@
+'use strict';
+
+// 1. Получите ссылку на .scrollCheck
+let scrollCheck = document.querySelector('.scrollCheck');
+
+/**
+ * Инициализация. При открытии страницы вставляем несколько постов
+ * на страницу 
+ */
+function init() {
+    // 4. Если условие истинно, то вызывайте insertPosts и рекурсивно вызывайте
+    // init.
+    if (window.innerHeight === document.body.offsetHeight) {
+        insertPosts();
+        init();
+    }
+}
+init();
+
+document.addEventListener('scroll', function(event) {
+    if (scrollCheck.getBoundingClientRect().top <= window.innerHeight) {
+        // 5. Если условие истинно вызывайте insertPosts.
+        insertPosts();
+    }
+});
+
+/**
+ * Функция вставляет несколько постов на страницу.
+ */
+function insertPosts() {
+    // 3. в postsMarkup вам надо будет в цикле дописывать с помощью конкатенации
+    // разметку, возвращаемую getPostMarkup.
+    // 3.1 в getPostMarkup в качестве аргумента передавайте счетчик цикла
+    let postsMarkup = '';
+    for (let i = 0; i < 3; i++) {
+        postsMarkup += getPostMarkup(i);
+    }
+    // 3.2 Перед scrollCheck вставьте записанную в postsMarkup разметку
+    scrollCheck.insertAdjacentHTML('beforebegin', postsMarkup);
+}
+
+/**
+ * Функция возвращает html-разметку для одного поста, который будет
+ * вставляться на страницу.
+ * @param {number} counter число, для того, чтобы прибавить его ко времени unix.
+ * @returns {string} html-разметка одного поста
+ */
+function getPostMarkup(counter) {
+    /* 2. Сделайте, чтобы в num записывалось текущее время unix (https://mzl.la/3iMz2Jr)
+    плюс counter
+    */
+    const unixT = Date.now();
+    let num = unixT + counter;
+    return `<div class="post">
+        <img src="https://picsum.photos/200/300?random=${num}">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum sapiente suscipit aut? Veniam perspiciatis esse nesciunt ipsum numquam harum velit cumque libero provident voluptatibus iste, alias minus mollitia magni beatae dolor sunt accusantium quidem ipsa exercitationem repellendus reiciendis eaque? Iusto veritatis harum illo tenetur quam explicabo temporibus eum odit, reprehenderit unde maxime sequi incidunt atque beatae accusamus vero officiis dignissimos quasi libero ex ducimus labore asperiores iure. Unde id pariatur eius! Reiciendis similique aperiam quo consequuntur explicabo, enim, reprehenderit aspernatur, vel magni dolor voluptatem maiores quis quam odit deserunt eaque nemo autem optio? Reprehenderit cupiditate nisi nostrum exercitationem adipisci, repudiandae odio ab temporibus dolores, sunt repellat inventore ad fugiat praesentium debitis ipsam deleniti eius eligendi, nobis delectus doloremque mollitia? Quisquam sapiente similique officia officiis laudantium deserunt accusantium alias perspiciatis dolore illum. Rem blanditiis, optio exercitationem ipsam hic laudantium accusamus officiis iste sequi totam ullam, quam sunt eos a commodi modi excepturi! Ex earum deserunt possimus hic inventore sint impedit numquam veritatis harum tempore aut, velit quae maxime aliquid optio consequuntur quam dignissimos explicabo nam fugit temporibus iste aspernatur quisquam. In fugiat aut qui eaque? Aliquam consectetur minus ipsum numquam. Rerum illum illo sit repellat expedita doloribus excepturi nobis nihil! Ratione asperiores reprehenderit velit natus, sunt est, non suscipit impedit culpa dolore molestiae commodi. Dolorem reprehenderit eius, hic similique vel ullam eum eveniet asperiores aspernatur dicta neque nostrum nam quo! Dolorum fugit nobis id cum laborum magnam. Qui dolor, consectetur provident et ea quae dolore necessitatibus assumenda beatae hic odit molestias saepe mollitia! Suscipit quae molestias iure at laboriosam, similique necessitatibus ipsam dolores perspiciatis! Soluta atque vero at, sit fugiat vitae nulla sapiente accusantium, quas maxime nesciunt tempora sed reprehenderit ut. Illum, tenetur ipsam corporis reiciendis similique harum sequi quas voluptate tempore, perferendis dolore, suscipit est incidunt expedita rerum quo. Consectetur ab placeat libero tempora. Beatae soluta nihil dolore? Laboriosam itaque iste hic modi, natus adipisci totam porro voluptatibus asperiores amet consequatur quidem quasi maxime repellat error delectus sapiente. Repellendus, totam, illo rerum non enim assumenda corporis fuga molestias quibusdam recusandae a amet accusantium at, velit adipisci quas mollitia eligendi alias est voluptatum temporibus beatae molestiae? Dolores pariatur quisquam excepturi hic dignissimos illum voluptas, asperiores deserunt quos a quod culpa autem nemo veniam molestiae maiores fuga provident quam quibusdam tenetur repellat necessitatibus deleniti. Earum itaque similique magni suscipit voluptatum, soluta voluptate ratione quis vero nesciunt pariatur perferendis, odit quaerat, doloribus quia.
+    </div>`;
+}
diff --git a/2 подгрузка постов/код/style.css b/2 подгрузка постов/код/style.css
@@ -0,0 +1,25 @@
+body {
+    margin: 0;
+}
+
+.container {
+    width: 1000px;
+    margin: 0 auto;
+    min-height: 100vh;
+    box-shadow: 0 0 10px gray;
+    padding: 15px;
+    box-sizing: border-box;
+}
+
+img {
+    float: left;
+    margin-right: 15px;
+}
+
+.post {
+    overflow: hidden;
+    text-align: justify;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid gray;
+}
diff --git a/2 подгрузка постов/прочитай меня.txt b/2 подгрузка постов/прочитай меня.txt
@@ -0,0 +1 @@
+В материалах урока, в корневой папке, есть видео подсказка для этого задания.
diff --git a/3 шахматная доска (где описан каждый шаг)/chess.html b/3 шахматная доска (где описан каждый шаг)/chess.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
+    <link rel="stylesheet" href="styles/style.css">
+</head>
+<body>
+    Отрисуйте на странице шахматную доску, и расставьте фигуры.
+    Для фигур можете использовать font awesome.
+
+    <script src="scripts/positions.js"></script>
+    <script src="scripts/app.js"></script>
+</body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		В материалах урока, в корневой папке, есть видео подсказка для этого задания.