diff --git a/dom/ads/task.js b/dom/ads/task.js index e69de29bb2..1e409be673 100644 --- a/dom/ads/task.js +++ b/dom/ads/task.js @@ -0,0 +1,19 @@ +const rotators = document.querySelectorAll('.rotator'); + +rotators.forEach(rotator => { + const cases = rotator.querySelectorAll('.rotator__case'); + let activeIndex = 0; + + const changeCase = () => { + cases[activeIndex].classList.remove('rotator__case_active'); + + activeIndex = (activeIndex + 1) % cases.length; + + cases[activeIndex].classList.add('rotator__case_active'); + + cases[activeIndex].style.color = cases[activeIndex].dataset.color; + }; + + const speed = cases[activeIndex].dataset.speed; + setInterval(changeCase, speed); +}); diff --git a/dom/book-reader/task.js b/dom/book-reader/task.js index e69de29bb2..74c6768f6f 100644 --- a/dom/book-reader/task.js +++ b/dom/book-reader/task.js @@ -0,0 +1,25 @@ +document.addEventListener('DOMContentLoaded', () => { + const fontSizeLinks = document.querySelectorAll('.font-size'); + const book = document.getElementById('book'); + + fontSizeLinks.forEach(link => { + link.addEventListener('click', (event) => { + event.preventDefault(); + + fontSizeLinks.forEach(link => { + link.classList.remove('font-size_active'); + }); + + link.classList.add('font-size_active'); + + book.classList.remove('book_fs-small', 'book_fs-big'); + + const size = link.dataset.size; + if (size === 'small') { + book.classList.add('book_fs-small'); + } else if (size === 'big') { + book.classList.add('book_fs-big'); + } + }); + }); +}); diff --git a/dom/reveal/task.js b/dom/reveal/task.js index e69de29bb2..663cc841a5 100644 --- a/dom/reveal/task.js +++ b/dom/reveal/task.js @@ -0,0 +1,14 @@ +document.addEventListener('scroll', () => { + const reveals = document.querySelectorAll('.reveal'); + + reveals.forEach(reveal => { + const windowHeight = window.innerHeight; + const revealTop = reveal.getBoundingClientRect().top; + + if (revealTop < windowHeight && revealTop >= 0) { + reveal.classList.add('reveal_active'); + } else { + reveal.classList.remove('reveal_active'); + } + }); +}); diff --git a/event-object/dropdown/task.js b/event-object/dropdown/task.js index e69de29bb2..15c43fde16 100644 --- a/event-object/dropdown/task.js +++ b/event-object/dropdown/task.js @@ -0,0 +1,33 @@ +document.addEventListener('DOMContentLoaded', () => { + const dropdowns = document.querySelectorAll('.dropdown'); + + dropdowns.forEach(dropdown => { + const dropdownValue = dropdown.querySelector('.dropdown__value'); + const dropdownList = dropdown.querySelector('.dropdown__list'); + + dropdownValue.addEventListener('click', (event) => { + event.stopPropagation(); + dropdownList.classList.toggle('dropdown__list_active'); + }); + + const dropdownItems = dropdown.querySelectorAll('.dropdown__item'); + + dropdownItems.forEach(item => { + item.addEventListener('click', (event) => { + event.preventDefault(); + const selectedValue = item.textContent; + dropdownValue.textContent = selectedValue; + dropdownList.classList.remove('dropdown__list_active'); + }); + }); + }); + + document.addEventListener('click', (event) => { + dropdowns.forEach(dropdown => { + const dropdownList = dropdown.querySelector('.dropdown__list'); + if (!dropdown.contains(event.target)) { + dropdownList.classList.remove('dropdown__list_active'); + } + }); + }); +}); diff --git a/event-object/keysolo/task.js b/event-object/keysolo/task.js index ffbc30fbb8..ca19b3b2f0 100644 --- a/event-object/keysolo/task.js +++ b/event-object/keysolo/task.js @@ -6,7 +6,6 @@ class Game { this.lossElement = container.querySelector('.status__loss'); this.reset(); - this.registerEvents(); } @@ -17,78 +16,68 @@ class Game { } registerEvents() { - /* - TODO: - Написать обработчик события, который откликается - на каждый введённый символ. - В случае правильного ввода символа вызываем this.success() - При неправильном вводе символа - this.fail(); - DOM-элемент текущего символа находится в свойстве this.currentSymbol. - */ + document.addEventListener('keydown', (event) => { + const inputChar = event.key.toLowerCase(); + const currentChar = this.currentSymbol.textContent.toLowerCase(); + + if (inputChar === currentChar) { + this.success(); + } else { + this.fail(); + } + }); } success() { - if(this.currentSymbol.classList.contains("symbol_current")) this.currentSymbol.classList.remove("symbol_current"); + this.currentSymbol.classList.remove("symbol_current"); this.currentSymbol.classList.add('symbol_correct'); this.currentSymbol = this.currentSymbol.nextElementSibling; - if (this.currentSymbol !== null) { + if (this.currentSymbol) { this.currentSymbol.classList.add('symbol_current'); - return; + } else { + this.winsElement.textContent = +this.winsElement.textContent + 1; + if (this.winsElement.textContent == 10) { + alert('Победа!'); + this.reset(); + } else { + this.setNewWord(); + } } - - if (++this.winsElement.textContent === 10) { - alert('Победа!'); - this.reset(); - } - this.setNewWord(); } fail() { - if (++this.lossElement.textContent === 5) { + this.lossElement.textContent = +this.lossElement.textContent + 1; + if (this.lossElement.textContent == 5) { alert('Вы проиграли!'); this.reset(); + } else { + this.setNewWord(); } - this.setNewWord(); } 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}` - ) - .join(''); + const html = [...word].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..a37d095b1a 100644 --- a/event-object/tabs/task.js +++ b/event-object/tabs/task.js @@ -0,0 +1,27 @@ +class Tabs { + constructor(tabsContainer) { + this.tabsContainer = tabsContainer; + this.tabs = tabsContainer.querySelectorAll('.tab'); + this.contents = tabsContainer.querySelectorAll('.tab__content'); + + this.registerEvents(); + } + + registerEvents() { + this.tabs.forEach((tab, index) => { + tab.addEventListener('click', () => this.switchTab(index)); + }); + } + + switchTab(index) { + this.tabs.forEach((tab, i) => { + tab.classList.toggle('tab_active', i === index); + this.contents[i].classList.toggle('tab__content_active', i === index); + }); + } + } + + document.querySelectorAll('.tabs').forEach(tabsContainer => { + new Tabs(tabsContainer); + }); + \ No newline at end of file diff --git a/js-features/cookie-clicker/task.js b/js-features/cookie-clicker/task.js index e69de29bb2..78f13d43b8 100644 --- a/js-features/cookie-clicker/task.js +++ b/js-features/cookie-clicker/task.js @@ -0,0 +1,14 @@ +const clickerCounter = document.getElementById('clicker__counter'); +const cookie = document.getElementById('cookie'); +let clickCount = 0; + +cookie.onclick = () => { + clickCount++ + clickerCounter.textContent = clickCount; + cookie.src = "https://i.postimg.cc/T1bWdf2y/1024px-Pepperidge-Farm-Nantucket-Cookie.jpg"; + if (clickCount % 2 == 0){ + cookie.width -= 200; + } else { + cookie.width += 200; + } +} \ No newline at end of file diff --git a/js-features/countdown/task.js b/js-features/countdown/task.js index e69de29bb2..3e0e0242f1 100644 --- a/js-features/countdown/task.js +++ b/js-features/countdown/task.js @@ -0,0 +1,8 @@ +const p = document.getElementById('timer'); +const interval = setInterval(() => { + p.textContent = Number(p.textContent) - 1 + if (Number(timer.textContent) == 0){ + alert('Вы победили в конкурсе!'); + clearInterval(interval); + } +}, 1000) \ No newline at end of file diff --git a/js-features/mole-game/task.js b/js-features/mole-game/task.js index e69de29bb2..fc03a17386 100644 --- a/js-features/mole-game/task.js +++ b/js-features/mole-game/task.js @@ -0,0 +1,130 @@ +(() => { + let playing = true, + deadCount = 0, + lostCount = 0, + activeHole = 1; + + const deadCounter = document.getElementById('dead'); + const lostCounter = document.getElementById('lost'); + const status = document.getElementById('status'); + + const stop = () => { + playing = false; + alert("Игра окончена!"); + resetGame(); + }; + + const getHole = index => document.getElementById('hole${index}'); + const deactivateHole = index => getHole(index).className = 'hole'; + const activateHole = index => getHole(index).className = 'hole hole_has-mole'; + + const next = () => setTimeout(() => { + if (!playing) { + return; + } + deactivateHole(activateHole); + activeHole = Math.floor(1 + Math.random() * 9); + activateHole(activeHole); + next(); + }, 800); + + const resetGame = () => { + deadCount = 0; + lostCount = 0; + deadCounter.textContent = deadCount; + lostCounter.textContent = lostCount; + playing = true; + next(); + };(() => { + let playing = true, + deadCount = 0, + lostCount = 0, + activeHole = 1; + + const deadCounter = document.getElementById('dead'); + const lostCounter = document.getElementById('lost'); + const status = document.getElementById('status'); + + const stop = () => { + playing = false; + alert("Игра окончена!"); + resetGame(); + }; + + const getHole = index => document.getElementById(`hole${index}`); + const deactivateHole = index => getHole(index).className = 'hole'; + const activateHole = index => getHole(index).className = 'hole hole_has-mole'; + + const next = () => setTimeout(() => { + if (!playing) { + return; + } + deactivateHole(activeHole); + activeHole = Math.floor(1 + Math.random() * 9); + activateHole(activeHole); + next(); + }, 800); + + const resetGame = () => { + deadCount = 0; + lostCount = 0; + deadCounter.textContent = deadCount; + lostCounter.textContent = lostCount; + playing = true; + next(); + }; + + for (let i = 1; i <= 9; i++) { + getHole(i).onclick = function() { + if (this.className.includes('hole_has-mole')) { + deadCount++; + deadCounter.textContent = deadCount; + + if (deadCount === 10) { + alert("Поздравляем! Вы убили 10 кротов и выиграли!"); + stop(); + } + } else { + lostCount++; + lostCounter.textContent = lostCount; + + if (lostCount === 5) { + alert("Вы промахнулись 5 раз. Игра окончена!"); + stop(); + } + } + deactivateHole(activeHole); + activeHole = Math.floor(1 + Math.random() * 9); + activateHole(activeHole); + }; + } + next(); + })(); + + + for (let i = 1; i <= 9; i++) { + getHole(i).onclick = function() { + if (this.className.includes('hole_has-mole')) { + deadCount++; + deadCounter.textContent = deadCount; + + if (deadCount === 10) { + alert("Поздравляем! Вы убили 10 кротов и выиграли!"); + stop(); + } + } else { + lostCount++; + lostCounter.textContent = lostCount; + + if (lostCount === 5) { + alert("Вы промахнулись 5 раз. Игра окончена!"); + stop(); + } + } + deactivateHole(activeHole); + activeHole = Math.floor(1 + Math.random() * 9); + activateHole(activeHole); + }; + } + next(); + })(); \ No newline at end of file