dadika123 · dadika123 · Sep 1, 2020 · Sep 11, 2020 · Sep 11, 2020 · Sep 11, 2020
diff --git a/hw7/1 уровень/1-перебор_свойств_объекта.html b/hw7/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 (const key in products) {
+                console.log(key);
+        }
+        /* 
+        Задание.
+        Используя цикл for in переберите объект products, ведите в консоль
+        имя свойства, значение свойства.
+        */
+
+    </script>
+</body>
+</html>
diff --git a/hw7/1 уровень/2-очистка_с_помощью_innerHTML.html b/hw7/1 уровень/2-очистка_с_помощью_innerHTML.html
@@ -0,0 +1,22 @@
+<!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 text = document.querySelector('p');
+        text.innerHTML='';
+    </script>
+</body>
+</html>
diff --git a/hw7/1 уровень/3-заполнение_с_конкатенацией.html b/hw7/1 уровень/3-заполнение_с_конкатенацией.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>
+        let totalString = "";
+
+        /* Задание.
+        Дописывайте в строку totalString с помощью цикла и конкатенации строки,
+        так, чтобы итоговое значение в totalString получилось: слово1слово2слово3
+        */
+        for (let index = 1; index <= 3; index++) {
+            totalString+='слово'+index
+        }
+
+        // должно вывести:
+        // слово1слово2слово3
+        console.log(totalString);
+
+    </script>
+</body>
+</html>
diff --git a/hw7/1 уровень/4-вставка_разметки.html b/hw7/1 уровень/4-вставка_разметки.html
@@ -0,0 +1,29 @@
+<!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 body = document.body;
+        let insertLink = '<a href =' + url + " target=" + targetAttr + ">" + linkText + "</a>";
+        body.insertAdjacentHTML("afterbegin", insertLink);
+    </script>
+</body>
+
+</html>
diff --git a/hw7/2 уровень/1-получение_data-атрибутов.html b/hw7/2 уровень/1-получение_data-атрибутов.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>
+    <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>
+
+    </script>
+</body>
+</html>
diff --git a/hw7/2 уровень/2-создание_разметки.html b/hw7/2 уровень/2-создание_разметки.html
@@ -0,0 +1,25 @@
+<!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${счетчик_цикла_здесь}">
+        */
+
+    </script>
+</body>
+</html>
diff --git a/hw7/2 уровень/3-размер_шрифта.html b/hw7/2 уровень/3-размер_шрифта.html
@@ -0,0 +1,28 @@
+<!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>
+
+    </script>
+</body>
+</html>
diff --git a/hw7/3 уровень/1-tabs/1-tabs.html b/hw7/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/hw7/3 уровень/1-tabs/app.js b/hw7/3 уровень/1-tabs/app.js
@@ -0,0 +1,43 @@
+'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.
+*/
+
+
+/**
+ * Обработчик клика по .nav-link
+ * @param {MouseEvent} event 
+ */
+function clickHandler(event) {
+    // здесь вызывайте changeText и changeActiveClass, и передавайте
+    // им объект события.
+
+}
+
+/**
+ * Эта функция должна убирать .active у предыдущего .nav-link и ставить его
+ * на тот, по которому кликнули.
+ * @param {MouseEvent} event 
+ */
+function changeActiveClass(event) {
+
+}
+
+/**
+ * Эта фукнция должна читать текст (например через textContent) из 
+ * .nav-link по которому кликнули и в зависимости от этого в .text
+ * ставить соответствующий текст из texts.
+ * @param {MouseEvent} event 
+ */
+function changeText(event) {
+
+}
diff --git a/hw7/3 уровень/1-tabs/style.css b/hw7/3 уровень/1-tabs/style.css
@@ -0,0 +1,3 @@
+.nav {
+    margin-top: 30px;
+}
diff --git a/hw7/3 уровень/2-сообщение/message.html b/hw7/3 уровень/2-сообщение/message.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>
+    <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>
+
+    </script>
+</body>
+
+</html>
diff --git a/hw7/3 уровень/2-сообщение/notification.mp3 b/hw7/3 уровень/2-сообщение/notification.mp3
diff --git a/hw7/3 уровень/2-сообщение/style.css b/hw7/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;
+}
diff --git a/hw7/4 уровень/1 вывод товаров/1-вывод_товаров.html b/hw7/4 уровень/1 вывод товаров/1-вывод_товаров.html
@@ -0,0 +1,24 @@
+<!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 data-type="phones">Показать смартфоны</button>
+    <button data-type="tablets">Показать планшеты</button>
+    <button data-type="tv">Показать телевизоры</button>
+
+    <div class="products"></div>
+
+    <!-- 
+    Задание. Вам нужно при кликах по кнопкам показывать соответствующие товары.
+    Информация о товарах находится в объекте products в файле app.js. Для генерации
+    разметки можете использовать шаблон представленный в app.js.
+    -->
+
+    <script src="app.js"></script>
+</body>
+</html>