sana9056 · sana9056 · Nov 1, 2021
diff --git a/Домашняя работа №6/задания 1 уровня/1-замена_картинок/images.html b/Домашняя работа №6/задания 1 уровня/1-замена_картинок/images.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>
+    <img src="images/1.jpg" alt="">
+
+    <!-- Задание. Сделайте чтобы в src была картинка 2.jpg, для этого:
+    1. Найдите картинку, например с помощью querySelector
+    2. Измените атрибут src, например с помощью setAttribute -->
+
+    <script>
+        'use strict';
+        let img = document.querySelector('img');
+        img.setAttribute('src', 'images/2.jpg');
+    </script>
+</body>
+<!--sana9056-->
+</html>
diff --git a/Домашняя работа №6/задания 1 уровня/1-замена_картинок/images/1.jpg b/Домашняя работа №6/задания 1 уровня/1-замена_картинок/images/1.jpg
diff --git a/Домашняя работа №6/задания 1 уровня/1-замена_картинок/images/2.jpg b/Домашняя работа №6/задания 1 уровня/1-замена_картинок/images/2.jpg
diff --git a/Домашняя работа №6/задания 1 уровня/2-стили.html b/Домашняя работа №6/задания 1 уровня/2-стили.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>
+    <div>Lorem, ipsum dolor.</div>
+    <div>Lorem, ipsum dolor.</div>
+    <div>Lorem, ipsum dolor.</div>
+
+    <!-- Задание. Найдите все дивы и добавьте им padding: 10px, для этого:
+    1. Найдите все дивы, например с помощью getElementsByTagName.
+    2. Затем с помощью цикла пройдитесь по этой коллекции, и обращаясь к
+    каждому элементу, обратитесь к его свойству style, а затем к свойству
+    padding. -->
+
+    <script>
+        'use strict';
+        let divs = document.getElementsByTagName('div');
+        for (let i = 0; i < divs.length; i++) {
+            divs[i].style.padding = '10px';
+        }
+    </script>
+</body>
+<!--sana9056-->
+</html>
diff --git a/Домашняя работа №6/задания 1 уровня/3-карточки_товаров/cards.html b/Домашняя работа №6/задания 1 уровня/3-карточки_товаров/cards.html
@@ -0,0 +1,60 @@
+<!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="styles.css">
+</head>
+<body>
+    <div class="product">
+        <div class="productName">Товар 1</div>
+        <img src="images/1.jpg" alt="">
+        <button>В корзину</button>
+    </div>
+    <div class="product">
+        <div class="productName">Товар 1</div>
+        <img src="images/1.jpg" alt="">
+        <button>В корзину</button>
+    </div>
+    <div class="product">
+        <div class="productName">Товар 1</div>
+        <img src="images/1.jpg" alt="">
+        <button>В корзину</button>
+    </div>
+
+    <!-- Задание.
+    1. Сделайте всем элементам .product какой-нибудь фон, для этого:
+        1.1 Найдите все элементы с классом .product, например с помощью
+        querySelectorAll
+        1.2 Затем переберите эту коллекцию, например с помощью forEach,
+        у коллбэк-функции, передаваемой в forEach определите параметр,
+        назовите его например product
+        1.3 Чтобы менять стили обратитесь к параметру product и его свойству
+        style
+
+    2. Сделайте элементам .productName размер шрифта 24px, для этого:
+        2.1 Найдите все элементы с классом .productName, например с помощью
+        querySelectorAll
+        2.2 Затем переберите эту коллекцию, например с помощью forEach,
+        у коллбэк-функции, передаваемой в forEach определите параметр,
+        назовите его например name
+        2.3 Чтобы менять стили обратитесь к параметру name и его свойству
+        style
+    -->
+
+    <script>
+        'use strict';
+        let products = document.querySelectorAll('.product');
+        products.forEach(function(product) {
+            product.style.background = 'lightgreen';
+        });
+
+        let productNames = document.querySelectorAll('.productName');
+        productNames.forEach(function(productName) {
+            productName.style.fontSize = '24px';
+        });
+    </script>
+</body>
+<!--sana9056-->
+</html>
diff --git a/Домашняя работа №6/задания 1 уровня/3-карточки_товаров/images/1.jpg b/Домашняя работа №6/задания 1 уровня/3-карточки_товаров/images/1.jpg
diff --git a/Домашняя работа №6/задания 1 уровня/3-карточки_товаров/styles.css b/Домашняя работа №6/задания 1 уровня/3-карточки_товаров/styles.css
@@ -0,0 +1,7 @@
+.product {
+    width: 200px;
+    padding: 10px;
+    float: left;
+    margin-right: 30px;
+    box-shadow: 0 0 4px black;
+}
diff --git a/Домашняя работа №6/задания 1 уровня/4-отложенный_вызов.html b/Домашняя работа №6/задания 1 уровня/4-отложенный_вызов.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>
+
+    <!-- 
+        Задание. Вызовите функцию setTimeout и ей в качестве аргументов передайте:
+        1-аргумент. (это уже сделано) анонимную функцию, которая будет вызвана 
+        через определенный промежуток времени
+        2-аргумент. задержку в милисекундах, которая будет равняться 3 секундам
+
+        Сделайте чтобы в анонимной функции вызывалась функция alert со строкой
+        "message".
+    -->
+
+    <script>
+        'use strict';
+        setTimeout(function() {
+            alert('message');
+        }, 3000 /*здесь сделайте задержку 3 сек.*/);
+    </script>
+</body>
+<!--sana9056-->
+</html>
diff --git a/Домашняя работа №6/задания 1 уровня/5-добавить_отступы.html b/Домашняя работа №6/задания 1 уровня/5-добавить_отступы.html
@@ -0,0 +1,36 @@
+<!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>
+    <form action="">
+        <input type="text"><br>
+        <input type="text"><br>
+        <input type="text"><br>
+        <input type="text"><br>
+    </form>
+
+    <!-- 
+        Задание. Сделайте, чтобы у всех инпутов снизу был внешний отступ (margin-bottom).
+        1. Получите все инпуты, например с помощью querySelectorAll
+        2. Переберите полученную коллекцию например с помощью forEach
+            2.1 У функции-обработчика, которая будет передаваться в forEach определите
+            параметр input
+            2.2 Чтобы менять стили обращайтесь к свойству style у параметра input
+    -->
+
+    <script>
+        'use strict';
+        let inputs = document.querySelectorAll('input');
+        inputs.forEach(function(input) {
+            input.style.marginBottom = '10px';
+        });
+    </script>
+</body>
+<!--sana9056-->
+</html>
diff --git a/Домашняя работа №6/задания 1 уровня/6-добавить_переносы.html b/Домашняя работа №6/задания 1 уровня/6-добавить_переносы.html
@@ -0,0 +1,31 @@
+<!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="text">
+    <input type="text">
+    <input type="text">
+    <input type="text">
+
+    <!-- 
+        Задание. Инпуты идут один за другим, надо сделать чтобы после каждого инпута
+        появился тег br, чтобы инпуты стали стоять один под другим. Для этого:
+        1. Получите все инпуты, например с помощью querySelectorAll.
+        2. Переберите их с помощью цикла или forEach, и после каждого инпута
+        встявляйте тег br, например с помощью insertAdjacentHTML.
+    -->
+
+    <script>
+        'use strict';
+        let inputs = document.querySelectorAll('input');
+        inputs.forEach(function(input) {
+            input.insertAdjacentHTML('afterend', '<br>');
+        });
+    </script>
+</body>
+<!--sana9056-->
+</html>
diff --git a/Домашняя работа №6/задания 2 уровня/1-получение_значений_из_input/inputs.html b/Домашняя работа №6/задания 2 уровня/1-получение_значений_из_input/inputs.html
@@ -0,0 +1,31 @@
+<!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 id="from" type="text">
+    В инпуте написано: <span></span>
+
+    <!-- Задание.
+    1. Сохраните в переменную ссылку на span, например с помощью querySelector.
+    2. Сохраните в переменную fromEl ссылку на input, например с помощью getElementById.
+    3. Элементу fromEl назначьте обработку события change, у функции обработчика
+    этого события должен быть параметр event.
+    4. Читайте что было написано в input'e с помощью event.target.value и пишите это
+    значение в span.
+    -->
+
+    <script>
+        'use strict';
+        let span = document.querySelector('span');
+        let fromEl = document.querySelector('input');
+        fromEl.addEventListener('change', function(event) {
+            span.textContent = event.target.value;
+        });
+    </script>
+</body>
+<!--sana9056-->
+</html>
diff --git a/Домашняя работа №6/задания 2 уровня/2-анимация/index.html b/Домашняя работа №6/задания 2 уровня/2-анимация/index.html
@@ -0,0 +1,36 @@
+<!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://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <button>Показать блок</button>
+    <div class="message">
+        Lorem ipsum dolor sit.
+    </div>
+
+    <!-- Задание.
+    1. Сохраните в переменную btn ссылку на кнопку.
+    2. Сохраните в переменную msg ссылку на .message.
+    3. На btn назначьте обработку клика.
+        3.1 Внутри функции-обработчика сделайте чтобы у msg display становился block.
+        3.2 Для msg с помощью classList.add() добавьте классы animate__animated и
+        animate__fadeInLeftBig
+    -->
+
+    <script>
+        'use strict';
+        let btn = document.querySelector('button');
+        let msg = document.querySelector('.message');
+        btn.addEventListener('click', function() {
+            msg.style.display = 'block';
+            msg.classList.add('animate__animated', 'animate__fadeInLeftBig');
+        });
+    </script>
+</body>
+<!--sana9056-->
+</html>
diff --git a/Домашняя работа №6/задания 2 уровня/2-анимация/style.css b/Домашняя работа №6/задания 2 уровня/2-анимация/style.css
@@ -0,0 +1,7 @@
+.message {
+    width: 150px;
+    padding: 20px;
+    background: lightgoldenrodyellow;
+    border: 1px solid orange;
+    display: none;
+}