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