From 72a7ef7327994db11999695f437bce46a506d708 Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Tue, 23 Jan 2024 20:07:21 +0100 Subject: [PATCH 01/22] timer --- js-features/countdown/task.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/js-features/countdown/task.js b/js-features/countdown/task.js index e69de29bb2..7159ce0c00 100644 --- a/js-features/countdown/task.js +++ b/js-features/countdown/task.js @@ -0,0 +1,28 @@ +document.addEventListener('DOMContentLoaded', function () { + + let seconds = 600; + + function formatTime(seconds) { + const hours = Math.floor(seconds / 3600); + const minutes = Math.floor((seconds % 3600) / 60); + const remainingSeconds = seconds % 60; + + const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`; + return formattedTime; + } + + function updateTimer() { + if (seconds > 0) { + seconds--; + + document.getElementById('timer').textContent = formatTime(seconds); + + setTimeout(updateTimer, 1000); + } else { + alert('Вы победили в конкурсе!'); + } + } + + updateTimer(); + }); + \ No newline at end of file From f3e1cda1dfccd55d8a7745bbe4f551dfa5109e21 Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Tue, 23 Jan 2024 21:30:05 +0100 Subject: [PATCH 02/22] =?UTF-8?q?=D0=BD=D0=B0=20=D1=80=D0=B5=D0=B2=D1=8C?= =?UTF-8?q?=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js-features/cookie-clicker/task.js | 23 ++++++++++++ js-features/mole-game/task.js | 57 ++++++++++++++++++++++++++++++ 2 files changed, 80 insertions(+) diff --git a/js-features/cookie-clicker/task.js b/js-features/cookie-clicker/task.js index e69de29bb2..a956e0e6ca 100644 --- a/js-features/cookie-clicker/task.js +++ b/js-features/cookie-clicker/task.js @@ -0,0 +1,23 @@ +let clickCount = 0; +const cookieElement = document.getElementById('cookie'); +let lastClickTime = new Date(); + +cookieElement.addEventListener('click', () => { + clickCount++; + + const currentTime = new Date(); + const timeDifference = (currentTime - lastClickTime) / 1000; + const clickSpeed = 1 / timeDifference; + + document.getElementById('click-speed').innerText = `Скорость клика: ${clickSpeed.toFixed(2)} кликов в секунду`; + + lastClickTime = currentTime; + + if (clickCount % 2 === 0) { + cookieElement.style.width = '100px'; + cookieElement.style.height = '100px'; + } else { + cookieElement.style.width = '80px'; + cookieElement.style.height = '80px'; + } +}); \ No newline at end of file diff --git a/js-features/mole-game/task.js b/js-features/mole-game/task.js index e69de29bb2..87f9b527f6 100644 --- a/js-features/mole-game/task.js +++ b/js-features/mole-game/task.js @@ -0,0 +1,57 @@ +let score = 0; +let fails = 0; + +function getHole(index) { + return document.getElementById(`hole${index}`); +} + +function startGame() { + score = 0; + fails = 0; + + for (let i = 1; i <= 9; i++) { + getHole(i).addEventListener('click', onHoleClick); + } + + setInterval(showMole, 1000); +} + +function onHoleClick(event) { + if (event.target.classList.contains('hole_has-mole')) { + score++; + console.log('Победа! Счет: ' + score); + + if (score === 10) { + console.log('Вы выиграли!'); + endGame(); + } + } else { + fails++; + console.log('Поражение! Попыток: ' + fails); + + if (fails === 5) { + console.log('Игра завершена. Вы проиграли.'); + endGame(); + } + } +} + +function showMole() { + for (let i = 1; i <= 9; i++) { + getHole(i).classList.remove('hole_has-mole'); + } + + const randomIndex = Math.floor(Math.random() * 9) + 1; + getHole(randomIndex).classList.add('hole_has-mole'); +} + +function endGame() { + for (let i = 1; i <= 9; i++) { + getHole(i).removeEventListener('click', onHoleClick); + } + + score = 0; + fails = 0; +} + +window.onload = startGame; From a2befe089621b3ebd59b75436d2642724734553a Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sat, 10 Feb 2024 10:45:26 +0100 Subject: [PATCH 03/22] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20?= =?UTF-8?q?=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20=D1=80=D0=B5=D0=B2=D1=8C=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js-features/cookie-clicker/task.js | 5 +++-- js-features/mole-game/task.js | 9 +++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/js-features/cookie-clicker/task.js b/js-features/cookie-clicker/task.js index a956e0e6ca..843eaac86f 100644 --- a/js-features/cookie-clicker/task.js +++ b/js-features/cookie-clicker/task.js @@ -1,14 +1,15 @@ let clickCount = 0; const cookieElement = document.getElementById('cookie'); +const clickCountElement = document.getElementById('click-count'); let lastClickTime = new Date(); cookieElement.addEventListener('click', () => { clickCount++; + clickCountElement.innerText = `Количество кликов: ${clickCount}`; const currentTime = new Date(); const timeDifference = (currentTime - lastClickTime) / 1000; const clickSpeed = 1 / timeDifference; - document.getElementById('click-speed').innerText = `Скорость клика: ${clickSpeed.toFixed(2)} кликов в секунду`; lastClickTime = currentTime; @@ -20,4 +21,4 @@ cookieElement.addEventListener('click', () => { cookieElement.style.width = '80px'; cookieElement.style.height = '80px'; } -}); \ No newline at end of file +}); diff --git a/js-features/mole-game/task.js b/js-features/mole-game/task.js index 87f9b527f6..2a8b2976d1 100644 --- a/js-features/mole-game/task.js +++ b/js-features/mole-game/task.js @@ -1,5 +1,6 @@ let score = 0; let fails = 0; +let scoreDisplay = document.getElementById('score'); function getHole(index) { return document.getElementById(`hole${index}`); @@ -8,6 +9,7 @@ function getHole(index) { function startGame() { score = 0; fails = 0; + scoreDisplay.textContent = score; for (let i = 1; i <= 9; i++) { getHole(i).addEventListener('click', onHoleClick); @@ -19,18 +21,17 @@ function startGame() { function onHoleClick(event) { if (event.target.classList.contains('hole_has-mole')) { score++; - console.log('Победа! Счет: ' + score); + scoreDisplay.textContent = score; if (score === 10) { - console.log('Вы выиграли!'); + alert('Вы выиграли!'); endGame(); } } else { fails++; - console.log('Поражение! Попыток: ' + fails); if (fails === 5) { - console.log('Игра завершена. Вы проиграли.'); + alert('Игра завершена. Вы проиграли.'); endGame(); } } From 6ad0c6dc5b09477cadef3e1dad29beb18b3c3314 Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sat, 10 Feb 2024 14:11:40 +0100 Subject: [PATCH 04/22] =?UTF-8?q?=D0=BD=D0=B0=20=D0=BF=D0=B5=D1=80=D0=B2?= =?UTF-8?q?=D0=BE=D0=B5=20=D1=80=D0=B5=D0=B2=D1=8C=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- event-object/dropdown/task.js | 23 ++++++++++++++ event-object/keysolo/task.js | 57 +++++++++++++++++------------------ event-object/tabs/task.js | 29 ++++++++++++++++++ 3 files changed, 79 insertions(+), 30 deletions(-) diff --git a/event-object/dropdown/task.js b/event-object/dropdown/task.js index e69de29bb2..f21bbc4603 100644 --- a/event-object/dropdown/task.js +++ b/event-object/dropdown/task.js @@ -0,0 +1,23 @@ +document.addEventListener('DOMContentLoaded', function() { + const dropdowns = document.querySelectorAll('.dropdown'); + + dropdowns.forEach(function(dropdown) { + const valueElement = dropdown.querySelector('.dropdown__value'); + const listElement = dropdown.querySelector('.dropdown__list'); + + valueElement.addEventListener('click', function() { + listElement.classList.toggle('dropdown__list_active'); + }); + + const items = listElement.querySelectorAll('.dropdown__item'); + items.forEach(function(item) { + item.addEventListener('click', function(event) { + event.preventDefault(); // Предотвращаем переход по ссылке + + const newValue = item.querySelector('.dropdown__link').textContent; + valueElement.textContent = newValue; + listElement.classList.remove('dropdown__list_active'); + }); + }); + }); +}); diff --git a/event-object/keysolo/task.js b/event-object/keysolo/task.js index ffbc30fbb8..a96eb850af 100644 --- a/event-object/keysolo/task.js +++ b/event-object/keysolo/task.js @@ -17,18 +17,20 @@ class Game { } registerEvents() { - /* - TODO: - Написать обработчик события, который откликается - на каждый введённый символ. - В случае правильного ввода символа вызываем this.success() - При неправильном вводе символа - this.fail(); - DOM-элемент текущего символа находится в свойстве this.currentSymbol. - */ + document.addEventListener('keydown', (event) => { + const pressedKey = event.key.toLowerCase(); + const currentSymbol = this.currentSymbol.textContent.toLowerCase(); + + if (pressedKey === currentSymbol) { + this.success(); + } else { + this.fail(); + } + }); } success() { - if(this.currentSymbol.classList.contains("symbol_current")) this.currentSymbol.classList.remove("symbol_current"); + if (this.currentSymbol.classList.contains('symbol_current')) this.currentSymbol.classList.remove('symbol_current'); this.currentSymbol.classList.add('symbol_correct'); this.currentSymbol = this.currentSymbol.nextElementSibling; @@ -54,41 +56,36 @@ class Game { setNewWord() { const word = this.getWord(); - this.renderWord(word); } getWord() { const words = [ - 'bob', - 'awesome', - 'netology', - 'hello', - 'kitty', - 'rock', - 'youtube', - 'popcorn', - 'cinema', - 'love', - 'javascript' - ], - index = Math.floor(Math.random() * words.length); - + 'bob', + 'awesome', + 'netology', + 'hello', + 'kitty', + 'rock', + 'youtube', + 'popcorn', + 'cinema', + 'love', + 'javascript' + ]; + const index = Math.floor(Math.random() * words.length); return words[index]; } renderWord(word) { const html = [...word] - .map( - (s, i) => - `${s}` - ) + .map((s, i) => `${s}`) .join(''); this.wordElement.innerHTML = html; - this.currentSymbol = this.wordElement.querySelector('.symbol_current'); } } -new Game(document.getElementById('game')) +new Game(document.getElementById('game')); + diff --git a/event-object/tabs/task.js b/event-object/tabs/task.js index e69de29bb2..33c84e7e28 100644 --- a/event-object/tabs/task.js +++ b/event-object/tabs/task.js @@ -0,0 +1,29 @@ +class Tabs { + constructor(container) { + this.container = container; + this.tabs = container.querySelectorAll('.tab'); + this.tabContents = container.querySelectorAll('.tab__content'); + + this.registerEvents(); + } + + registerEvents() { + this.tabs.forEach(tab => { + tab.addEventListener('click', () => { + this.activateTab(tab); + }); + }); + } + + activateTab(selectedTab) { + this.tabs.forEach(tab => tab.classList.remove('tab_active')); + this.tabContents.forEach(content => content.classList.remove('tab__content_active')); + + selectedTab.classList.add('tab_active'); + const index = Array.from(this.tabs).indexOf(selectedTab); + this.tabContents[index].classList.add('tab__content_active'); + } + } + + new Tabs(document.querySelector('.tab__navigation')); + \ No newline at end of file From cc1357aa2d551d7c180694e1de56440b197c8e7a Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sat, 10 Feb 2024 14:20:00 +0100 Subject: [PATCH 05/22] =?UTF-8?q?=D0=BD=D0=B0=20=D1=80=D0=B5=D0=B2=D1=8C?= =?UTF-8?q?=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dom/ads/task.js | 29 +++++++++++++++++++++++++++++ dom/book-reader/task.js | 31 +++++++++++++++++++++++++++++++ dom/reveal/task.js | 36 ++++++++++++++++++++++++++++++++++++ 3 files changed, 96 insertions(+) diff --git a/dom/ads/task.js b/dom/ads/task.js index e69de29bb2..a2e8041c11 100644 --- a/dom/ads/task.js +++ b/dom/ads/task.js @@ -0,0 +1,29 @@ +class AdRotator { + constructor() { + this.rotatorElements = document.querySelectorAll('.rotator__case'); + this.currentIndex = 0; + this.startRotation(); + } + + startRotation() { + this.intervalId = setInterval(() => { + this.rotate(); + }, 1000); // Меняем текст каждую секунду + } + + rotate() { + const currentElement = this.rotatorElements[this.currentIndex]; + currentElement.classList.remove('rotator__case_active'); + + this.currentIndex++; + if (this.currentIndex >= this.rotatorElements.length) { + this.currentIndex = 0; // Возвращаемся к первому элементу после прохождения всех + } + + const nextElement = this.rotatorElements[this.currentIndex]; + nextElement.classList.add('rotator__case_active'); + } + } + + new AdRotator(); + \ No newline at end of file diff --git a/dom/book-reader/task.js b/dom/book-reader/task.js index e69de29bb2..6d96341663 100644 --- a/dom/book-reader/task.js +++ b/dom/book-reader/task.js @@ -0,0 +1,31 @@ +class BookReader { + constructor() { + this.fontSizes = document.querySelectorAll('.font-size'); + this.book = document.getElementById('book'); + + this.fontSizes.forEach(fontSize => { + fontSize.addEventListener('click', () => { + this.setFontSize(fontSize.dataset.size); + }); + }); + } + + setFontSize(size) { + this.fontSizes.forEach(fontSize => { + fontSize.classList.remove('font-size_active'); + }); + + const newSizeElement = document.querySelector(`.font-size_${size}`); + newSizeElement.classList.add('font-size_active'); + + this.book.classList.remove('book_fs-small', 'book_fs-big'); + if (size === 'small') { + this.book.classList.add('book_fs-small'); + } else if (size === 'big') { + this.book.classList.add('book_fs-big'); + } + } + } + + new BookReader(); + \ No newline at end of file diff --git a/dom/reveal/task.js b/dom/reveal/task.js index e69de29bb2..c9ad830aed 100644 --- a/dom/reveal/task.js +++ b/dom/reveal/task.js @@ -0,0 +1,36 @@ +class RevealOnScroll { + constructor() { + this.revealElements = document.querySelectorAll('.reveal'); + this.scrollHandler = this.handleScroll.bind(this); + + this.registerEvents(); + this.handleScroll(); // Вызываем метод handleScroll при инициализации, чтобы показать блоки, которые уже находятся в области видимости + } + + registerEvents() { + window.addEventListener('scroll', this.scrollHandler); + } + + handleScroll() { + this.revealElements.forEach(element => { + if (this.isElementInViewport(element)) { + element.classList.add('reveal_active'); + } else { + element.classList.remove('reveal_active'); + } + }); + } + + isElementInViewport(el) { + const rect = el.getBoundingClientRect(); + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= (window.innerWidth || document.documentElement.clientWidth) + ); + } + } + + new RevealOnScroll(); + \ No newline at end of file From 2d65bfc29690b646c9064e3c8ee9a7e7a9e92bd7 Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Fri, 16 Feb 2024 20:06:12 +0100 Subject: [PATCH 06/22] =?UTF-8?q?=D0=B2=D0=BD=D0=B5=D1=81=D0=B5=D0=BD?= =?UTF-8?q?=D1=8B=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=B2=20=D0=BA?= =?UTF-8?q?=D1=80=D0=BE=D1=82=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js-features/mole-game/task.js | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/js-features/mole-game/task.js b/js-features/mole-game/task.js index 2a8b2976d1..c87abcf545 100644 --- a/js-features/mole-game/task.js +++ b/js-features/mole-game/task.js @@ -1,6 +1,7 @@ let score = 0; let fails = 0; let scoreDisplay = document.getElementById('score'); +let failsDisplay = document.getElementById('fails'); // Переменная для отображения количества промахов function getHole(index) { return document.getElementById(`hole${index}`); @@ -10,26 +11,24 @@ function startGame() { score = 0; fails = 0; scoreDisplay.textContent = score; + failsDisplay.textContent = fails; // Отображение количества промахов for (let i = 1; i <= 9; i++) { getHole(i).addEventListener('click', onHoleClick); } - - setInterval(showMole, 1000); } function onHoleClick(event) { if (event.target.classList.contains('hole_has-mole')) { score++; scoreDisplay.textContent = score; - if (score === 10) { alert('Вы выиграли!'); endGame(); } } else { fails++; - + failsDisplay.textContent = fails; // Обновляем отображение количества промахов if (fails === 5) { alert('Игра завершена. Вы проиграли.'); endGame(); @@ -37,22 +36,10 @@ function onHoleClick(event) { } } -function showMole() { - for (let i = 1; i <= 9; i++) { - getHole(i).classList.remove('hole_has-mole'); - } - - const randomIndex = Math.floor(Math.random() * 9) + 1; - getHole(randomIndex).classList.add('hole_has-mole'); -} - function endGame() { for (let i = 1; i <= 9; i++) { getHole(i).removeEventListener('click', onHoleClick); } - - score = 0; - fails = 0; } window.onload = startGame; From ebc962fa4aa78a3b4fbf9f0940bad84a4742df4b Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sat, 24 Feb 2024 13:28:40 +0100 Subject: [PATCH 07/22] =?UTF-8?q?=D0=B2=D0=BD=D0=B5=D1=81=D0=B5=D0=BD?= =?UTF-8?q?=D0=B0=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B0=20=D0=B2=20=D0=A2?= =?UTF-8?q?=D0=B0=D0=B1=D1=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- event-object/tabs/task.js | 52 ++++++++++++++++++++------------------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/event-object/tabs/task.js b/event-object/tabs/task.js index 33c84e7e28..2e9837e317 100644 --- a/event-object/tabs/task.js +++ b/event-object/tabs/task.js @@ -1,29 +1,31 @@ class Tabs { - constructor(container) { - this.container = container; - this.tabs = container.querySelectorAll('.tab'); - this.tabContents = container.querySelectorAll('.tab__content'); - - this.registerEvents(); - } - - registerEvents() { - this.tabs.forEach(tab => { - tab.addEventListener('click', () => { - this.activateTab(tab); - }); + constructor(container) { + this.container = container; + this.tabs = container.querySelectorAll('.tab'); + this.tabContents = container.querySelectorAll('.tab__content'); + + this.registerEvents(); + } + + registerEvents() { + this.tabs.forEach(tab => { + tab.addEventListener('click', () => { + this.activateTab(tab); }); - } - - activateTab(selectedTab) { - this.tabs.forEach(tab => tab.classList.remove('tab_active')); - this.tabContents.forEach(content => content.classList.remove('tab__content_active')); - - selectedTab.classList.add('tab_active'); - const index = Array.from(this.tabs).indexOf(selectedTab); - this.tabContents[index].classList.add('tab__content_active'); - } + }); + } + + activateTab(selectedTab) { + if (!selectedTab || !selectedTab.classList) return; + this.tabs.forEach(tab => tab.classList.remove('tab_active')); + this.tabContents.forEach(content => content.classList.remove('tab__content_active')); + + selectedTab.classList.add('tab_active'); + const index = Array.from(this.tabs).indexOf(selectedTab); + this.tabContents[index].classList.add('tab__content_active'); } - - new Tabs(document.querySelector('.tab__navigation')); +} + +new Tabs(document.querySelector('.tab__navigation')); + \ No newline at end of file From 2ab24e83610124e033ee8221bda6ebe99a45586c Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sat, 24 Feb 2024 13:46:17 +0100 Subject: [PATCH 08/22] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20?= =?UTF-8?q?=D0=B2=20=D0=A7=D0=B8=D1=82=D0=B0=D0=BB=D0=BA=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dom/book-reader/task.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dom/book-reader/task.js b/dom/book-reader/task.js index 6d96341663..82bdd7c7d9 100644 --- a/dom/book-reader/task.js +++ b/dom/book-reader/task.js @@ -4,7 +4,8 @@ class BookReader { this.book = document.getElementById('book'); this.fontSizes.forEach(fontSize => { - fontSize.addEventListener('click', () => { + fontSize.addEventListener('click', (event) => { // Добавляем параметр event + event.preventDefault(); // Предотвращаем стандартное поведение this.setFontSize(fontSize.dataset.size); }); }); From 99e70259ed368c75e1bdb53365191d5b49ccabf4 Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 3 Mar 2024 16:02:23 +0100 Subject: [PATCH 09/22] =?UTF-8?q?=D0=BC=D0=B5=D1=82=D0=BE=D0=B4=20activate?= =?UTF-8?q?Tab=20=D0=BD=D0=B0=D1=85=D0=BE=D0=B4=D0=B8=D1=82=20=D1=81=D0=BE?= =?UTF-8?q?=D0=BE=D1=82=D0=B2=D0=B5=D1=82=D1=81=D1=82=D0=B2=D1=83=D1=8E?= =?UTF-8?q?=D1=89=D0=B8=D0=B9=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=20.tab=5F=5Fcontent=20=D0=B2=D0=BD=D1=83=D1=82=D1=80=D0=B8=20?= =?UTF-8?q?=D0=BA=D0=BE=D0=BD=D1=82=D0=B5=D0=B9=D0=BD=D0=B5=D1=80=D0=B0=20?= =?UTF-8?q?tabs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- event-object/tabs/task.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/event-object/tabs/task.js b/event-object/tabs/task.js index 2e9837e317..26a75abd8b 100644 --- a/event-object/tabs/task.js +++ b/event-object/tabs/task.js @@ -22,10 +22,11 @@ class Tabs { selectedTab.classList.add('tab_active'); const index = Array.from(this.tabs).indexOf(selectedTab); - this.tabContents[index].classList.add('tab__content_active'); + const content = this.container.querySelectorAll('.tab__content')[index]; + if (content) { + content.classList.add('tab__content_active'); + } } } -new Tabs(document.querySelector('.tab__navigation')); - - \ No newline at end of file +new Tabs(document.getElementById('tabs1')); From 5b75a35ce6646d4c0f3d00401b837ef675b3c50a Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 3 Mar 2024 16:19:53 +0100 Subject: [PATCH 10/22] =?UTF-8?q?=D0=BA=D0=BE=D0=B4=20=D1=83=D1=87=D0=B8?= =?UTF-8?q?=D1=82=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=20=D0=BE=D1=82=D1=81=D1=83?= =?UTF-8?q?=D1=82=D1=81=D1=82=D0=B2=D0=B8=D0=B5=20=D0=B0=D1=82=D1=80=D0=B8?= =?UTF-8?q?=D0=B1=D1=83=D1=82=D0=B0=20data-size=20=D1=83=20=D1=8D=D0=BB?= =?UTF-8?q?=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=20.font-size?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dom/book-reader/task.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/dom/book-reader/task.js b/dom/book-reader/task.js index 82bdd7c7d9..e9c4217972 100644 --- a/dom/book-reader/task.js +++ b/dom/book-reader/task.js @@ -4,9 +4,12 @@ class BookReader { this.book = document.getElementById('book'); this.fontSizes.forEach(fontSize => { - fontSize.addEventListener('click', (event) => { // Добавляем параметр event - event.preventDefault(); // Предотвращаем стандартное поведение - this.setFontSize(fontSize.dataset.size); + fontSize.addEventListener('click', (event) => { + event.preventDefault(); + const size = fontSize.dataset.size; + if (size) { // атрибут data-size + this.setFontSize(size); + } }); }); } @@ -15,10 +18,12 @@ class BookReader { this.fontSizes.forEach(fontSize => { fontSize.classList.remove('font-size_active'); }); - + const newSizeElement = document.querySelector(`.font-size_${size}`); - newSizeElement.classList.add('font-size_active'); - + if (newSizeElement) { + newSizeElement.classList.add('font-size_active'); + } + this.book.classList.remove('book_fs-small', 'book_fs-big'); if (size === 'small') { this.book.classList.add('book_fs-small'); @@ -29,4 +34,5 @@ class BookReader { } new BookReader(); + \ No newline at end of file From caeb9a382b5712ecd41bb30a4ab8371b863a176c Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 3 Mar 2024 16:28:04 +0100 Subject: [PATCH 11/22] =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=201?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- document-structure/tooltip/task.js | 32 ++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/document-structure/tooltip/task.js b/document-structure/tooltip/task.js index e69de29bb2..4b93a1fc7f 100644 --- a/document-structure/tooltip/task.js +++ b/document-structure/tooltip/task.js @@ -0,0 +1,32 @@ +document.addEventListener('DOMContentLoaded', function() { + const tooltips = document.querySelectorAll('.has-tooltip'); + + tooltips.forEach(tooltip => { + tooltip.addEventListener('click', function(event) { + event.preventDefault(); + const tooltipText = this.getAttribute('title'); + const tooltipElement = document.createElement('div'); + tooltipElement.classList.add('tooltip'); + tooltipElement.textContent = tooltipText; + document.body.appendChild(tooltipElement); + positionTooltip(this, tooltipElement); + }); + }); + + function positionTooltip(tooltipTrigger, tooltipElement) { + const tooltipRect = tooltipElement.getBoundingClientRect(); + const triggerRect = tooltipTrigger.getBoundingClientRect(); + const bodyRect = document.body.getBoundingClientRect(); + + const top = triggerRect.top - tooltipRect.height - 5; + const left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2; + + tooltipElement.style.top = `${Math.max(top, bodyRect.top)}px`; + tooltipElement.style.left = `${Math.max(left, bodyRect.left)}px`; + + setTimeout(() => { + tooltipElement.remove(); + }, 2000); + } + }); + \ No newline at end of file From e782187b2de34dfbf8eed5b8a1e1c045e5d4a4b3 Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 3 Mar 2024 16:32:01 +0100 Subject: [PATCH 12/22] =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=202?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- document-structure/todo/task.js | 42 +++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/document-structure/todo/task.js b/document-structure/todo/task.js index e69de29bb2..a5310c566a 100644 --- a/document-structure/todo/task.js +++ b/document-structure/todo/task.js @@ -0,0 +1,42 @@ +document.addEventListener('DOMContentLoaded', function() { + const taskList = document.getElementById('tasks__list'); + const inputTask = document.getElementById('task__input'); + const addButton = document.getElementById('tasks__add'); + + function addTask(taskContent) { + const task = document.createElement('div'); + task.classList.add('task'); + + const taskTitle = document.createElement('div'); + taskTitle.classList.add('task__title'); + taskTitle.textContent = taskContent; + + const removeButton = document.createElement('a'); + removeButton.classList.add('task__remove'); + removeButton.innerHTML = '×'; + + task.appendChild(taskTitle); + task.appendChild(removeButton); + taskList.appendChild(task); + + inputTask.value = ''; + + removeButton.addEventListener('click', function() { + task.remove(); + }); + } + + addButton.addEventListener('click', function(event) { + event.preventDefault(); + if (inputTask.value.trim() !== '') { + addTask(inputTask.value.trim()); + } + }); + + inputTask.addEventListener('keypress', function(event) { + if (event.key === 'Enter' && inputTask.value.trim() !== '') { + addTask(inputTask.value.trim()); + } + }); + }); + \ No newline at end of file From fe3b2f22ed870cc67c91f65da2b441809523c5f8 Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 3 Mar 2024 16:34:12 +0100 Subject: [PATCH 13/22] =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- document-structure/cart/task.js | 52 +++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/document-structure/cart/task.js b/document-structure/cart/task.js index e69de29bb2..de9cfbe516 100644 --- a/document-structure/cart/task.js +++ b/document-structure/cart/task.js @@ -0,0 +1,52 @@ +document.addEventListener('DOMContentLoaded', function() { + const productCards = document.querySelectorAll('.product'); + const cart = document.querySelector('.cart'); + const cartTitle = document.querySelector('.cart__title'); + + productCards.forEach(product => { + const addButton = product.querySelector('.product__quantity-control_inc'); + const removeButton = product.querySelector('.product__quantity-control_dec'); + const quantityValue = product.querySelector('.product__quantity-value'); + const addToCartButton = product.querySelector('.product__add'); + + addButton.addEventListener('click', function() { + let newValue = parseInt(quantityValue.textContent) + 1; + quantityValue.textContent = newValue > 0 ? newValue : 1; + }); + + removeButton.addEventListener('click', function() { + let newValue = parseInt(quantityValue.textContent) - 1; + quantityValue.textContent = newValue > 0 ? newValue : 1; + }); + + addToCartButton.addEventListener('click', function() { + const productId = product.getAttribute('data-id'); + const productImageSrc = product.querySelector('.product__image').getAttribute('src'); + const productQuantity = parseInt(quantityValue.textContent); + + const existingCartItem = cart.querySelector(`.cart__product[data-id="${productId}"]`); + if (existingCartItem) { + const existingQuantity = parseInt(existingCartItem.querySelector('.cart__product-count').textContent); + existingCartItem.querySelector('.cart__product-count').textContent = existingQuantity + productQuantity; + } else { + const cartProduct = document.createElement('div'); + cartProduct.classList.add('cart__product'); + cartProduct.setAttribute('data-id', productId); + + const cartProductImage = document.createElement('img'); + cartProductImage.classList.add('cart__product-image'); + cartProductImage.setAttribute('src', productImageSrc); + cartProduct.appendChild(cartProductImage); + + const cartProductCount = document.createElement('div'); + cartProductCount.classList.add('cart__product-count'); + cartProductCount.textContent = productQuantity; + cartProduct.appendChild(cartProductCount); + + cart.appendChild(cartProduct); + } + + cartTitle.style.display = 'block'; + }); + }); +}); From 30a377dabcf49c4a6f5b47a978035bcfcd37d35c Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 3 Mar 2024 16:46:11 +0100 Subject: [PATCH 14/22] =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=201?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- async-requests/preloader/task.js | 53 ++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/async-requests/preloader/task.js b/async-requests/preloader/task.js index e69de29bb2..da2fa83002 100644 --- a/async-requests/preloader/task.js +++ b/async-requests/preloader/task.js @@ -0,0 +1,53 @@ +document.addEventListener('DOMContentLoaded', function() { + const loader = document.getElementById('loader'); + const items = document.getElementById('items'); + + function showLoader() { + loader.classList.add('loader_active'); + } + + function hideLoader() { + loader.classList.remove('loader_active'); + } + + function renderCurrency(currency) { + const item = document.createElement('div'); + item.classList.add('item'); + + const code = document.createElement('div'); + code.classList.add('item__code'); + code.textContent = currency.CharCode; + item.appendChild(code); + + const value = document.createElement('div'); + value.classList.add('item__value'); + value.textContent = currency.Value; + item.appendChild(value); + + const currencyText = document.createElement('div'); + currencyText.classList.add('item__currency'); + currencyText.textContent = 'руб.'; + item.appendChild(currencyText); + + items.appendChild(item); + } + + function loadCurrency() { + showLoader(); + fetch('https://students.netoservices.ru/nestjs-backend/slow-get-courses') + .then(response => response.json()) + .then(data => { + hideLoader(); + const currencies = data.response.Valute; + for (const currency in currencies) { + renderCurrency(currencies[currency]); + } + }) + .catch(error => { + console.error('Error fetching currency:', error); + hideLoader(); + }); + } + + loadCurrency(); +}); From 9121d5ea97f4dfb889ba205870ecf28e31576f8d Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 3 Mar 2024 16:48:02 +0100 Subject: [PATCH 15/22] =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=202?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- async-requests/poll/task.js | 61 +++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/async-requests/poll/task.js b/async-requests/poll/task.js index e69de29bb2..00896edd11 100644 --- a/async-requests/poll/task.js +++ b/async-requests/poll/task.js @@ -0,0 +1,61 @@ +document.addEventListener('DOMContentLoaded', function() { + const pollTitle = document.getElementById('poll__title'); + const pollAnswers = document.getElementById('poll__answers'); + + function renderPoll(pollData) { + pollTitle.textContent = pollData.data.title; + pollAnswers.innerHTML = ''; + pollData.data.answers.forEach((answer, index) => { + const answerButton = document.createElement('button'); + answerButton.classList.add('poll__answer'); + answerButton.textContent = answer; + answerButton.addEventListener('click', function() { + sendVote(pollData.id, index); + }); + pollAnswers.appendChild(answerButton); + }); + } + + function sendVote(pollId, answerIndex) { + const xhr = new XMLHttpRequest(); + xhr.open('POST', 'https://students.netoservices.ru/nestjs-backend/poll'); + xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xhr.onload = function() { + if (xhr.status === 200) { + const response = JSON.parse(xhr.responseText); + showThankYou(); + console.log(response); + } else { + console.error('Error sending vote:', xhr.status); + } + }; + xhr.onerror = function() { + console.error('Error sending vote:', xhr.status); + }; + const params = `vote=${pollId}&answer=${answerIndex}`; + xhr.send(params); + } + + function showThankYou() { + alert('Спасибо, ваш голос засчитан!'); + } + + function loadPoll() { + const xhr = new XMLHttpRequest(); + xhr.open('GET', 'https://students.netoservices.ru/nestjs-backend/poll'); + xhr.onload = function() { + if (xhr.status === 200) { + const pollData = JSON.parse(xhr.responseText); + renderPoll(pollData); + } else { + console.error('Error loading poll:', xhr.status); + } + }; + xhr.onerror = function() { + console.error('Error loading poll:', xhr.status); + }; + xhr.send(); + } + + loadPoll(); +}); From 7e70bd36743547f164a8a895b0692b19ef77e796 Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 3 Mar 2024 16:50:04 +0100 Subject: [PATCH 16/22] =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- async-requests/progressbar/task.js | 36 ++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/async-requests/progressbar/task.js b/async-requests/progressbar/task.js index e69de29bb2..3648c5736f 100644 --- a/async-requests/progressbar/task.js +++ b/async-requests/progressbar/task.js @@ -0,0 +1,36 @@ +document.addEventListener('DOMContentLoaded', function() { + const progress = document.getElementById('progress'); + + function updateProgress(event) { + if (event.lengthComputable) { + const percentComplete = (event.loaded / event.total) * 100; + progress.value = percentComplete; + } + } + + function sendFormData(formData) { + const xhr = new XMLHttpRequest(); + xhr.open('POST', 'https://students.netoservices.ru/nestjs-backend/upload'); + xhr.upload.addEventListener('progress', updateProgress); + xhr.onload = function() { + if (xhr.status === 200) { + console.log('File uploaded successfully'); + } else { + console.error('Error uploading file:', xhr.status); + } + }; + xhr.onerror = function() { + console.error('Error uploading file:', xhr.status); + }; + xhr.send(formData); + } + + function handleFormSubmit(event) { + event.preventDefault(); + const formData = new FormData(event.target); + sendFormData(formData); + } + + const form = document.getElementById('form'); + form.addEventListener('submit', handleFormSubmit); +}); From 88713644f5d60a1f06fc7c241226c4fb11483668 Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 10 Mar 2024 15:10:39 +0100 Subject: [PATCH 17/22] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20?= =?UTF-8?q?=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20=D1=80=D0=B5=D0=B2=D1=8C=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- document-structure/tooltip/task.js | 47 ++++++++++++++++-------------- 1 file changed, 25 insertions(+), 22 deletions(-) diff --git a/document-structure/tooltip/task.js b/document-structure/tooltip/task.js index 4b93a1fc7f..22839ac7e3 100644 --- a/document-structure/tooltip/task.js +++ b/document-structure/tooltip/task.js @@ -1,32 +1,35 @@ document.addEventListener('DOMContentLoaded', function() { - const tooltips = document.querySelectorAll('.has-tooltip'); - - tooltips.forEach(tooltip => { + let currentTooltip = null; + + document.querySelectorAll('.has-tooltip').forEach(tooltip => { tooltip.addEventListener('click', function(event) { - event.preventDefault(); - const tooltipText = this.getAttribute('title'); - const tooltipElement = document.createElement('div'); - tooltipElement.classList.add('tooltip'); - tooltipElement.textContent = tooltipText; - document.body.appendChild(tooltipElement); - positionTooltip(this, tooltipElement); + event.preventDefault(); + const tooltipText = this.getAttribute('title'); + + if (currentTooltip && currentTooltip.textContent === tooltipText) { + currentTooltip.classList.toggle('tooltip_active'); + } else { + if (currentTooltip) { + currentTooltip.remove(); + } + currentTooltip = document.createElement('div'); + currentTooltip.classList.add('tooltip'); + currentTooltip.textContent = tooltipText; + document.body.appendChild(currentTooltip); + positionTooltip(this, currentTooltip); + } }); - }); - - function positionTooltip(tooltipTrigger, tooltipElement) { + }); + + function positionTooltip(tooltipTrigger, tooltipElement) { const tooltipRect = tooltipElement.getBoundingClientRect(); const triggerRect = tooltipTrigger.getBoundingClientRect(); const bodyRect = document.body.getBoundingClientRect(); - + const top = triggerRect.top - tooltipRect.height - 5; const left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2; - + tooltipElement.style.top = `${Math.max(top, bodyRect.top)}px`; tooltipElement.style.left = `${Math.max(left, bodyRect.left)}px`; - - setTimeout(() => { - tooltipElement.remove(); - }, 2000); - } - }); - \ No newline at end of file + } +}); From d19f122fa2a2d238551dab63c9cf6852cb96910e Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 10 Mar 2024 15:13:58 +0100 Subject: [PATCH 18/22] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20?= =?UTF-8?q?=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20=D1=80=D0=B5=D0=B2=D1=8C=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- document-structure/todo/task.js | 61 +++++++++++++++------------------ 1 file changed, 28 insertions(+), 33 deletions(-) diff --git a/document-structure/todo/task.js b/document-structure/todo/task.js index a5310c566a..5fc1eb4be7 100644 --- a/document-structure/todo/task.js +++ b/document-structure/todo/task.js @@ -1,42 +1,37 @@ document.addEventListener('DOMContentLoaded', function() { - const taskList = document.getElementById('tasks__list'); - const inputTask = document.getElementById('task__input'); - const addButton = document.getElementById('tasks__add'); - - function addTask(taskContent) { - const task = document.createElement('div'); - task.classList.add('task'); - - const taskTitle = document.createElement('div'); - taskTitle.classList.add('task__title'); - taskTitle.textContent = taskContent; - - const removeButton = document.createElement('a'); - removeButton.classList.add('task__remove'); - removeButton.innerHTML = '×'; - - task.appendChild(taskTitle); - task.appendChild(removeButton); - taskList.appendChild(task); - - inputTask.value = ''; - + const taskList = document.getElementById('tasks__list'); + const inputTask = document.getElementById('task__input'); + const addButton = document.getElementById('tasks__add'); + + function addTask(taskContent) { + const taskHTML = ` +
+
+ ${taskContent} +
+ × +
+ `; + taskList.insertAdjacentHTML('beforeend', taskHTML); + + const removeButton = taskList.querySelector('.task__remove:last-child'); removeButton.addEventListener('click', function() { - task.remove(); + removeButton.parentElement.remove(); }); - } - - addButton.addEventListener('click', function(event) { + } + + addButton.addEventListener('click', function(event) { event.preventDefault(); if (inputTask.value.trim() !== '') { - addTask(inputTask.value.trim()); + addTask(inputTask.value.trim()); + inputTask.value = ''; } - }); - - inputTask.addEventListener('keypress', function(event) { + }); + + inputTask.addEventListener('keypress', function(event) { if (event.key === 'Enter' && inputTask.value.trim() !== '') { - addTask(inputTask.value.trim()); + addTask(inputTask.value.trim()); + inputTask.value = ''; } - }); }); - \ No newline at end of file +}); From dfa4e194daf36c3ea240eb7967a3a2e06c14f2c9 Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 10 Mar 2024 15:22:34 +0100 Subject: [PATCH 19/22] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B0=20?= =?UTF-8?q?=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20=D1=80=D0=B5=D0=B2=D1=8C=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- document-structure/cart/task.js | 107 +++++++++++++++++--------------- 1 file changed, 58 insertions(+), 49 deletions(-) diff --git a/document-structure/cart/task.js b/document-structure/cart/task.js index de9cfbe516..8e9ce45131 100644 --- a/document-structure/cart/task.js +++ b/document-structure/cart/task.js @@ -1,52 +1,61 @@ +// Добавляю задачу в список +tasksList.insertAdjacentHTML('afterbegin', ` +
+
+ ${title} +
+ × +
+`); + document.addEventListener('DOMContentLoaded', function() { - const productCards = document.querySelectorAll('.product'); - const cart = document.querySelector('.cart'); - const cartTitle = document.querySelector('.cart__title'); - - productCards.forEach(product => { - const addButton = product.querySelector('.product__quantity-control_inc'); - const removeButton = product.querySelector('.product__quantity-control_dec'); - const quantityValue = product.querySelector('.product__quantity-value'); - const addToCartButton = product.querySelector('.product__add'); - - addButton.addEventListener('click', function() { - let newValue = parseInt(quantityValue.textContent) + 1; - quantityValue.textContent = newValue > 0 ? newValue : 1; - }); - - removeButton.addEventListener('click', function() { - let newValue = parseInt(quantityValue.textContent) - 1; - quantityValue.textContent = newValue > 0 ? newValue : 1; - }); - - addToCartButton.addEventListener('click', function() { - const productId = product.getAttribute('data-id'); - const productImageSrc = product.querySelector('.product__image').getAttribute('src'); - const productQuantity = parseInt(quantityValue.textContent); - - const existingCartItem = cart.querySelector(`.cart__product[data-id="${productId}"]`); - if (existingCartItem) { - const existingQuantity = parseInt(existingCartItem.querySelector('.cart__product-count').textContent); - existingCartItem.querySelector('.cart__product-count').textContent = existingQuantity + productQuantity; - } else { - const cartProduct = document.createElement('div'); - cartProduct.classList.add('cart__product'); - cartProduct.setAttribute('data-id', productId); - - const cartProductImage = document.createElement('img'); - cartProductImage.classList.add('cart__product-image'); - cartProductImage.setAttribute('src', productImageSrc); - cartProduct.appendChild(cartProductImage); - - const cartProductCount = document.createElement('div'); - cartProductCount.classList.add('cart__product-count'); - cartProductCount.textContent = productQuantity; - cartProduct.appendChild(cartProductCount); - - cart.appendChild(cartProduct); - } - - cartTitle.style.display = 'block'; - }); + const productCards = document.querySelectorAll('.product'); + const cart = document.querySelector('.cart'); + const cartTitle = document.querySelector('.cart__title'); + + productCards.forEach(product => { + const addButton = product.querySelector('.product__quantity-control_inc'); + const removeButton = product.querySelector('.product__quantity-control_dec'); + const quantityValue = product.querySelector('.product__quantity-value'); + const addToCartButton = product.querySelector('.product__add'); + + addButton.addEventListener('click', function() { + let newValue = parseInt(quantityValue.textContent) + 1; + quantityValue.textContent = newValue > 0 ? newValue : 1; + }); + + removeButton.addEventListener('click', function() { + let newValue = parseInt(quantityValue.textContent) - 1; + quantityValue.textContent = newValue > 0 ? newValue : 1; + }); + + addToCartButton.addEventListener('click', function() { + const productId = product.getAttribute('data-id'); + const productImageSrc = product.querySelector('.product__image').getAttribute('src'); + const productQuantity = parseInt(quantityValue.textContent); + + const existingCartItem = cart.querySelector(`.cart__product[data-id="${productId}"]`); + if (existingCartItem) { + const existingQuantity = parseInt(existingCartItem.querySelector('.cart__product-count').textContent); + existingCartItem.querySelector('.cart__product-count').textContent = existingQuantity + productQuantity; + } else { + const cartProduct = document.createElement('div'); + cartProduct.classList.add('cart__product'); + cartProduct.setAttribute('data-id', productId); + + const cartProductImage = document.createElement('img'); + cartProductImage.classList.add('cart__product-image'); + cartProductImage.setAttribute('src', productImageSrc); + cartProduct.appendChild(cartProductImage); + + const cartProductCount = document.createElement('div'); + cartProductCount.classList.add('cart__product-count'); + cartProductCount.textContent = productQuantity; + cartProduct.appendChild(cartProductCount); + cart.insertAdjacentElement('afterend', cartProduct); + } + + cartTitle.style.display = 'block'; }); + }); }); From 5c5022c5d0bbdf89cbd386578f0243a7130810f0 Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 10 Mar 2024 15:41:37 +0100 Subject: [PATCH 20/22] =?UTF-8?q?=D0=BA=D0=BE=D1=80=D1=80=D0=B5=D0=BA?= =?UTF-8?q?=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=BA=D0=B8=20=D0=B8=20=D0=BF?= =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=B5=D1=80=D0=BA=D0=B0=20=D0=BA=D0=BE=D0=B4?= =?UTF-8?q?=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dom/book-reader/task.js | 71 +++++++++++++++++++++-------------------- 1 file changed, 37 insertions(+), 34 deletions(-) diff --git a/dom/book-reader/task.js b/dom/book-reader/task.js index e9c4217972..fc344c1930 100644 --- a/dom/book-reader/task.js +++ b/dom/book-reader/task.js @@ -1,38 +1,41 @@ class BookReader { - constructor() { - this.fontSizes = document.querySelectorAll('.font-size'); - this.book = document.getElementById('book'); - - this.fontSizes.forEach(fontSize => { - fontSize.addEventListener('click', (event) => { - event.preventDefault(); - const size = fontSize.dataset.size; - if (size) { // атрибут data-size - this.setFontSize(size); + constructor(container) { + this.container = container; + this.fontSizes = [...container.querySelectorAll('.font-size')]; + this.book = container.querySelector('.book'); + + this.registerEvents(); + } + + registerEvents() { + this.fontSizes.forEach(fontSize => { + fontSize.addEventListener('click', (event) => { + event.preventDefault(); + + const size = fontSize.dataset.size; + + if (size) { // Проверяем наличие атрибута data-size + this.clearActiveClasses(this.fontSizes, 'font-size_active'); + fontSize.classList.add('font-size_active'); + + if (size === 'small') { + this.book.className = 'book book_fs-small'; + } else if (size === 'big') { + this.book.className = 'book book_fs-big'; + } else { + this.book.className = 'book'; } - }); - }); - } - - setFontSize(size) { - this.fontSizes.forEach(fontSize => { - fontSize.classList.remove('font-size_active'); + } }); - - const newSizeElement = document.querySelector(`.font-size_${size}`); - if (newSizeElement) { - newSizeElement.classList.add('font-size_active'); - } - - this.book.classList.remove('book_fs-small', 'book_fs-big'); - if (size === 'small') { - this.book.classList.add('book_fs-small'); - } else if (size === 'big') { - this.book.classList.add('book_fs-big'); - } - } + }); + } + + clearActiveClasses(elements, className) { + elements.forEach(element => { + element.classList.remove(className); + }); } - - new BookReader(); - - \ No newline at end of file +} + +new BookReader(document.querySelector('#book')); + From 0907ee0b91b3fedf4dbd4dd8954f310474833ed9 Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 10 Mar 2024 15:49:01 +0100 Subject: [PATCH 21/22] =?UTF-8?q?=D1=81=D0=BA=D0=BE=D1=80=D1=80=D0=B5?= =?UTF-8?q?=D0=BA=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BB=20=D1=81=20?= =?UTF-8?q?=D1=83=D1=87=D0=B5=D1=82=D0=BE=D0=BC=20=D0=BE=D1=88=D0=B8=D0=B1?= =?UTF-8?q?=D0=BE=D0=BA=20=D0=B8=20=D0=BF=D1=80=D0=BE=D1=82=D0=B5=D1=81?= =?UTF-8?q?=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dom/book-reader/task.js | 48 +++++++++++------------------------------ 1 file changed, 12 insertions(+), 36 deletions(-) diff --git a/dom/book-reader/task.js b/dom/book-reader/task.js index fc344c1930..299233429e 100644 --- a/dom/book-reader/task.js +++ b/dom/book-reader/task.js @@ -1,41 +1,17 @@ -class BookReader { - constructor(container) { - this.container = container; - this.fontSizes = [...container.querySelectorAll('.font-size')]; - this.book = container.querySelector('.book'); - - this.registerEvents(); - } +const fontSizeSwitches = document.querySelectorAll('.font-size'); +const book = document.querySelector('#book'); - registerEvents() { - this.fontSizes.forEach(fontSize => { - fontSize.addEventListener('click', (event) => { +fontSizeSwitches.forEach(fontSizeSwitch => { + fontSizeSwitch.addEventListener("click", (event) => { event.preventDefault(); + const currentFontSize = document.querySelector('.font-size_active'); + currentFontSize.classList.remove('font-size_active'); + event.target.classList.add('font-size_active'); + changeFont(event.target.dataset.size); + }) +}); - const size = fontSize.dataset.size; - - if (size) { // Проверяем наличие атрибута data-size - this.clearActiveClasses(this.fontSizes, 'font-size_active'); - fontSize.classList.add('font-size_active'); - - if (size === 'small') { - this.book.className = 'book book_fs-small'; - } else if (size === 'big') { - this.book.className = 'book book_fs-big'; - } else { - this.book.className = 'book'; - } - } - }); - }); - } - - clearActiveClasses(elements, className) { - elements.forEach(element => { - element.classList.remove(className); - }); - } +function changeFont(fontSize) { + book.className = `book ${fontSize ? `book_fs-${fontSize}` : ''}`; } -new BookReader(document.querySelector('#book')); - From 5307370393a92f05413ecd81525612e29711b14f Mon Sep 17 00:00:00 2001 From: Archibaldbrown Date: Sun, 24 Mar 2024 13:26:01 +0100 Subject: [PATCH 22/22] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20?= =?UTF-8?q?=D0=B2=D1=82=D0=BE=D1=80=D0=BE=D0=B5=20=D1=80=D0=B5=D0=B2=D1=8C?= =?UTF-8?q?=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- document-structure/cart/task.js | 107 +++++++++++++---------------- document-structure/todo/task.js | 65 ++++++++---------- document-structure/tooltip/task.js | 64 +++++++++-------- 3 files changed, 110 insertions(+), 126 deletions(-) diff --git a/document-structure/cart/task.js b/document-structure/cart/task.js index 8e9ce45131..28b3b33860 100644 --- a/document-structure/cart/task.js +++ b/document-structure/cart/task.js @@ -1,61 +1,52 @@ -// Добавляю задачу в список -tasksList.insertAdjacentHTML('afterbegin', ` -
-
- ${title} -
- × -
-`); - document.addEventListener('DOMContentLoaded', function() { - const productCards = document.querySelectorAll('.product'); - const cart = document.querySelector('.cart'); - const cartTitle = document.querySelector('.cart__title'); - - productCards.forEach(product => { - const addButton = product.querySelector('.product__quantity-control_inc'); - const removeButton = product.querySelector('.product__quantity-control_dec'); - const quantityValue = product.querySelector('.product__quantity-value'); - const addToCartButton = product.querySelector('.product__add'); - - addButton.addEventListener('click', function() { - let newValue = parseInt(quantityValue.textContent) + 1; - quantityValue.textContent = newValue > 0 ? newValue : 1; - }); - - removeButton.addEventListener('click', function() { - let newValue = parseInt(quantityValue.textContent) - 1; - quantityValue.textContent = newValue > 0 ? newValue : 1; - }); - - addToCartButton.addEventListener('click', function() { - const productId = product.getAttribute('data-id'); - const productImageSrc = product.querySelector('.product__image').getAttribute('src'); - const productQuantity = parseInt(quantityValue.textContent); - - const existingCartItem = cart.querySelector(`.cart__product[data-id="${productId}"]`); - if (existingCartItem) { - const existingQuantity = parseInt(existingCartItem.querySelector('.cart__product-count').textContent); - existingCartItem.querySelector('.cart__product-count').textContent = existingQuantity + productQuantity; - } else { - const cartProduct = document.createElement('div'); - cartProduct.classList.add('cart__product'); - cartProduct.setAttribute('data-id', productId); - - const cartProductImage = document.createElement('img'); - cartProductImage.classList.add('cart__product-image'); - cartProductImage.setAttribute('src', productImageSrc); - cartProduct.appendChild(cartProductImage); - - const cartProductCount = document.createElement('div'); - cartProductCount.classList.add('cart__product-count'); - cartProductCount.textContent = productQuantity; - cartProduct.appendChild(cartProductCount); - cart.insertAdjacentElement('afterend', cartProduct); - } - - cartTitle.style.display = 'block'; + const productCards = document.querySelectorAll('.product'); + const cart = document.querySelector('.cart'); + const cartTitle = document.querySelector('.cart__title'); + + productCards.forEach(product => { + const addButton = product.querySelector('.product__quantity-control_inc'); + const removeButton = product.querySelector('.product__quantity-control_dec'); + const quantityValue = product.querySelector('.product__quantity-value'); + const addToCartButton = product.querySelector('.product__add'); + + addButton.addEventListener('click', function() { + let newValue = parseInt(quantityValue.textContent) + 1; + quantityValue.textContent = newValue > 0 ? newValue : 1; + }); + + removeButton.addEventListener('click', function() { + let newValue = parseInt(quantityValue.textContent) - 1; + quantityValue.textContent = newValue > 0 ? newValue : 1; + }); + + addToCartButton.addEventListener('click', function() { + const productId = product.getAttribute('data-id'); + const productImageSrc = product.querySelector('.product__image').getAttribute('src'); + const productQuantity = parseInt(quantityValue.textContent); + + const existingCartItem = cart.querySelector(`.cart__product[data-id="${productId}"]`); + if (existingCartItem) { + const existingQuantity = parseInt(existingCartItem.querySelector('.cart__product-count').textContent); + existingCartItem.querySelector('.cart__product-count').textContent = existingQuantity + productQuantity; + } else { + const cartProduct = document.createElement('div'); + cartProduct.classList.add('cart__product'); + cartProduct.setAttribute('data-id', productId); + + const cartProductImage = document.createElement('img'); + cartProductImage.classList.add('cart__product-image'); + cartProductImage.setAttribute('src', productImageSrc); + cartProduct.appendChild(cartProductImage); + + const cartProductCount = document.createElement('div'); + cartProductCount.classList.add('cart__product-count'); + cartProductCount.textContent = productQuantity; + cartProduct.appendChild(cartProductCount); + cart.appendChild(cartProduct); + } + + cartTitle.style.display = 'block'; + }); }); }); -}); + \ No newline at end of file diff --git a/document-structure/todo/task.js b/document-structure/todo/task.js index 5fc1eb4be7..0a3d77a5ae 100644 --- a/document-structure/todo/task.js +++ b/document-structure/todo/task.js @@ -1,37 +1,32 @@ document.addEventListener('DOMContentLoaded', function() { - const taskList = document.getElementById('tasks__list'); - const inputTask = document.getElementById('task__input'); - const addButton = document.getElementById('tasks__add'); - - function addTask(taskContent) { - const taskHTML = ` -
-
- ${taskContent} -
- × -
- `; - taskList.insertAdjacentHTML('beforeend', taskHTML); - - const removeButton = taskList.querySelector('.task__remove:last-child'); - removeButton.addEventListener('click', function() { - removeButton.parentElement.remove(); - }); - } - - addButton.addEventListener('click', function(event) { - event.preventDefault(); - if (inputTask.value.trim() !== '') { - addTask(inputTask.value.trim()); - inputTask.value = ''; - } + const taskList = document.getElementById('tasks__list'); + const inputTask = document.getElementById('task__input'); + const addButton = document.getElementById('tasks__add'); + + function addTask(taskContent) { + const taskHTML = ` +
+
+ ${taskContent} +
+ × +
+ `; + taskList.insertAdjacentHTML('beforeend', taskHTML); + + const removeButtons = taskList.querySelectorAll('.task__remove'); + const lastRemoveButton = removeButtons[removeButtons.length - 1]; + lastRemoveButton.addEventListener('click', function() { + lastRemoveButton.parentElement.remove(); + }); + } + + addButton.addEventListener('click', function(event) { + event.preventDefault(); + if (inputTask.value.trim() !== '') { + addTask(inputTask.value.trim()); + inputTask.value = ''; + } + }); }); - - inputTask.addEventListener('keypress', function(event) { - if (event.key === 'Enter' && inputTask.value.trim() !== '') { - addTask(inputTask.value.trim()); - inputTask.value = ''; - } - }); -}); + \ No newline at end of file diff --git a/document-structure/tooltip/task.js b/document-structure/tooltip/task.js index 22839ac7e3..b10d99df5a 100644 --- a/document-structure/tooltip/task.js +++ b/document-structure/tooltip/task.js @@ -1,35 +1,33 @@ document.addEventListener('DOMContentLoaded', function() { - let currentTooltip = null; - - document.querySelectorAll('.has-tooltip').forEach(tooltip => { - tooltip.addEventListener('click', function(event) { - event.preventDefault(); - const tooltipText = this.getAttribute('title'); - - if (currentTooltip && currentTooltip.textContent === tooltipText) { - currentTooltip.classList.toggle('tooltip_active'); - } else { - if (currentTooltip) { - currentTooltip.remove(); - } - currentTooltip = document.createElement('div'); - currentTooltip.classList.add('tooltip'); - currentTooltip.textContent = tooltipText; - document.body.appendChild(currentTooltip); - positionTooltip(this, currentTooltip); - } - }); + let currentTooltip = null; + + document.querySelectorAll('.has-tooltip').forEach(tooltip => { + tooltip.addEventListener('click', function(event) { + event.preventDefault(); + const tooltipText = this.getAttribute('title'); + + if (currentTooltip) { + currentTooltip.remove(); + } + + currentTooltip = document.createElement('div'); + currentTooltip.classList.add('tooltip'); + currentTooltip.textContent = tooltipText; + document.body.appendChild(currentTooltip); + positionTooltip(this, currentTooltip); + }); + }); + + function positionTooltip(tooltipTrigger, tooltipElement) { + const tooltipRect = tooltipElement.getBoundingClientRect(); + const triggerRect = tooltipTrigger.getBoundingClientRect(); + const bodyRect = document.body.getBoundingClientRect(); + + const top = triggerRect.top - tooltipRect.height - 5; + const left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2; + + tooltipElement.style.top = `${Math.max(top, bodyRect.top)}px`; + tooltipElement.style.left = `${Math.max(left, bodyRect.left)}px`; + } }); - - function positionTooltip(tooltipTrigger, tooltipElement) { - const tooltipRect = tooltipElement.getBoundingClientRect(); - const triggerRect = tooltipTrigger.getBoundingClientRect(); - const bodyRect = document.body.getBoundingClientRect(); - - const top = triggerRect.top - tooltipRect.height - 5; - const left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2; - - tooltipElement.style.top = `${Math.max(top, bodyRect.top)}px`; - tooltipElement.style.left = `${Math.max(left, bodyRect.left)}px`; - } -}); +