GeekBrainsTutorial · PeregudovN · Feb 18, 2021 · Feb 18, 2021 · Mar 1, 2021 · AndrewRimsky
diff --git a/HW#1/project/css/style.css b/HW#1/project/css/style.css
@@ -0,0 +1,47 @@
+*{
+    margin: 0 auto;
+    padding: auto;
+
+}
+body{
+    background-color: #dedaeedd;
+}
+header{
+    display: grid;
+    grid-template-rows: 1fr;
+    justify-content: flex-end;
+    background-color: #cccc;
+}
+.btn-cart{
+    padding: 10px 50px;
+    background-color: #fff;
+}
+main{
+    display: grid;
+    grid-template-columns: 1fr;
+}
+.products{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+}
+.product-item{
+    border: 1px solid black;
+    display: block;
+    width: 350px;
+    height: 200px;
+    margin: 5px;
+}
+.product-item h3{
+    color: red;
+    font-size: 30px;
+    margin: 5px;
+}
+.product-item p{
+    font-weight: 600;
+    font-size: 18px;
+    margin-left: 10px;
+}
+button{
+    margin: 5px;
+}
diff --git a/HW#1/project/index.html b/HW#1/project/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="css/style.css">
+    <title>Title</title>
+</head>
+<body>
+    <header>
+        <button class="btn-cart">Cart</button>
+    </header>
+    <main>
+        <div class="products"></div>
+    </main>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/HW#1/project/js/main.js b/HW#1/project/js/main.js
@@ -0,0 +1,26 @@
+const data = [
+    { title: 'Notebook', id: 1, price: 2000 },
+    { title: 'Keyboard', id: 2, price: 200 },
+    { title: 'Mouse', id: 3, price: 100 },
+    { title: 'Gamepad', id: 4, price: 87 },
+    { title: 'Новый Товар', id: 5 }
+];
+const renderProduct = (title, id, price = 'Цена товара', img = "https://placehold.it//150x100") => {
+    return `
+        <div class="product-item">
+        <img src = "${img}" alt = "${title}">
+            <div>
+                <h3>${title}</h3>
+                <p>${price}</p>
+                <button>Купить</button>
+            </div>
+        </div>
+    `
+};
+
+const render = (products) => {
+    document.querySelector('.products').innerHTML = products.map(item => renderProduct(item.title, item.id, item.price)).join('');
+};
+
+render(data);
+console.log(data)
diff --git a/HW#4/form.js b/HW#4/form.js
@@ -0,0 +1,90 @@
+const  validateParams = {
+    name:{
+            pattern:/^[a-zа-яё]+$/i,
+            error:'Имя должно содержать только буквы'
+    },
+    phone:{
+            pattern:/^\+7\(\d{3}\)\d{3}-\d{4}$/,
+            error:'Телефон должын быть в форме "+7(000)000-0000"'
+    },
+    email:{
+        pattern:/^[\w\.-]+@\w+\.[a-z]{2,4}$/i,
+        error:'Email должен выглядеть как [email protected]'
+    }
+};
+
+class Validator{
+    static errorClass = 'error-msg';
+    form =null;
+    params = null;
+    valid = false;
+
+    constructor(form,params){
+        this.form =document.querySelector(form);
+        this.params = params;
+        this._init();
+    }
+    _init(){
+        this.form.addEventListener('submit', e =>{
+            this._validateForm();
+            if(!this.valid){
+                e.preventDefault();
+            }
+        })
+    }
+    _validateForm(){
+        this.valid = false;
+        const errors = [...this.form.querySelectorAll(`.${Validator.errorClass}`)];
+        for(let error of errors){
+            error.remove();
+        }
+        const formFields = [...this.form.querySelectorAll('input')];
+
+        for(let field of formFields){
+            this._validate(field);
+        }
+
+        if(![this.form.querySelectorAll(`.invalid`)].length){
+            this.valid = true;
+        }
+
+    }
+    _validate(field){
+        if(!this.params[field.name]){
+            return;
+        }
+        const {pattern,error} = this.params[field.name];
+
+        if(!pattern.test(field.value)){
+            field.classList.add('invalid');
+            this._addErrorMsg(field,error);
+            this.watchField(field,pattern,error);
+        }
+    }
+    _addErrorMsg(field,error){
+        const errorBlock = `<div class ="${Validator.errorClass}">${error}</div>`;
+        field.parentNode.insertAdjacentHTML('beforeend',errorBlock);
+    }
+    watchField(field,pattern,error){
+        field.addEventListener('input',() =>{
+            const errorBlock = field.parentNode.querySelector(`${Validator.errorClass}`);
+            if(pattern.test(field.value)){
+                field.classList.remove('invalid');
+                field.classList.add('valid');
+                if(errorBlock){
+                    errorBlock.remove();
+                }
+            }else{
+                field.classList.remove('valid');
+                field.classList.add('invalid');
+                if(!errorBlock){
+                    this._addErrorMsg(field,error);
+                }
+            }
+        })
+    }
+}
+
+window.onload = () =>{
+    new Validator(`#myform`,validateParams)
+}
diff --git a/HW#4/index.html b/HW#4/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+   <div class="text">
+    <p>
+        One:В 'Hi Mary.' Two:В 'Oh, hi.'
+        One:В 'How are you doing?'
+        Two:В 'I'm doing alright. How about you?'
+        One:В 'Not too bad. The weather is great isn't it?'
+        Two:В 'Yes. It's absolutely beautiful today.'
+        One:В 'I wish it was like this more frequently.'
+        Two:В 'Me too.'
+        One:В 'So where are you going now?'
+        Two:В 'I'm going to meet a friend of mine at the department store.'
+        One:В 'Going to do a little shopping?'
+        Two:В 'Yeah, I have to buy some presents for my parents.'
+        One:В 'What's the occasion?'
+        Two:В 'It's their anniversary.'
+        One:В 'That's great. Well, you better get going. You don't want to be late.'
+        Two:В 'I'll see you next time.'
+        One:В 'Sure. Bye.'
+        </p>
+        <button class="replace">REPLACE</button>
+   </div>
+   <form action="#" method="POST" class="some" id="myform">
+    <div>
+        <label>
+            Your name is ... <br>
+            <input type="text" name="name" id="name" placeholder="Nikita">
+        </label>
+    </div>
+    <div>
+        <label>
+            Your number phone is ... <br>
+            <input type="text" name="phone" id="phone" placeholder="89507500744">
+        </label>
+    </div>
+    <div>
+        <label>
+            Your email is ... <br>
+            <input type="text" name="email" id="email" placeholder="[email protected]">
+        </label>
+    </div>
+    <button id="val-btn">Submit</button>
+   </form>
+   <script src="./form.js"></script>
+    <script src="./replacer.js"></script>
+</body>
+</html>
diff --git a/HW#4/replacer.js b/HW#4/replacer.js
@@ -0,0 +1,5 @@
+let block = document.querySelector('.text');
+document.querySelector('.replace').addEventListener('click',()=>{
+    block.textContent = block.textContent.replace(/\B'|'\B/g,'"');
+    block.style.color = 'green';
+})
diff --git a/HW#4/style.css b/HW#4/style.css
@@ -0,0 +1,13 @@
+.text{
+    border-bottom: 4px solid black;
+}
+.error-msg{
+    color: red;
+    margin: 10px 0;
+}
+.valid{
+    border: 2px solid green;
+}
+.invalid{
+    border: 2px solid red;
+}