Lesson05

script03a.js

@@ -0,0 +1,11 @@
+const modal = document.querySelector('.wrap')
+const closeBtn = document.querySelector('span')
+const showBtn = document.querySelector('button')
+
+closeBtn.addEventListener('click',function(){
+    modal.classList.add('hidden');
+});
+
+showBtn.addEventListener('click',function(){
+    modal.classList.remove('hidden');
+});

script03b.js

@@ -0,0 +1,17 @@
+'use scrict'
+let modal = document.querySelector('.wrap')
+let closeBtn = document.querySelector('span')
+let showBtn = document.querySelector('button')
+
+closeBtn.addEventListener('click',function(){
+    modal.classList.remove('rollIn');
+    modal.classList.add('animated','rollOut')
+    setTimeout(function(){
+        modal.classList.add('hidden');
+    },1000)
+});
+
+showBtn.addEventListener('click',function(){
+    modal.classList.remove('rollOut','hidden');
+    modal.classList.add('animated','rollIn')
+});

script04.js

@@ -0,0 +1,42 @@
+const buttons = document.querySelectorAll('button')
+buttons.forEach(function(button){
+    button.addEventListener('click',function(event){
+        handleClick(event)
+    })
+})
+/**
+* Функция обрабатывает клик по кнопке в карточке товара и попеременно вызывает 
+* функции для показа или скрытия текста о товаре.
+* @param {MouseEvent} clickedButtonEvent
+*/
+function handleClick(clickedButtonEvent){
+    const cardNode = clickedButtonEvent.target.parentNode;
+
+    const card ={
+        wrap: cardNode,
+        img: cardNode.querySelector('img'),
+        productName: cardNode.querySelector('.productName'),
+        button: cardNode.querySelector('button')
+    }
+
+    const textOnButton = card.button.innerText;
+    if(textOnButton ==='Подробнее'){
+        showMoreText(card);
+    } else if(textOnButton === 'Отмена'){
+        hideMoreText(card);
+    }
+
+}
+
+function showMoreText(card){
+    card.img.style.display = 'none';
+    const text = 'Описалово картинки';
+    card.productName.insertAdjacentHTML('afterend', `<div class="desc">${text}</div>`)
+    card.button.innerText ='Отмена';
+}
+
+function hideMoreText(card){
+    card.img.style.display = 'block';
+    card.wrap.querySelector('.desc').remove();
+    card.button.innerText ='Подробнее';
+}

script05.js

@@ -0,0 +1,76 @@
+let app = {
+    config: {
+        rows: [8,7,6,5,4,3,2,1],
+        cols: ['a','b','c','d','e','f','g','h']
+    },
+
+    run(){
+        //генерим доску
+        let board = this.generateBoard();
+        //добавляем доску в документ
+        document.body.innerHTML = board;
+
+        //добавляем колонку с номерами строк
+        this.insertRowsNumbers();
+        //добавляем строку с названием колонок
+        this.insertColsChars();
+    },
+
+    generateBoard(){
+        let board = '';
+        let rowStartWidthColor = 'white';
+        for(let i = 0;i < this.config.rows.length; i++){
+            let row = '';
+            row = this.generateRow(rowStartWidthColor,this.config.rows[i]);
+            if(rowStartWidthColor == 'white'){
+                rowStartWidthColor = 'black';
+            } else{
+                rowStartWidthColor = 'white';
+            }
+            board += row;
+        }
+        return `<table><tbody>${board}</tbody></table>`;
+    },
+
+    generateRow(starWithColor, rowNum){
+        let currentColorClass = starWithColor;
+        let row = "";
+        for(let i = 0; i < this.config.cols.length; i++){
+            let field = "";
+            if(currentColorClass === 'white'){
+                field = this.generateField('white', rowNum, this.config.cols[i]);
+                currentColorClass = 'blackField';
+            } else {
+                field = this.generateField('black', rowNum, this.config.cols[i]);
+                currentColorClass = 'white';
+            }
+            row += field;
+        }
+        return `<tr>${row}</tr>`;
+    },
+
+    generateField(color, rowNum, colChar){
+        return `<td data-rowNum="${rowNum}" data-colchar="${colChar}" class="${color}"></td>`;
+    },
+
+    insertRowsNumbers(){
+        let trs =document.querySelectorAll('tr');
+        for(let i = 0; i < trs.length; i++){
+            let td = document.createElement('td');
+            td.innerText = this.config.rows[i];
+            trs[i].insertAdjacentElement("afterbegin", td);
+        }
+    },
+
+    insertColsChars(){
+        let tr = document.createElement('tr');
+        tr.innerHTML += '<td></td>';
+        for(let i = 0; i < this.config.cols.length; i++){
+            tr.innerHTML += `<td>${this.config.cols[i]}</td>`;
+        }
+        let tbody = document.querySelector('tbody');
+        tbody.insertAdjacentElement("beforeend", tr);
+    }
+};
+
+app.run()

style03a.css

@@ -0,0 +1,34 @@
+.wrap{
+    width: 400px;
+    padding: 10px;
+    background: rgb(236,236,236);
+    position: fixed;
+    top: 15%;
+    left: calc(50% - 210px);
+    box-shadow: 0 0 10px black;
+}
+
+.hidden{
+    display: none;
+}
+
+span{
+    position: absolute;
+    right: -15px;
+    top: -15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: lightgrey;
+    font-size: 34px;
+    cursor: pointer;
+    transition: 0.5s;
+}
+
+span:honer{
+    background: grey;
+    color: white;
+}

style03b.css

@@ -0,0 +1,34 @@
+.wrap{
+    width: 400px;
+    padding: 10px;
+    background: rgb(236,236,236);
+    position: fixed;
+    top: 15%;
+    left: calc(50% - 210px);
+    box-shadow: 0 0 10px black;
+}
+
+.hidden{
+    display: none;
+}
+
+span{
+    position: absolute;
+    right: -15px;
+    top: -15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: lightgrey;
+    font-size: 34px;
+    cursor: pointer;
+    transition: 0.5s;
+}
+
+span:honer{
+    background: grey;
+    color: white;
+}

style04.css

@@ -0,0 +1,18 @@
+body{
+    display: grid;
+    grid-template-columns: repeat(3,150px);
+    grid-gap: 20px;
+}
+
+.product{
+    width: 150px;
+}
+
+img{
+    display: block;
+}
+
+button{
+    margin-top: 15px;
+    display: block;
+}

styles05.css

@@ -0,0 +1,23 @@
+table{
+    border-collapse: collapse;
+}
+
+td{
+    width: 40px;
+    height: 40px;
+    border: 1px solid black;
+    text-align: center;
+}
+.white{
+    background: #FFCF73;
+}
+
+.black{
+    background: #7a5000;
+}
+
+tr:last-child td:first-child{
+    border-left: none;
+    border-bottom: none;
+}
+

task03a.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link rel="stylesheet" href="style03a.css">
+</head>
+<body>
+   <button>Показать окно</button>
+   <div class="wrap hidden">
+       <span>&times;</span>
+       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eligendi itaque magni laborum blanditiis, tempore doloribus eos delectus iste dolorum explicabo sapiente saepe ducimus dicta maiores, hic excepturi cum soluta.
+   </div>
+
+   <script src="script03a.js"></script>
+</body>
+</html>

task03b.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
+    <link rel="stylesheet" href="style03b.css">
+</head>
+<body>
+   <button>Показать окно</button>
+   <div class="wrap hidden">
+       <span>&times;</span>
+       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eligendi itaque magni laborum blanditiis, tempore doloribus eos delectus iste dolorum explicabo sapiente saepe ducimus dicta maiores, hic excepturi cum soluta.
+   </div>
+
+   <script src="script03b.js"></script>
+</body>
+</html>

task04.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link rel="stylesheet" href="style04.css">
+</head>
+<body>
+   <div class="product">
+      <div class="productName">Product 1 name</div>
+      <img src="http://unsplash.it/150/150?random&gravity=center" alt="">
+      <button>Подробнее</button>
+
+   </div>
+   <div class="product">
+      <div class="productName">Product 2 name</div>
+      <img src="http://unsplash.it/150/150?random&gravity=center" alt="">
+      <button>Подробнее</button>
+
+   </div>
+   <div class="product">
+      <div class="productName">Product 3 name</div>
+      <img src="http://unsplash.it/150/150?random&gravity=center" alt="">
+      <button>Подробнее</button>
+
+   </div>
+
+   <script src="script04.js"></script>
+</body>
+</html>

task05.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link rel="stylesheet" href="styles05.css">
+</head>
+<body>
+    <script src="script05.js"></script>
+</body>
+</html>