dadika123 · dadika123 · Sep 1, 2020 · Sep 11, 2020 · Sep 11, 2020 · Sep 11, 2020
diff --git a/hw8/1 уровень/1 текст вместо картинки/app.js b/hw8/1 уровень/1 текст вместо картинки/app.js
@@ -0,0 +1,80 @@
+"use strict";
+// 1. получите все кнопки и сохраните в переменную
+let buttons = document.querySelectorAll("button");
+// 1.1 затем проитерируйтесь по кнопкам и каждой из
+// них добавьте обработчик клика - функцию handleClick
+for (let index = 0; index < buttons.length; index++) {
+	buttons[index].addEventListener("click", function (clickedButtonEvent) {
+		handleClick(clickedButtonEvent);
+	});
+}
+
+/**
+ * Функция обрабатывает клик по кнопке в карточке товара и попеременно вызывает
+ * функции для показа или скрытия текста о товаре.
+ * @param {MouseEvent} clickedButtonEvent
+ */
+function handleClick(clickedButtonEvent) {
+	// 2. из объекта события получите ссылку на .product и
+	// сохраните в переменную:
+	// const cardNode = ;
+	const cardNode = clickedButtonEvent.target.parentNode;
+	// 3. создайте литерал объекта со следующими свойствами:
+	const card = {
+		wrap: cardNode, // здесь элемент с классом .product
+		img: cardNode.childNodes[3], // здесь картинка внутри .product
+		productName: cardNode.childNodes[1], // здесь .productName, который внутри .product
+		button: cardNode.childNodes[5], // здесь button, который внутри .product
+	};
+
+	// 4. получаем текст на кнопке, которая внутри .product
+	let buttonText = card.button.innerText;
+	if (buttonText == "Подробнее") {
+		// 4.1 проверяем равняется ли этот текст строке "Подробнее"
+		// 4.2 если да, то передаем объект card в функцию showMoreText
+		showMoreText(card);
+	} else if (buttonText == "Отмена") {
+		// 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 и удаляем его
+	document.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 сохраняем произвольный текст в переменную
+	let randomTetx =
+		"Lorem ipsum donec, commodo quam maecenas, molestie auctor metus — vitae leo auctor sagittis mattis.";
+	let divDesc = '<div class="desc">' + randomTetx + "</div>";
+	// 6.2 внутри .product есть .productName, после него вставляем div.desc и текстом из переменной из п. 6.1
+	card.productName.insertAdjacentHTML("beforeend", divDesc);
+	// 6.3 внутри .product у кнопки текст ставим "Отмена"
+	card.button.innerText = "Отмена";
+}
diff --git a/hw8/1 уровень/1 текст вместо картинки/card.html b/hw8/1 уровень/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/hw8/1 уровень/1 текст вместо картинки/style.css b/hw8/1 уровень/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/hw8/1 уровень/2 подгрузка постов/load.html b/hw8/1 уровень/2 подгрузка постов/load.html
@@ -0,0 +1,23 @@
+<!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/hw8/1 уровень/2 подгрузка постов/load.js b/hw8/1 уровень/2 подгрузка постов/load.js
@@ -0,0 +1,59 @@
+'use strict';
+
+// 1. Получите ссылку на .scrollCheck
+let scrollCheck = document.querySelector('.scrollCheck');
+
+/**
+ * Инициализация. При открытии страницы вставляем несколько постов
+ * на страницу 
+ */
+function init() {
+    // 4. Если условие истинно, то вызывайте insertPosts и рекурсивно вызывайте
+    // init.
+    if (window.innerHeight === document.body.offsetHeight) {
+        insertPosts();
+    }
+}
+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 = '';
+    let inputState = document.querySelector('.scrollCheck')
+    let n = 3;
+    for (let i = 0; i < 3; i++) {
+        postsMarkup += getPostMarkup(i);
+    }
+    inputState.insertAdjacentHTML("beforebegin", postsMarkup);
+    // 3.2 Перед scrollCheck вставьте записанную в postsMarkup разметку
+
+}
+
+/**
+ * Функция возвращает html-разметку для одного поста, который будет
+ * вставляться на страницу.
+ * @param {number} counter число, для того, чтобы прибавить его ко времени unix.
+ * @returns {string} html-разметка одного поста
+ */
+function getPostMarkup(counter) {
+    /* 2. Сделайте, чтобы в num записывалось текущее время unix (https://mzl.la/3iMz2Jr)
+    плюс counter
+    */
+    let num = Date.now() + 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/hw8/1 уровень/2 подгрузка постов/style.css b/hw8/1 уровень/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/hw8/1 уровень/3 шахматная доска/chess.html b/hw8/1 уровень/3 шахматная доска/chess.html
@@ -0,0 +1,17 @@
+<!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>
+    <script src="scripts/positions.js"></script>
+    <script src="scripts/app.js"></script>
+</body>
+
+</html>