From a3e4d50e2fd8ae84376e8a4347dc7328f8c69fec Mon Sep 17 00:00:00 2001 From: Linadel24 <91286572+Linadel24@users.noreply.github.com> Date: Fri, 12 Nov 2021 02:30:21 +0500 Subject: [PATCH] =?UTF-8?q?=D0=90=D0=B4=D0=B5=D0=BB=D1=8C=D0=BC=D1=83?= =?UTF-8?q?=D1=80=D0=B4=D0=B8=D0=BD=D0=B0=20=D0=AD=D0=BB=D0=B8=D0=BD=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 1 + server.js | 2 + static/index.html | 60 ++++++++++++ static/styles.css | 223 +++++++++++++++++++++++++++++++++++++++++---- static/validate.js | 91 ++++++++++++++++++ 5 files changed, 359 insertions(+), 18 deletions(-) create mode 100644 static/validate.js diff --git a/package-lock.json b/package-lock.json index 6aaf3bc..486f987 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "tables-and-forms", "version": "1.0.0", "license": "ISC", "dependencies": { diff --git a/server.js b/server.js index e5f002e..a608163 100644 --- a/server.js +++ b/server.js @@ -20,6 +20,7 @@ const pageHead = const pageFoot = ` ⃪ Вернуться к форме заказа +Вернуться к форме заказа @@ -40,6 +41,7 @@ app.use(express.urlencoded({ extended: true })); app.post('/pets/orders', (request, response) => { const reqBody = request.body; const pageBody = constructPageBody(reqBody); + console.log(pageBody) console.log(request.body); diff --git a/static/index.html b/static/index.html index 514b62f..7c1941c 100644 --- a/static/index.html +++ b/static/index.html @@ -11,6 +11,66 @@

Найди себе друга!

+
+
+ Информация о питомце + + + +
+ + + + +
+ + +
+ + +
+
+ +
+ Информация о вас + + +
+ + +
+ + + +
+ + + +
+ + +
+ +
+ + +
+
+ \ No newline at end of file diff --git a/static/styles.css b/static/styles.css index ef86c9a..e25f7ee 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,31 +1,218 @@ body { - background-color: #F2F2F2; + background-color: #f2f2f2; } main { - box-sizing: border-box; - width: 100%; - max-width: 1000px; - margin: 30px auto; - padding: 30px; - background: white; - min-height: calc(100vh - 60px); - border-radius: 20px; + box-sizing: border-box; + width: 100%; + max-width: 1000px; + margin: 30px auto; + padding: 30px; + background: white; + min-height: calc(100vh - 60px); + border-radius: 20px; } h1 { - font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 300; - margin-top: 0; - font-size: 50px; - text-align: center; - color: rgba(173,38,164,0.67); + font-family: Arial, sans-serif; + font-weight: 300; + margin-top: 0; + font-size: 50px; + text-align: center; + color: rgba(173, 38, 164, 0.67); } .error { - color: rgba(173,30,24,0.88); + color: rgba(173, 30, 24, 0.88); } .orders { - margin: 20px 0; -} \ No newline at end of file + margin: 20px 0; +} + +form { + margin: 0 100px; +} + +fieldset { + padding: 20px; + border: 5px solid rgba(138, 16, 219, 0.67); + border-radius: 30px; + background-color: rgb(159, 225, 241); +} + +fieldset:last-of-type { + margin-top: 30px; +} + +legend { + padding: 0 10px; + margin-left: 20px; + margin-right: auto; + font-family: sans-serif; + color: darkslateblue; + font-weight: bold; + background-color: rgb(255, 200, 255); + border: 5px solid rgba(138, 16, 219, 0.67); + border-radius: 10px; +} + +label { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + display: inline-block; + margin: 10px 0; + padding: 0 5px; +} + +select { + padding: 0 5px; + margin: 5px; +} + +select:focus { + background-color: whitesmoke; +} + +input { + display: inline-block; + margin: 10px 0; +} + +input:focus { + background-color: whitesmoke; +} + +.buttons { + display: flex; + justify-content: center; +} + +input[type="submit"], +input[type="reset"] { + display: block; + width: 150px; + height: 50px; + background-color: rgb(255, 200, 255); + border-color: rgba(138, 16, 219, 0.67); + border-radius: 10px; + font-size: 16px; + font-weight: bold; + color: darkslateblue; + margin-top: 20px; +} + +input[type="submit"]:hover, +input[type="reset"]:hover { + background-color: rgb(255, 220, 255); +} + +input[type="submit"] { + margin-right: 5px; +} + +input:disabled, +input:disabled:hover { + background-color: lavenderblush; + color: grey; +} + +input[type="reset"] { + margin-left: 5px; +} + +input[type="color"] { + margin: 0; +} + +span.tail { + padding: 2px 6px; + color: darkslateblue; + background-color: white; + border: 1px solid darkviolet; + border-radius: 10px; + margin-left: 10px; + font-size: 14px; + font-weight: bold; +} + +.tail-range { + display: flex; + align-items: center; +} + +.tail-max, +.tail-min { + display: inline-block; + padding-left: 10px; + font-size: 15px; +} + +.tail-min { + padding: 0; + padding-right: 10px; +} + +.invalid { + border: 1px solid red; +} + +.invalid-email, +.invalid-phone { + color: red; + margin-left: 5px; +} + +h3 { + text-align: center; +} + +a { + display: block; + width: fit-content; + text-decoration: none; + border: 1px solid black; + border-radius: 10px; + padding: 7px; + margin-left: auto; + margin-right: auto; + background-color: rgb(255, 220, 255); + font-weight: bold; + color: darkslateblue; + border-color: rgba(173, 38, 164, 0.67); +} + +a:hover { + background-color: rgb(255, 240, 255); +} + +table { + width: 100%; + border: 2px solid gray; + border-collapse: collapse; +} + +tr { + text-align: center; +} + +th { + border: 1px solid gray; + padding: 5px; + color: darkslateblue; + background-color: rgb(255, 200, 255); +} + +td { + border: 1px solid gray; + padding: 5px; + background-color: rgb(255, 230, 255); + color: black; +} + +input, +select { + border: none; + border-radius: 13px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + padding: 5px 10px; +} diff --git a/static/validate.js b/static/validate.js new file mode 100644 index 0000000..b0c65f7 --- /dev/null +++ b/static/validate.js @@ -0,0 +1,91 @@ +let form = document.querySelector('form'); +let phone = document.getElementById('phone'); +let email = document.getElementById('email'); +let rules = document.getElementById('rules'); +let submit = document.querySelector('.buttons input[type="submit"]'); +let reset = document.querySelector('.buttons input[type="reset"]'); + +reset.addEventListener('click', function () { + form.querySelector('.invalid-phone').textContent = ''; + phone.classList.remove('invalid'); + form.querySelector('.invalid-email').textContent = ''; + email.classList.remove('invalid'); + + let tail = document.querySelector('.tail'); + tail.textContent = ''; +}) + +submit.addEventListener('click', function (evt) { + if (!isValidEmail(email.value)) { + showInvalidInputEmail(); + evt.preventDefault(); + } + + if (!isValidPhone(phone.value)) { + showInvalidInputPhone(); + evt.preventDefault(); + } +}); + +phone.addEventListener('focusin', function () { + phone.classList.remove('invalid'); + form.querySelector('.invalid-phone').textContent = '' + + if (!phone.value) { + phone.value = '+7 '; + } +}) + +phone.addEventListener('focusout', function () { + if (phone.value.length == 3) { + phone.value = ''; + } +}) + +phone.addEventListener('input', function (evt) { + if (phone.value.length < 3) { + phone.value = '+7 ' + } + + if (!evt.inputType.startsWith('delete')) { + if (phone.value.length == 6) { + phone.value += ' '; + } else if ([10, 13].includes(phone.value.length)) { + phone.value += '-'; + } else if (phone.value.length == 17) { + phone.value = phone.value.slice(0, phone.value.length - 1); + } + phone.value = phone.value.replace(/[A-ZazА-Яа-я]/, ''); + } else { + if ([6, 10, 13].includes(phone.value.length)) { + phone.value = phone.value.slice(0, phone.value.length - 1); + } + } +}) + +email.addEventListener('focus', function () { + email.classList.remove('invalid'); + form.querySelector('.invalid-email').textContent = '' +}) + +function isValidPhone(number) { + let regex = /\+\d \d\d\d \d\d\d-\d\d-\d\d/; + return number.match(regex); +} + +function isValidEmail(email) { + let regex = /.+@.+/ + return email.match(regex); +} + +function showInvalidInputPhone() { + phone.classList.add('invalid'); + let tip = form.querySelector('.invalid-phone'); + tip.textContent = 'Неправильный формат'; +} + +function showInvalidInputEmail() { + email.classList.add('invalid'); + let tip = form.querySelector('.invalid-email'); + tip.textContent = 'Неправильный формат'; +} \ No newline at end of file