dadika123 · dadika123 · Sep 1, 2020 · Sep 11, 2020 · Sep 11, 2020 · Sep 11, 2020
diff --git a/hw6/задания 1 уровня/1-замена_картинок/images.html b/hw6/задания 1 уровня/1-замена_картинок/images.html
@@ -0,0 +1,20 @@
+<!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>
+        let imgSwap = document.querySelector('img');
+        imgSwap.setAttribute('src', 'images/2.jpg');
+    </script>
+</body>
+</html>
diff --git a/hw6/задания 1 уровня/1-замена_картинок/images/1.jpg b/hw6/задания 1 уровня/1-замена_картинок/images/1.jpg
diff --git a/hw6/задания 1 уровня/1-замена_картинок/images/2.jpg b/hw6/задания 1 уровня/1-замена_картинок/images/2.jpg
diff --git a/hw6/задания 1 уровня/2-стили.html b/hw6/задания 1 уровня/2-стили.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>
+    <div>Lorem, ipsum dolor.</div>
+    <div>Lorem, ipsum dolor.</div>
+    <div>Lorem, ipsum dolor.</div>
+
+    <!-- Задание. Найдите все дивы и добавьте им padding: 10px, для этого:
+    1. Найдите все дивы, например с помощью getElementsByTagName.
+    2. Затем с помощью цикла пройдитесь по этой коллекции, и обращаясь к
+    каждому элементу, обратитесь к его свойству style, а затем к свойству
+    padding. -->
+
+    <script>
+        let collectDiv = document.querySelectorAll('div');
+        for (let index = 0; index < collectDiv.length; index++) {
+            collectDiv[index].style.padding = '10px';
+        }
+    </script>
+</body>
+
+</html>
diff --git a/hw6/задания 1 уровня/3-карточки_товаров/cards.html b/hw6/задания 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>
+        let products = document.querySelectorAll('.product');
+        for (let index = 0; index < products.length; index++) {
+            products[index].classList.add('back-color');
+        }
+        let productsName = document.querySelectorAll('.productName');
+        for (let index = 0; index < productsName.length; index++) {
+            productsName[index].classList.add('productName')
+        }
+    </script>
+</body>
+
+</html>
diff --git a/hw6/задания 1 уровня/3-карточки_товаров/images/1.jpg b/hw6/задания 1 уровня/3-карточки_товаров/images/1.jpg
diff --git a/hw6/задания 1 уровня/3-карточки_товаров/styles.css b/hw6/задания 1 уровня/3-карточки_товаров/styles.css
@@ -0,0 +1,15 @@
+.product {
+    width: 200px;
+    padding: 10px;
+    float: left;
+    margin-right: 30px;
+    box-shadow: 0 0 4px black;
+}
+
+.back-color {
+    background-color: RGBA(255, 0, 0);
+}
+
+.productName {
+    font-size: 24px;
+}
diff --git a/hw6/задания 1 уровня/4-отложенный_вызов.html b/hw6/задания 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>
+
+    <!-- 
+        Задание. Вызовите функцию setTimeout и ей в качестве аргументов передайте:
+        1-аргумент. (это уже сделано) анонимную функцию, которая будет вызвана 
+        через определенный промежуток времени
+        2-аргумент. задержку в милисекундах, которая будет равняться 3 секундам
+
+        Сделайте чтобы в анонимной функции вызывалась функция alert со строкой
+        "message".
+    -->
+
+    <script>
+        setTimeout(function () {
+            alert('message');
+        }, 3000);
+    </script>
+</body>
+
+</html>
diff --git a/hw6/задания 1 уровня/5-добавить_отступы.html b/hw6/задания 1 уровня/5-добавить_отступы.html
@@ -0,0 +1,35 @@
+<!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>
+        let inputs = document.querySelectorAll('input');
+        for (let index = 0; index < inputs.length; index++) {
+            inputs[index].style.marginBottom = '10px';
+        }
+    </script>
+</body>
+
+</html>
diff --git a/hw6/задания 1 уровня/6-добавить_переносы.html b/hw6/задания 1 уровня/6-добавить_переносы.html
@@ -0,0 +1,32 @@
+<!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>
+        let inputs = document.querySelectorAll('input');
+        for (let index = 0; index < inputs.length; index++) {
+            inputs[index].insertAdjacentHTML("afterend", "<br>");
+        }
+    </script>
+</body>
+
+</html>
diff --git a/hw6/задания 2 уровня/1-получение_значений_из_input/inputs.html b/hw6/задания 2 уровня/1-получение_значений_из_input/inputs.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>
+    <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>
+
+    </script>
+</body>
+</html>
diff --git a/hw6/задания 2 уровня/2-анимация/index.html b/hw6/задания 2 уровня/2-анимация/index.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>
+    <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>
+
+    </script>
+</body>
+</html>
diff --git a/hw6/задания 2 уровня/2-анимация/style.css b/hw6/задания 2 уровня/2-анимация/style.css
@@ -0,0 +1,7 @@
+.message {
+    width: 150px;
+    padding: 20px;
+    background: lightgoldenrodyellow;
+    border: 1px solid orange;
+    display: none;
+}
diff --git a/hw6/задания 2 уровня/3-рейтинг/rating.html b/hw6/задания 2 уровня/3-рейтинг/rating.html
@@ -0,0 +1,51 @@
+<!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/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
+    <style>
+        i {
+            font-size: 50px;
+        }
+        .golden {
+            color: gold;
+        }
+    </style>
+</head>
+<body>
+    <i id="first" class="fas fa-star"></i>
+    <i id="second" class="fas fa-star"></i>
+    <i id="third" class="fas fa-star"></i>
+    <i id="fourth" class="fas fa-star"></i>
+    <i id="fifth" class="fas fa-star"></i>
+
+    <!-- Задание. Используя заготовку, сделайте чтобы при наведении на вторую звезду
+    подсвечивались первая и вторая звезды. При наведени на третью звезду подсвечивались
+    первая, вторая и третья звезды, и т.д. 
+    mouseover - это событие срабатывает когда мы наводим на элемент.
+    mouseout - это событие срабатывает когда мы перестаем наводить на элемент.
+    -->
+
+    <script>
+        let firstStar = document.getElementById('first');
+        let secondStar = document.getElementById('second');
+        let thirdStar = document.getElementById('third');
+        let fourthStar = document.getElementById('fourth');
+        let fifthStar = document.getElementById('fifth');
+
+        let goldenClass = 'golden';
+
+        firstStar.addEventListener('mouseover', function() {
+            if (!firstStar.classList.contains('goldenClass')) {
+                firstStar.classList.add(goldenClass);
+            }
+        });
+
+        firstStar.addEventListener('mouseout', function() {
+            firstStar.classList.remove(goldenClass);
+        });
+    </script>
+</body>
+</html>