diff --git "a/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \321\202\320\265\320\272\321\201\321\202 \320\262\320\274\320\265\321\201\321\202\320\276 \320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\270/app.js" "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \321\202\320\265\320\272\321\201\321\202 \320\262\320\274\320\265\321\201\321\202\320\276 \320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\270/app.js" new file mode 100644 index 0000000..bb2a0a4 --- /dev/null +++ "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \321\202\320\265\320\272\321\201\321\202 \320\262\320\274\320\265\321\201\321\202\320\276 \320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\270/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 = '
' + randomTetx + "
"; + // 6.2 внутри .product есть .productName, после него вставляем div.desc и текстом из переменной из п. 6.1 + card.productName.insertAdjacentHTML("beforeend", divDesc); + // 6.3 внутри .product у кнопки текст ставим "Отмена" + card.button.innerText = "Отмена"; +} \ No newline at end of file diff --git "a/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \321\202\320\265\320\272\321\201\321\202 \320\262\320\274\320\265\321\201\321\202\320\276 \320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\270/card.html" "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \321\202\320\265\320\272\321\201\321\202 \320\262\320\274\320\265\321\201\321\202\320\276 \320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\270/card.html" new file mode 100644 index 0000000..597e8fb --- /dev/null +++ "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \321\202\320\265\320\272\321\201\321\202 \320\262\320\274\320\265\321\201\321\202\320\276 \320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\270/card.html" @@ -0,0 +1,39 @@ + + + + + + + + + Document + + + +

+ Сделайте, чтобы при клике по кнопке, вместо картинки над этой кнопкой + появлялся какой-нибудь текст. +

+ +
+
+
Product 1 name
+ + +
+
+
Product 2 name
+ + +
+
+
Product 3 name
+ + +
+
+ + + + + \ No newline at end of file diff --git "a/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \321\202\320\265\320\272\321\201\321\202 \320\262\320\274\320\265\321\201\321\202\320\276 \320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\270/style.css" "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \321\202\320\265\320\272\321\201\321\202 \320\262\320\274\320\265\321\201\321\202\320\276 \320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\270/style.css" new file mode 100644 index 0000000..fa5fbd6 --- /dev/null +++ "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \321\202\320\265\320\272\321\201\321\202 \320\262\320\274\320\265\321\201\321\202\320\276 \320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\270/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; +} \ No newline at end of file diff --git "a/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\320\276\320\264\320\263\321\200\321\203\320\267\320\272\320\260 \320\277\320\276\321\201\321\202\320\276\320\262/load.html" "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\320\276\320\264\320\263\321\200\321\203\320\267\320\272\320\260 \320\277\320\276\321\201\321\202\320\276\320\262/load.html" new file mode 100644 index 0000000..491403c --- /dev/null +++ "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\320\276\320\264\320\263\321\200\321\203\320\267\320\272\320\260 \320\277\320\276\321\201\321\202\320\276\320\262/load.html" @@ -0,0 +1,23 @@ + + + + + + + Document + + + + +
+

+ Нужно сделать, чтобы при прокрутке на страницу подгружались все новые + и новые посты. +

+
+
+ + + + + \ No newline at end of file diff --git "a/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\320\276\320\264\320\263\321\200\321\203\320\267\320\272\320\260 \320\277\320\276\321\201\321\202\320\276\320\262/load.js" "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\320\276\320\264\320\263\321\200\321\203\320\267\320\272\320\260 \320\277\320\276\321\201\321\202\320\276\320\262/load.js" new file mode 100644 index 0000000..a07a8cc --- /dev/null +++ "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\320\276\320\264\320\263\321\200\321\203\320\267\320\272\320\260 \320\277\320\276\321\201\321\202\320\276\320\262/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 `
+ + 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. +
`; +} \ No newline at end of file diff --git "a/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\320\276\320\264\320\263\321\200\321\203\320\267\320\272\320\260 \320\277\320\276\321\201\321\202\320\276\320\262/style.css" "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\320\276\320\264\320\263\321\200\321\203\320\267\320\272\320\260 \320\277\320\276\321\201\321\202\320\276\320\262/style.css" new file mode 100644 index 0000000..31180e9 --- /dev/null +++ "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\320\276\320\264\320\263\321\200\321\203\320\267\320\272\320\260 \320\277\320\276\321\201\321\202\320\276\320\262/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 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3 \321\210\320\260\321\205\320\274\320\260\321\202\320\275\320\260\321\217 \320\264\320\276\321\201\320\272\320\260/chess.html" "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3 \321\210\320\260\321\205\320\274\320\260\321\202\320\275\320\260\321\217 \320\264\320\276\321\201\320\272\320\260/chess.html" new file mode 100644 index 0000000..8ebf5a5 --- /dev/null +++ "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3 \321\210\320\260\321\205\320\274\320\260\321\202\320\275\320\260\321\217 \320\264\320\276\321\201\320\272\320\260/chess.html" @@ -0,0 +1,17 @@ + + + + + + Document + + + + + + + + + + \ No newline at end of file diff --git "a/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3 \321\210\320\260\321\205\320\274\320\260\321\202\320\275\320\260\321\217 \320\264\320\276\321\201\320\272\320\260/scripts/app.js" "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3 \321\210\320\260\321\205\320\274\320\260\321\202\320\275\320\260\321\217 \320\264\320\276\321\201\320\272\320\260/scripts/app.js" new file mode 100644 index 0000000..e00ed1c --- /dev/null +++ "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3 \321\210\320\260\321\205\320\274\320\260\321\202\320\275\320\260\321\217 \320\264\320\276\321\201\320\272\320\260/scripts/app.js" @@ -0,0 +1,188 @@ +let app = { + config: { + rows: [8, 7, 6, 5, 4, 3, 2, 1], + cols: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] + }, + + run() { + //генерируем доску + let board = this.generateBoard(); + //добавляем доску в body + document.body.innerHTML = board; + //помещаем на доску все фигуры кроме пешек + this.insertFiguresOnDesk(); + //добавляем пешки + this.insertPawns(); + //добавляем колонку с номерами строк + this.insertRowsNumbers(); + //добавляем строку с названиями колонок + this.insertColsChars(); + }, + + /** + * Метод вставляет пешки на доску. + */ + insertPawns() { + // 6. получаем все теги td из 7 линии игрового поля, туда мы будем вставлять белые пешки + let whitePawnsRow = document.querySelectorAll('tr:nth-child(2)>td'); + for (let i = 0; i < whitePawnsRow.length; i++) { + // 6.1 вставляем в текущий тег td белую пешку + whitePawnsRow[i].innerHTML = this.getFigure('pawn', 'whiteFigure'); + } + + // 6.2 получаем все теги td из 2 линии игрового поля, туда мы будем вставлять черные пешки + let blackPawnsRow = document.querySelectorAll('tr:nth-child(7)>td'); + for (let i = 0; i < blackPawnsRow.length; i++) { + // 6.3 вставляем в текущий тег td черную пешку + blackPawnsRow[i].innerHTML = this.getFigure('pawn', 'blackFigure'); + } + }, + + /** + * Метод вставляет на доску все фигуры, кроме пешек. + */ + insertFiguresOnDesk() { + // 5. в цикле перебираем массив positions + for (let i = 0; i < positions.length; i++) { + let figure = this.getFigure(positions[i].figure, positions[i].color + "Figure"); + let cell = document.querySelector(`[data-rownum="${positions[i].coordRow}"][data-colchar="${positions[i].coordCol}"]`); + cell.innerHTML = figure; + console.log(figure) + } + }, + + /** + * Метод возвращает тег i в виде строки, с подставленным именем + * фигуры и классом, управляющим цветом фигуры. + * @param {string} name название фигуры, возможные значения rook, knight, bishop, queen, king, pawn. + * @param {string} colorClass цвет фигуры, м.б. "whiteFigure", "blackFigure". + * @returns {string} + */ + getFigure(name, colorClass) { + // 4. возвращаем в виде строки html-разметку фигуры, пример фигуры смотрите здесь https://fontawesome.com/icons/chess-rook?style=solid + return ``; // вставьте в ${} нужные значения + }, + + /** + * Метод генерирует игровое поле 8 на 8. + * @returns {string} html разметка в виде строки. + */ + generateBoard() { + // 3. создаем переменную board и присваиваем ей пустую строку, в ней будет храниться разметка игрового поля в виде строки + board = ''; + // 3.1 создаем переменную rowStartWithColor, в которой укажем, что линия на игровом поле будет начинаться с белого цвета + // т.е. присваиваем строку "white" + rowStartWithColor = 'white'; + // 3.2 в цикле перебираем все строки из конфига + for (let i = 0; i < this.config.cols.length; i++) { + // 3.3 здесь в переменной row в виде строки будет храниться разметка для линии на поле (тег tr), + // сейчас туда присваиваем пустую строку + let row = ""; + // 3.4 проверяем, начинаем ли мы линию (переменная rowStartWithColor) с белого цвета (строка "white") + if (rowStartWithColor == 'white') { + // 3.5 в переменную row записываем результат работы функции this.generateRow, + // которой передали цвет, с которого начинается линия на поле, а также this.config.rows[i] + row = this.generateRow('white', this.config.rows[i]); + // 3.6 затем меняем rowStartWithColor на "black" + rowStartWithColor = 'black'; + } else { + // 3.7 делаем то же что и в п. 1.5 + row = this.generateRow('black', this.config.rows[i]); + // 3.8 меняем rowStartWithColor на "white" + rowStartWithColor = 'white'; + + } + // 3.9 в board дописываем с помощью +=, то что получилось в переменной row + board += row; + } + return `${board}
`; + }, + + /** + * Метод генерирует тег tr (строку игровой доски) с закрашенными тегами + * td (ячейкам). + * @param {string} startWithColor с какого цвета строка начинается от левого края, + * м.б. "white", "black". + * @param {number} rowNum номер строки от 8 до 1, т.к. шахматная доска формируется + * сверху вниз, поэтому номер начинается с 8. + * @returns {string} html-разметка, тег tr с оформленными внутри тегами td. + */ + generateRow(startWithColor, rowNum) { + // 2. создаем переменную currentColorClass, в которую пишем startWithColor + currentColorClass = startWithColor; + // 2.1 создаем переменную row и присваиваем ей пустую строку, в ней будет храниться набор тегов td в виде + // строки, т.е. это будет одна линия игрового поля + row = ''; + // 2.2 в цикле перебираем массив cols из config + for (let i = 0; i < this.config.cols.length; i++) { + // 2.3 создаем переменную field, в которую записываем пур + if (currentColorClass == 'white') { + field = this.generateField(currentColorClass, rowNum, this.config.cols[i]); + // 2.6 присваиваем в currentColorClass строку "black" + currentColorClass = "black"; + } else { + // 2.7 делаем то же что и в п. 2.5, только первым параметром передаем "black" + field = this.generateField('black', rowNum, this.config.cols[i]); + // 2.8 переменной currentColorClass присваиваем строку "white" + currentColorClass = 'white'; + } + // 2.9 в переменную row дописываем с помощью += то что получилось в field + row += field; + } + return `${row}`; + }, + + /** + * Метод генерирует ячейку (тег td) с нужным классом цвета + * и координатами на поле. + * @param {string} color класс цвета ячейки, м.б. "white", "black". + * @param {number} rowNum номер строки игровой доски. + * @param {string} colChar буква колонки игровой доски. + * @returns {string} html-разметка с заполненными атрибутами координат и классом цвета. + */ + generateField(color, rowNum, colChar) { + // 1. вставьте нужные значения в атрибуты + return ``; + }, + + /** + * Метод вставляет на существующую доску колонку + * слева, с указанием номера строки. + */ + insertRowsNumbers() { + // 7. получаем все теги tr + let trs = document.querySelectorAll('tr'); + // 7.1 перебираем эти теги в цикле + for (let i = 0; i < trs.length; i++) { + // 7.2 создаем тег td + let td = document.createElement('td'); + // 7.3 в текущий тег td в innerText вставляем номер строки из this.config.rows + td.innerText = this.config.rows[i]; + // 7.4 получившийся тег td вставляем в текущую строку (тег tr) + trs[i].insertAdjacentElement("afterbegin", td); + } + }, + + /** + * Метод создает строку (tr) с названиями колонок в виде букв, + * а также в начале вставляет пустую ячейку, которая идет под + * цифрами. + */ + insertColsChars() { + // 8. создаем тег tr + let tr = document.createElement('tr'); + // 8.1 затем в innerHTML тега tr дописываем пустой тег td + tr.innerHTML += ''; + // 8.2 в цикле перебираем колонки из this.config.cols + for (let i = 0; i < this.config.cols.length; i++) { + // 8.3 в innerHTML с помощью += дописываем тег td c буквой текущей колонки из this.config.cols + tr.innerHTML += `${this.config.cols[i]}`; + } + // 8.4 получаем тег tbody + let tbody = document.querySelector('tbody'); + // 8.5 и в него перед вставляем значение из переменной tr + tbody.insertAdjacentElement('beforeend', tr); + }, +} + +app.run(); \ No newline at end of file diff --git "a/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3 \321\210\320\260\321\205\320\274\320\260\321\202\320\275\320\260\321\217 \320\264\320\276\321\201\320\272\320\260/scripts/positions.js" "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3 \321\210\320\260\321\205\320\274\320\260\321\202\320\275\320\260\321\217 \320\264\320\276\321\201\320\272\320\260/scripts/positions.js" new file mode 100644 index 0000000..a3d10e1 --- /dev/null +++ "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3 \321\210\320\260\321\205\320\274\320\260\321\202\320\275\320\260\321\217 \320\264\320\276\321\201\320\272\320\260/scripts/positions.js" @@ -0,0 +1,104 @@ +let positions = [ + //названия и координаты белых фигур, кроме пешек + { + coordCol: 'a', + coordRow: 1, + figure: 'rook', + color: 'white' + }, + { + coordCol: 'b', + coordRow: 1, + figure: 'knight', + color: 'white' + }, + { + coordCol: 'c', + coordRow: 1, + figure: 'bishop', + color: 'white' + }, + { + coordCol: 'd', + coordRow: 1, + figure: 'queen', + color: 'white' + }, + { + coordCol: 'e', + coordRow: 1, + figure: 'king', + color: 'white' + }, + { + coordCol: 'f', + coordRow: 1, + figure: 'bishop', + color: 'white' + }, + { + coordCol: 'g', + coordRow: 1, + figure: 'knight', + color: 'white' + }, + { + coordCol: 'h', + coordRow: 1, + figure: 'rook', + color: 'white' + }, + + + + + //названия и координаты черных фигур, кроме пешек + { + coordCol: 'a', + coordRow: 8, + figure: 'rook', + color: 'black' + }, + { + coordCol: 'b', + coordRow: 8, + figure: 'knight', + color: 'black' + }, + { + coordCol: 'c', + coordRow: 8, + figure: 'bishop', + color: 'black' + }, + { + coordCol: 'd', + coordRow: 8, + figure: 'queen', + color: 'black' + }, + { + coordCol: 'e', + coordRow: 8, + figure: 'king', + color: 'black' + }, + { + coordCol: 'f', + coordRow: 8, + figure: 'bishop', + color: 'black' + }, + { + coordCol: 'g', + coordRow: 8, + figure: 'knight', + color: 'black' + }, + { + coordCol: 'h', + coordRow: 8, + figure: 'rook', + color: 'black' + }, +]; \ No newline at end of file diff --git "a/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3 \321\210\320\260\321\205\320\274\320\260\321\202\320\275\320\260\321\217 \320\264\320\276\321\201\320\272\320\260/styles/style.css" "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3 \321\210\320\260\321\205\320\274\320\260\321\202\320\275\320\260\321\217 \320\264\320\276\321\201\320\272\320\260/styles/style.css" new file mode 100644 index 0000000..99d4a98 --- /dev/null +++ "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3 \321\210\320\260\321\205\320\274\320\260\321\202\320\275\320\260\321\217 \320\264\320\276\321\201\320\272\320\260/styles/style.css" @@ -0,0 +1,36 @@ +table { + border-collapse: collapse; +} + +td { + width: 40px; + height: 40px; + border: 1px solid black; + text-align: center; +} + +.white { + background: #FFCF73; +} + +.black { + background: #7a5000; +} + +tr:last-child td:first-child { + border-left: none; + border-bottom: none; +} + +.whiteFigure { + color: white; +} + +.blackFigure { + color: black; +} + +i { + font-size: 24px; + text-shadow: 0 0 3px grey; +} \ No newline at end of file diff --git "a/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/4 \320\277\321\200\320\276\320\271\320\264\320\270\321\202\320\265 \321\202\320\265\321\201\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265.url" "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/4 \320\277\321\200\320\276\320\271\320\264\320\270\321\202\320\265 \321\202\320\265\321\201\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265.url" new file mode 100644 index 0000000..8ee22d4 --- /dev/null +++ "b/hw8/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/4 \320\277\321\200\320\276\320\271\320\264\320\270\321\202\320\265 \321\202\320\265\321\201\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265.url" @@ -0,0 +1,5 @@ +[{000214A0-0000-0000-C000-000000000046}] +Prop3=19,11 +[InternetShortcut] +IDList= +URL=https://forms.gle/5SobmMbVTEPMWLBe9