From 6c94d19f849fc07cf65082eb6a3ec31d50ca839a Mon Sep 17 00:00:00 2001 From: IngaSS Date: Sun, 21 Apr 2019 22:41:17 +0300 Subject: [PATCH 1/5] =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5?= =?UTF-8?q?=20=D0=BA=20=D1=83=D1=80=D0=BE=D0=BA=D1=83=204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hw4/hw4-3/code.js | 160 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 hw4/hw4-3/code.js diff --git a/hw4/hw4-3/code.js b/hw4/hw4-3/code.js new file mode 100644 index 0000000..ec059fc --- /dev/null +++ b/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 ``; + } +} + +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(); From 8e3de564641d55e97c293c8ad00015ddfd9a9ee2 Mon Sep 17 00:00:00 2001 From: IngaSS Date: Sun, 21 Apr 2019 22:41:23 +0300 Subject: [PATCH 2/5] =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5?= =?UTF-8?q?=20=D0=BA=20=D1=83=D1=80=D0=BE=D0=BA=D1=83=204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hw4/hw4.1-2/code.js | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 hw4/hw4.1-2/code.js diff --git a/hw4/hw4.1-2/code.js b/hw4/hw4.1-2/code.js new file mode 100644 index 0000000..72d7448 --- /dev/null +++ b/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; From d8b48895a16038f61d1dc6abab65720d2c32c262 Mon Sep 17 00:00:00 2001 From: IngaSS Date: Sun, 21 Apr 2019 22:41:28 +0300 Subject: [PATCH 3/5] =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5?= =?UTF-8?q?=20=D0=BA=20=D1=83=D1=80=D0=BE=D0=BA=D1=83=204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hw4/hw4-3/index.html | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 hw4/hw4-3/index.html diff --git a/hw4/hw4-3/index.html b/hw4/hw4-3/index.html new file mode 100644 index 0000000..9df6caf --- /dev/null +++ b/hw4/hw4-3/index.html @@ -0,0 +1,32 @@ + + + + + + + + + + Form + + + +
+
+ Форма обратной связи +
    +
    +
    + +
    + + + + + + + + + \ No newline at end of file From c9fd46a0dfcd0861be184276a25ce5b1b5c54e5c Mon Sep 17 00:00:00 2001 From: IngaSS Date: Sun, 21 Apr 2019 22:41:33 +0300 Subject: [PATCH 4/5] =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5?= =?UTF-8?q?=20=D0=BA=20=D1=83=D1=80=D0=BE=D0=BA=D1=83=204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hw4/hw4.1-2/index.html | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 hw4/hw4.1-2/index.html diff --git a/hw4/hw4.1-2/index.html b/hw4/hw4.1-2/index.html new file mode 100644 index 0000000..c84dd70 --- /dev/null +++ b/hw4/hw4.1-2/index.html @@ -0,0 +1,32 @@ + + + + + + + Document + + +

    'She said that she would aren't 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.' +

    + +

    + + + + From bedc44d8b99a4cbac7722c97c41fbf899dcda248 Mon Sep 17 00:00:00 2001 From: IngaSS Date: Sun, 21 Apr 2019 22:41:39 +0300 Subject: [PATCH 5/5] =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5?= =?UTF-8?q?=20=D0=BA=20=D1=83=D1=80=D0=BE=D0=BA=D1=83=204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hw4/hw4-3/style.css | 69 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 hw4/hw4-3/style.css diff --git a/hw4/hw4-3/style.css b/hw4/hw4-3/style.css new file mode 100644 index 0000000..f7d590d --- /dev/null +++ b/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; +}