Lesson6

6 урок, корзина/code.js

@@ -0,0 +1 @@
+generator.generateGoodsList();

6 урок, корзина/config.js

@@ -0,0 +1,4 @@
+config = {
+    rows: 7,
+    cols: 4
+}

6 урок, корзина/functions.js

@@ -0,0 +1,15 @@
+function increment(event) {
+    let input = event.target.previousSibling;
+    let currentValue = Math.floor(input.value);
+    input.value = ++currentValue;
+}
+
+function decrement(event) {
+    let input = event.target.nextSibling;
+    let currentValue = Math.floor(input.value);
+
+    if (input.value > 0) {
+        input.value = --currentValue;
+    }
+}
+

6 урок, корзина/generator.js

@@ -0,0 +1,56 @@
+generator = {
+    generateGoodsList() {
+        let list = document.createElement("table");
+        document.body.appendChild(list);
+
+        for (let row = 0; row <= config.rows; row++) {
+            let newRow = list.insertRow(row);
+            for (let col = 0; col < config.cols; col++) {
+                let newCell = newRow.insertCell(col);
+
+                if (row === 0 && col >= 0) {
+                    let head = ['Наименование', 'Цена', 'Количество', 'Сумма'];
+                    for (let i = 0; i <= col; i++) {
+                        newCell.innerHTML = head[i];
+                        newCell.className = 'bold';
+                    }
+                } else if (col === 0 && row > 0) {
+                    let result = goods.map(a => a.name);
+                    for (let i = 0; i < row; i++) {
+                        newCell.innerHTML = result[i];
+                    }
+                } else if (row > 0 && col === 2) {
+                    let buttonNeg = document.createElement('button');
+                    buttonNeg.type = 'button';
+                    buttonNeg.className = 'buttons';
+                    buttonNeg.innerText = ' - ';
+                    newCell.appendChild(buttonNeg);
+                    buttonNeg.addEventListener('click', decrement);
+
+                    let form = document.createElement("input");
+                    form.type = 'text';
+                    form.className = 'form';
+                    form.placeholder = '0';
+                    newCell.appendChild(form);
+
+                    let buttonPos = document.createElement('button');
+                    buttonPos.type = 'button';
+                    buttonPos.className = 'buttons';
+                    buttonPos.innerText = ' + ';
+                    newCell.appendChild(buttonPos);
+                    buttonPos.addEventListener('click', increment);
+                } else if (row > 0 && col === 1) {
+                    let result = goods.map(a => a.price);
+                    for (let i = 0; i < row; i++) {
+                        newCell.className = 'price';
+                        newCell.innerHTML = result[i] + ' рублей.';
+                    }
+                }
+            }
+        }
+    },
+
+    //1. при нажатии на "+"  в поле "количество" увеличивать число на 1, в поле "сумма" помещать сумму в рублях из расчета price * amount;
+    //2. при нажатии на "-" совершать противоположное действие;
+    // 3. Под таблице ввыводить строку описания состояния карзины. "В вашей карзине ...(помещать сумму всех значений 'количества') товаров на сумму ...(общая сумма из поля "сумма")"; 
+}

6 урок, корзина/goods.js

@@ -0,0 +1,68 @@
+let goods = [
+    {
+        name: 'лампа',
+        price: 1200,
+        amount: 4,
+        putToBasket() {
+           basket.goodlist.push(this);
+        }
+    },
+    {
+        name: 'диван',
+        price: 25000, 
+        amount: 1,
+        putToBasket() {
+           basket.goodlist.push(this);
+        }
+    },
+    {
+         name: 'тумба', 
+         price: 4500, 
+         amount: 2,
+         putToBasket() {
+           basket.goodlist.push(this);
+        }
+    },
+    { 
+        name: 'зеркало', 
+        price: 5000, 
+        amount: 4,
+        putToBasket() {
+           basket.goodlist.push(this);
+        }
+    },
+    { 
+        name: 'шкаф', 
+        price: 35000, 
+        amount: 1,
+        putToBasket() {
+           basket.goodlist.push(this);
+        }
+    },
+    { 
+        name: 'туалетный столик', 
+        price: 7000, 
+        amount: 2,
+        putToBasket() {
+           basket.goodlist.push(this);
+        }
+    },
+    { 
+        name: 'пуфик', 
+        price: 2000, 
+        amount: 2,
+        putToBasket() {
+           basket.goodlist.push(this);
+        }
+    }
+]
+
+console.log(goods);
+goods.forEach(function(item, i) {
+    if (i % 2 == 0) {
+        item.putToBasket();
+    } else {
+        item.putToBasket();
+        // item.putToBasket();
+    }
+});

6 урок, корзина/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="styles.css">
+    <title>Document</title>
+</head>
+<body>
+    <script src="functions.js"></script>
+    <script src="generator.js"></script>
+    <script src="goods.js"></script>
+    <script src="config.js"></script>
+    <script src="code.js"></script>
+</body>
+</html>

6 урок, корзина/styles.css

@@ -0,0 +1,49 @@
+table {
+    background-color: grey;
+    border-collapse: collapse;
+}
+
+td {
+    width: 150px;
+    height: 30px;
+    border: 1px solid black;
+}
+
+.bold {
+     text-align: center;
+     font-weight: bold;
+}
+.text {
+    text-align: right;
+}
+
+.formPrice {
+    width: 70px;
+    height: 20px;
+    border: 1px solid black;
+    margin-left: 25%;
+    border-radius: 2px;
+    text-align: center;
+}
+
+.form {
+    width: 50px;
+    height: 20px;
+    border: 1px solid black;
+    margin-left: 10%;
+    border-radius: 2px;
+    text-align: center;
+}
+
+.buttons {
+    width: 25px;
+    height: 20px;
+    margin-left: 7%; 
+    text-align: center;
+    border: 0.5px solid black;
+    border-radius: 2px;
+}
+
+.price {
+    text-align: center;
+}

hw6-2/code.js

@@ -0,0 +1,2 @@
+generator.generateForm();
+

hw6-2/functions.js

@@ -0,0 +1,3 @@
+function increment(event) {
+    console.log(event.target);
+}

hw6-2/generator.js

@@ -0,0 +1,40 @@
+generator = {
+    generateForm() {
+        let form = document.createElement('form');
+        document.body.appendChild(form);
+        form.type = 'form';
+        form.className = 'form';
+        form.addEventListener('submit', submitForm);
+
+        let logIn = document.createElement('input');
+        logIn.type = 'text';
+        logIn.name = 'login';
+        logIn.className = 'login';
+        logIn.placeholder = 'Введите логин';
+        form.appendChild(logIn);
+
+        let password = document.createElement('input');
+        password.type = 'password';
+        password.name = 'password';
+        password.className = 'password';
+        password.placeholder = 'Введите пароль';
+
+        form.appendChild(password);
+
+        let passwordConf = document.createElement('input');
+        passwordConf.type = 'password';
+        passwordConf.name = 'password-confirmation';
+        passwordConf.className = 'password';
+        passwordConf.placeholder = 'Подтверждение пароля';
+
+        form.appendChild(passwordConf);
+
+        let button = document.createElement('input');
+        button.type = 'submit';
+        button.className = 'button';
+        button.innerText = 'Отправить';
+
+        form.appendChild(button);
+
+    }
+}

hw6-2/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="styles.css">
+    <title>Document</title>
+</head>
+<body>
+    <script src="generator.js"></script>
+    <script src="validation.js"></script>
+    <script src="code.js"></script>
+</body>
+</html>

hw6-2/styles.css

@@ -0,0 +1,43 @@
+.form {
+    width: 250px;
+    height: 300px;
+    background-color: beige;
+    margin-left: 100px;
+    margin-top: 50px;
+}
+
+.login {
+    width: 200px;
+    height: 30px;
+    border: 1px solid saddlebrown;
+    border-radius: 3px;
+    margin-left: 25px;
+    margin-top: 20px;
+    text-indent: 10px;
+}
+
+.password {
+    width: 200px;
+    height: 30px;
+    border: 1px solid saddlebrown;
+    border-radius: 3px;
+    margin-left: 25px;
+    margin-top: 20px;
+    text-indent: 10px;
+}
+
+.button {
+    width: 150px;
+    height: 30px;
+    border-radius: 3px;
+    margin-left: 20%;
+    background-color: slateblue;
+    border: 1px solid saddlebrown;
+    margin-top: 20px;
+}
+
+.p {
+    color: red;
+    font-size: 10px;
+    text-align: center;
+}

hw6-2/validation.js

@@ -0,0 +1,58 @@
+function validateLogin(login) {
+    if (login.length > 1 && login.length < 50) {
+        return { valid: true };
+    } else {
+        return { valid: false, message: 'Должно быть больше 1 одного символа и меньше 50' };
+    }
+}
+
+function validatePassword(password) {
+    if (password.length > 5 && password.length < 50) {
+        return { valid: true };
+    } else {
+        return { valid: false, message: 'Минимум	5	символов,	максимум	50' };
+    }
+}
+
+function validatePasswordConf(passwordConf, password) {
+    if (passwordConf === password) {
+        return { valid: true };
+    } else {
+        return { valid: false, message: 'Значение	должно	совпадать	с	полем	пароль.' };
+    }
+}
+
+function submitForm(event) {
+    event.preventDefault();
+
+    let login = Array.from(event.srcElement.childNodes).find(elem => elem.name == "login");
+    let password = Array.from(event.srcElement.childNodes).find(elem => elem.name == "password");
+    let passwordConf = Array.from(event.srcElement.childNodes).find(elem => elem.name == "password-confirmation");
+
+    var loginErrorMessage = document.querySelector("#loginErrorMessage"); 
+    var passwordErrorMessage = document.querySelector("#passwordErrorMessage"); 
+    var passwordConfErrorMessage = document.querySelector("#passwordConfErrorMessage"); 
+
+
+    if (!validateLogin(login.value).valid) {
+        if (!loginErrorMessage) login.insertAdjacentHTML('afterEnd', '<p id="loginErrorMessage" class="p">' + validateLogin(login.value).message + '</p>');
+    } else {
+        if (loginErrorMessage) loginErrorMessage.remove();
+    }
+
+    if (!validatePassword(password.value).valid) {
+        if(!passwordErrorMessage) password.insertAdjacentHTML('afterEnd', '<p id="passwordErrorMessage" class="p">' + validatePassword(password.value).message + '</p>');
+    } else {
+        if (passwordErrorMessage) passwordErrorMessage.remove();
+    }
+
+    if (!validatePasswordConf(passwordConf.value, password.value).valid) {
+        if(!passwordConfErrorMessage) passwordConf.insertAdjacentHTML('afterEnd', '<p  id="passwordConfErrorMessage" class="p">' + validatePasswordConf(passwordConf.value).message + '</p>');
+    } else {
+        if(passwordConfErrorMessage) passwordConfErrorMessage.remove();
+    }
+
+    if (validateLogin(login.value).valid && 
+    validatePassword(password.value).valid &&
+     validatePasswordConf(passwordConf.value, password.value).valid) alert('Форма отправлена!');
+}