Lesson4

hw4/hw4-3/code.js

@@ -0,0 +1,160 @@
+'use strict';
+
+class Form {
+    constructor(name, className, type) {
+        this.name = name;
+        this.className = className;
+        this.type = type;
+    }
+
+    render() {
+        return `<label for="name">${this.name}</label><input class="${this.className}" type="${this.type}" name="${this.className}" required">`;
+    }
+}
+
+class FormItems {
+    constructor() {
+        this.elements = [];
+        this.requirements = [];
+    }
+
+    fetchElements() {
+        this.elements = [
+            { name: 'Имя', className: 'name', type: 'text' },
+            { name: 'Номер телефона', className: 'phone', type: 'tel' },
+            { name: 'E-mail', className: 'mail', type: 'e-mail' }
+        ]
+    }
+
+    addTextArea() {
+        let textArea = document.createElement('textarea');
+        let textLabel = document.createElement('label');
+        textLabel.className = 'textLabel';
+        textLabel.innerText = 'Ваш текст';
+        textArea.className = 'text';
+        textArea.name = 'text';
+        document.getElementById('fields').append(textLabel, textArea);
+    }
+
+    renderElements() {
+        let formHTML = '';
+        this.elements.forEach(elem => {
+            const item = new Form(elem.name, elem.className, elem.type);
+            formHTML += item.render();
+        });
+        document.getElementById('fields').innerHTML = formHTML;
+    }
+
+    addEventlistener() {
+        let form = document.getElementById('myForm').addEventListener('submit', (event) => this.submitForm(event));
+    }
+
+    submitForm(event) {
+        event.preventDefault();
+
+        let name = document.querySelector('.name');
+        let phone = document.querySelector('.phone');
+        let mail = document.querySelector('.mail');
+        let li = document.querySelectorAll('.error');
+
+        if (this.validateName(name.value) && this.validatePhoneNumber(phone.value) && this.validateMail(mail.value)) {
+            alert('Ваш запрос отвправлен!');
+            if (li !== []) {
+                li.forEach(elem => {
+                    elem.remove();
+                })
+            }
+        } else {
+            if (!this.validateName(name.value)) {
+                let err = document.createElement('li');
+                err.className = 'error';
+                err.innerText = 'Введеное Вами имя не соответствует требованиям.';
+                document.querySelector('.errors').appendChild(err);
+            }
+            if (!this.validatePhoneNumber(phone.value)) {
+                let err = document.createElement('li');
+                err.className = 'error';
+                err.innerText = 'Номер Вашего телефона не совпадает с требуемыми критериями.';
+                document.querySelector('.errors').appendChild(err);
+            }
+            if (!this.validateMail(mail.value)) {
+                let err = document.createElement('li');
+                err.className = 'error';
+                err.innerText = 'Не правильно введен адрес электронной почты.';
+                document.querySelector('.errors').appendChild(err);
+            }
+            if (li !== []) {
+                li.forEach(elem => {
+                    elem.remove();
+                })
+            }
+        }
+    }
+
+    validateForm() {
+        let inputs = document.querySelectorAll('input');
+        inputs.forEach(elem => {
+            if (elem.name === 'name') {
+                elem.onblur = () => {
+                    this.validateName(elem.value);
+                }
+            };
+            if (elem.name === 'phone') {
+                elem.onblur = () => {
+                    this.validatePhoneNumber(elem.value);
+                }
+            };
+            if (elem.name === 'mail') {
+                elem.onblur = () => {
+                    this.validateMail(elem.value);
+                }
+            };
+        })
+    }
+
+    validateName(name) {
+        let regexp = /[a-zA-ZА-яа-я]/;
+        let input = document.querySelector('.name');
+        if (regexp.test(name)) {
+            input.style.border = '.5px solid green';
+            input.style.background = '#76B276';
+            return { valid: true };
+        } else {
+            input.style.border = '.5px solid red';
+            input.style.background = '#FFA3A3';
+        }
+    }
+
+    validatePhoneNumber(phone) {
+        let input = document.querySelector('.phone');
+        let regexp = /((\+7))?(\(?\d{3}\)?[\- ]?)?[\d\- ]{8}$/;
+        if (regexp.test(phone)) {
+            input.style.border = '.5px solid green';
+            input.style.background = '#76B276';
+            return { valid: true };
+        } else {
+            input.style.border = '.5px solid red';
+            input.style.background = '#FFA3A3';
+        }
+    }
+
+    validateMail(mail) {
+        let input = document.querySelector('.mail');
+        let regexp = /^([^\W])([a-z0-9_\.-]+)@([a-z0-9_\.-]+)\.([a-z\.]{2,6})$/;
+        if (regexp.test(mail)) {
+            input.style.border = '.5px solid green';
+            input.style.background = '#76B276';
+            return { valid: true };
+        } else {
+            input.style.border = '.5px solid red';
+            input.style.background = '#FFA3A3';
+        }
+    }
+}
+
+let myForm = new FormItems();
+myForm.fetchElements();
+myForm.renderElements();
+myForm.addTextArea();
+myForm.validateForm();
+myForm.addEventlistener();

hw4/hw4-3/index.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">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+    <title>Form</title>
+</head>
+
+<body>
+    <form id="myForm" class="myForm">
+        <fieldset>
+            <legend class="title">Форма обратной связи</legend>
+            <ul class="errors"></ul>
+            <div id="fields"></div>
+        </fieldset>
+        <button class="submitButton" type="submit">Отправить</button>
+    </form>
+
+
+    <script src="code.js"></script>
+
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+</body>
+
+</html>

hw4/hw4-3/style.css

@@ -0,0 +1,69 @@
+body {
+    background-color: black !important;
+    width: 100% !important;
+    height: auto;
+}
+
+#myForm {
+    float: left;
+    max-width: 60%;
+    min-height: 460px;
+    position: relative;
+    left: 33%;
+    top: 75px;
+    border: 3px solid;
+    border-image: linear-gradient(to bottom right, yellow, orange, purple) 70;
+}
+
+label {
+    display: inline-block;
+    width: 135px;;
+}
+
+input {
+    margin: 0;
+    min-width: 200px;
+    margin-top: 15px;
+}
+
+.text {
+    min-height: 40px;
+    min-width: 200px;
+    margin-top: 15px;
+    display: inline-block;
+}
+
+.submitButton {
+    background: none;
+    border: none;
+    margin-top: 150px;
+    line-height: 35px;
+    width: 100%;
+    color: #ffffff;
+}
+
+.submitButton:hover {
+    cursor: pointer;
+    color: yellow;
+}
+
+.title {
+    color: white;
+    text-align: center;
+}
+
+#fields {
+    margin: auto;
+    margin-top: 45px;
+    padding-left: 48px;
+    max-width: 430px;
+    text-align: left;
+    color: #ffffff;
+}
+
+.error {
+    color: #ffffff;
+    font-size: x-small;
+    font-style: italic;
+    line-height: 20px;
+}

hw4/hw4.1-2/code.js

@@ -0,0 +1,5 @@
+'use strict';
+
+let text = document.getElementById('myP').innerText;
+let newText = text.replace(/\B[']/g, '"');
+document.getElementById('newText').innerText = newText;

hw4/hw4.1-2/index.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">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+    <p id="myP">'She said that she would <b>aren't</b> dance with me if I brought her red roses,' cried the young Student; 'but in all
+        my garden there is no red rose.' From her nest in the holm-oak tree the Nightingale heard him, and she looked
+        out through the leaves, and wondered. 'No red rose in all my garden!' he cried, and his beautiful eyes filled
+        with tears. 'Ah, fon what little things does happiness depend! I have read all that the wise men have written,
+        and all the secrets of philosophy are mine, yet for want of a red rose is my life made wretched.' 'Here at last
+        is a true lover,' said the Nightingale. 'Night after night have I sung of him, though I knew him not: night
+        after night have I told his story to the stars, and now I see him. His hair is dark as the hyacinth-blossom, and
+        his lips are red as the rose of his desire; but passion has made his face like pale ivory, and sorrow has set
+        her seal upon his brow.' 'The Prince gives a ball to-morrow night,' murmured the young Student, 'and my love
+        will be of the company. If I bring her a red rose she will dance with me till dawn. If I bring her a red rose, I
+        shall hold her in my arms, and she will lean her head upon my shoulder, and her hand will be clasped in mine.
+        But there is no red rose in my garden, so I shall sit lonely, and she will pass me by. She will have no heed of
+        me, and my heart will break.' 'Here indeed is the true lover,' said the Nightingale. 'What I sing of, he suffers
+        - what is joy to me, to him is pain. Surely Love is a wonderful thing. It is more precious than emeralds, and
+        dearer than fine opals. Pearls and pomegranates cannot buy it, nor is it set forth in the marketplace. It may
+        not be purchased of the merchants, nor can it be weighed out in the balance for gold.'
+    </p>
+
+    <p id="newText"></p>
+
+    <script src="code.js"></script>
+</body>
+</html>