new

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);
+});

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');
+            }
+        });
+    });
+});

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');
+        }
+    });
+});

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');
+            }
+        });
+    });
+});

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) =>
-          `<span class="symbol ${i === 0 ? 'symbol_current': ''}">${s}</span>`
-      )
-      .join('');
+    const html = [...word].map((s, i) => 
+      `<span class="symbol ${i === 0 ? 'symbol_current': ''}">${s}</span>`
+    ).join('');
+
     this.wordElement.innerHTML = html;
-
     this.currentSymbol = this.wordElement.querySelector('.symbol_current');
   }
 }
 
-new Game(document.getElementById('game'))
-
+new Game(document.getElementById('game'));

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);
+  });
+

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;
+    }
+}

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)