t-rexamarin · t-rexamarin · Oct 26, 2021 · Oct 31, 2021 · Nov 4, 2021
diff --git a/1 уровень/1-перебор_свойств_объекта.html b/1 уровень/1-перебор_свойств_объекта.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        const products = {
+            one: "один",
+            two: "два",
+            three: "три",
+        };
+
+        /* 
+        Задание.
+        Используя цикл for in переберите объект products, ведите в консоль
+        имя свойства, значение свойства.
+        */
+
+        for (const product in products) {
+            console.log(product, products[product]);
+        }
+    </script>
+</body>
+</html>
diff --git a/1 уровень/2-очистка_с_помощью_innerHTML.html b/1 уровень/2-очистка_с_помощью_innerHTML.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing.
+    </p>
+
+    <!-- 
+    Задание. С помощью innerHTML очистите содержимое параграфа.
+    -->
+
+    <script>
+        let p = document.querySelector('p');
+        p.innerText = '';
+    </script>
+</body>
+</html>
diff --git a/1 уровень/3-заполнение_с_конкатенацией.html b/1 уровень/3-заполнение_с_конкатенацией.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+    <script>
+        let totalString = "";
+
+        /* Задание.
+        Дописывайте в строку totalString с помощью цикла и конкатенации строки,
+        так, чтобы итоговое значение в totalString получилось: слово1слово2слово3
+        */
+        for (let i = 1; i <= 3; i++) {
+            totalString += `слово${i}`;
+        }
+
+        // должно вывести:
+        // слово1слово2слово3
+        console.log(totalString);
+    </script>
+</body>
+</html>
diff --git a/1 уровень/4-вставка_разметки.html b/1 уровень/4-вставка_разметки.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <!-- <a href="https://picsum.photos/200/300" target="_blank">ссылка</a> -->
+
+    <!-- 
+    Задание.
+    С помощью insertAdjacentHTML добавьте в body ссылку по примеру из комментария выше.
+    При создании разметки используйте шаблонный литерал. Данные для ссылки ниже.
+    -->
+
+    <script>
+        let url = "https://picsum.photos/200/300";
+        let targetAttr = "_blank";
+        let linkText = "ссылка";
+        let myA = `<a href=${url} target=${targetAttr}>${linkText}</a>`;
+
+        let body = document.querySelector('body');
+        body.insertAdjacentHTML('afterbegin', myA);
+    </script>
+</body>
+</html>
diff --git a/2 уровень/1-получение_data-атрибутов.html b/2 уровень/1-получение_data-атрибутов.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <button data-id="1" data-value="btn1">Кнопка 1</button>
+    <button data-id="2" data-value="btn2">Кнопка 2</button>
+    <button data-id="3" data-value="btn3">Кнопка 3</button>
+
+    <!-- 
+    Задание. Нужно при клике на кнопку выводить в консоль значения ее
+    data- атрибутов.
+    1. Получите все кнопки например с помощью querySelectorAll
+    2. Переберите полученную коллекцию, например с помощью forEach
+        2.1 data- атрибуты можете читать например с помощью свойства dataset
+        у каждой кнопки.
+    -->
+
+    <script>
+        let buttons = document.querySelectorAll('button');
+
+        buttons.forEach(function(button) {
+            button.addEventListener('click', function (event) {
+                let buttonData = event.target.dataset;
+                console.log(buttonData);
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/2 уровень/2-создание_разметки.html b/2 уровень/2-создание_разметки.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <!-- <img src="https://picsum.photos/200/300?random=1" alt="pic1">
+    <img src="https://picsum.photos/200/300?random=2" alt="pic2">
+    <img src="https://picsum.photos/200/300?random=3" alt="pic3"> -->
+
+    <script>
+        /* 
+        Задание.
+        С помощью цилка for добавьте в body 6 картинок, по примеру тех, что закомментированы
+        выше. Картинки вставляйте со помощью insertAdjacentHTML. При генерации разметки
+        пользуйтесь шаблонным литералом. Куда должен вставляться счетчик цилка смотрите
+        ниже:
+        <img src="https://picsum.photos/200/300?random=${счетчик_цикла_здесь}" alt="pic${счетчик_цикла_здесь}">
+        */
+        let body = document.querySelector('body');
+
+        for (let i = 1; i <=6; i++) {
+            let imgSrc = `https://picsum.photos/200/300?random=${i}`;
+            let imgAlt = `pic${i}`
+            let newImg = `<img src=${imgSrc} alt=${imgAlt}>`;
+
+            body.insertAdjacentHTML('beforeend', newImg);
+        }
+    </script>
+</body>
+</html>
diff --git a/2 уровень/3-размер_шрифта.html b/2 уровень/3-размер_шрифта.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <input type="range" min="20" max="100">
+    <div>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat, expedita.
+    </div>
+
+    <!-- 
+    Задание. Нужно чтобы при смещении ползунка в div менялся размер шрифта.
+    1. Получите ссылку на input.
+    2. Получите ссылку на div.
+    3. Input'у поставьте прослушивание события 'input';
+        3.1 У функции-обработчика определите параметр event.
+        3.2 Значение input'а читайте из event.target.value.
+    -->
+
+    <script>
+        let input = document.querySelector('input');
+        let div = document.querySelector('div');
+
+        input.addEventListener('input', function (event) {
+            let textSize = event.target.value;
+            div.style.fontSize = `${textSize}px`;
+        });
+    </script>
+</body>
+</html>
diff --git a/3 уровень/1-tabs/1-tabs.html b/3 уровень/1-tabs/1-tabs.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <ul class="nav nav-tabs">
+            <li class="nav-item">
+                <a class="nav-link active" href="#">Link 1</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Link 2</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Link 3</a>
+            </li>
+        </ul>
+
+        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
+    </div>
+
+    <!-- 
+    Задание. Нужно сделать, чтобы при кликах по .nav-link:
+    1. Класс active назначался тому .nav-link, по которому кликнули, а у предыдущего
+    .nav-link, чтобы этот класс убирался.
+    2. В зависимости от того по какому .nav-link кликнули нужно чтобы менялся текст
+    в .text, соответствующие тексты вы найдете в app.js
+    -->
+
+    <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/3 уровень/1-tabs/app.js b/3 уровень/1-tabs/app.js
@@ -0,0 +1,63 @@
+'use strict';
+const texts = {
+    text1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
+    text2: 'Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.',
+    text3: 'Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил.'
+};
+
+/* 
+1. Получите ссылку на .text, например с помощью querySelector
+2. Получите коллекцию, в которой хранятся все .nav-link, например с помощью querySelectorAll
+    2.1 Переберите полученную коллекцию, например с помощью forEach, и каждой ссылке назначьте
+    обработчик клика функцию clickHandler.
+*/
+let divTxt = document.querySelector('div.text');
+let navLinks = document.querySelectorAll('.nav-link');
+
+navLinks.forEach(function (elem) {
+    elem.addEventListener('click', clickHandler);
+});
+
+/**
+ * Обработчик клика по .nav-link
+ * @param {MouseEvent} event 
+ */
+function clickHandler(event) {
+    // здесь вызывайте changeText и changeActiveClass, и передавайте
+    // им объект события.
+   changeActiveClass(event);
+   changeText(event);
+}
+
+/**
+ * Эта функция должна убирать .active у предыдущего .nav-link и ставить его
+ * на тот, по которому кликнули.
+ * @param {MouseEvent} event 
+ */
+function changeActiveClass(event) {
+    let activeElem = document.querySelector('.active');
+    activeElem.classList.remove('active');
+    event.target.classList.add('active');
+}
+
+/**
+ * Эта фукнция должна читать текст (например через textContent) из 
+ * .nav-link по которому кликнули и в зависимости от этого в .text
+ * ставить соответствующий текст из texts.
+ * @param {MouseEvent} event 
+ */
+function changeText(event) {
+    let curText = event.target.textContent;
+
+    switch (curText) {
+        case 'Link 1':
+            divTxt.textContent = texts["text1"];
+            break;
+        case 'Link 2':
+            divTxt.textContent = texts["text2"];
+            break;
+        case 'Link 3':
+            divTxt.textContent = texts["text3"];
+            break;
+    }
+}
diff --git a/3 уровень/1-tabs/style.css b/3 уровень/1-tabs/style.css
@@ -0,0 +1,3 @@
+.nav {
+    margin-top: 30px;
+}
diff --git a/3 уровень/2-сообщение/message.html b/3 уровень/2-сообщение/message.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <button>Показать сообщение</button>
+    <div class="message">
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt, aliquam enim voluptates quibusdam
+        perferendis sint ipsa, nulla quas doloribus nobis libero voluptatem unde inventore. Ut quas corporis fugit error
+        explicabo? Ipsa quos qui similique sequi officia quod ab reiciendis alias!
+    </div>
+
+    <!-- 
+    Задание. Вам нужно чтобы при клике на кнопку появлялось сообщение .message
+    снизу экрана, в общем как сообщения вконтакте.
+    1. Аудио воспроизводите как здесь https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement
+    2. Чтобы получить высоту .message, используйте свойство clientHeight
+    3. Чтобы анимировать перемещение .message используйте стиль transform
+    как здесь https://webref.ru/css/value/translatey
+    -->
+
+    <script>
+        let button = document.querySelector('button');
+        let msg = document.querySelector('.message');
+
+        button.addEventListener('click', function () {
+            let msgHeight = msg.clientHeight;
+            let audio = new Audio('notification.mp3');
+s
+            msg.style.transform = `translateY(-${40 + msgHeight}px)`;
+            audio.play();
+        });
+    </script>
+</body>
+
+</html>
diff --git a/3 уровень/2-сообщение/notification.mp3 b/3 уровень/2-сообщение/notification.mp3
diff --git a/3 уровень/2-сообщение/style.css b/3 уровень/2-сообщение/style.css
@@ -0,0 +1,11 @@
+.message {
+    width: 300px;
+    color: white;
+    font-family: sans-serif;
+    padding: 15px;
+    border-radius: 20px;
+    background: rgba(0, 0, 0, 0.7);
+    position: fixed;
+    top: calc(100vh + 20px);
+    transition-duration: 0.5s;
+}