From 0c3e97a135fdfe1a25a6bf46bdb9345d0d36ff91 Mon Sep 17 00:00:00 2001 From: bozhkovkost <71607999+bozhkovkost@users.noreply.github.com> Date: Tue, 8 Jun 2021 01:32:59 +0500 Subject: [PATCH 1/3] index.html --- static/index.html | 71 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 69 insertions(+), 2 deletions(-) diff --git a/static/index.html b/static/index.html index 514b62f..b9d127e 100644 --- a/static/index.html +++ b/static/index.html @@ -8,9 +8,76 @@

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

+
+
+ Информация о питомце + + Тип питомца: + + - + + + + + +
+ +
+ Информация о себе + + + + + + + + Телефон: + + + + + +
+ + + +
+ - \ No newline at end of file + From 2003df89b75ea44545c794997bb2513590e49a66 Mon Sep 17 00:00:00 2001 From: bozhkovkost <71607999+bozhkovkost@users.noreply.github.com> Date: Tue, 8 Jun 2021 01:35:39 +0500 Subject: [PATCH 2/3] index.js --- index.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 index.js diff --git a/index.js b/index.js new file mode 100644 index 0000000..db65d4e --- /dev/null +++ b/index.js @@ -0,0 +1,23 @@ +let submitButton = document.querySelector('input[type="submit"]'); + +let telPhone = document.querySelector('input[type="tel"]'); +let email = document.querySelector('input[type="email"]'); + +let form = document.querySelector('form'); + +function validateEmail() { + return email.value.includes('@'); +} + +function validatePhone() { + const regex = /\+7 \(\d{3}\) \d{3}-\d{2}-\d{2}/; + return telPhone.value.match(regex); +} + +form.addEventListener("submit", (e) => { + let isValidEmail = validateEmail() && validatePhone(); + if(!isValidEmail) { + alert("Данные не валидны"); + e.preventDefault(); + } +}); From 9eb51fc8cc7547a755fd8aeaccaa83d6e065dc25 Mon Sep 17 00:00:00 2001 From: bozhkovkost <71607999+bozhkovkost@users.noreply.github.com> Date: Tue, 8 Jun 2021 01:36:20 +0500 Subject: [PATCH 3/3] styles.css --- static/styles.css | 74 ++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 70 insertions(+), 4 deletions(-) diff --git a/static/styles.css b/static/styles.css index ef86c9a..22be366 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,7 +1,6 @@ body { background-color: #F2F2F2; } - main { box-sizing: border-box; width: 100%; @@ -12,14 +11,13 @@ main { 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); + color: violet; } .error { @@ -28,4 +26,72 @@ h1 { .orders { margin: 20px 0; -} \ No newline at end of file +} + +form { + width: 400px; + margin: 0 auto; + padding: 20px; + + background-color: #ffffff; + border-radius: 10px; + box-shadow: 0 0 10px #cccccc; +} + +fieldset { + padding: 10px; + margin-bottom: 20px; + border: 1px solid #2c3e50; + border-radius: 5px; +} + +fieldset:last-child { + margin-bottom: 0; +} + +fieldset legend { + text-align: center; + color: #2c3e50; +} + +label { + display: block !important; + margin-bottom: 10px; +} + +input, select { + border-radius: 5px; +} + +input[type="text"], +input[type="color"], +input[type="tel"], +input[type="email"], +input[type="date"], +input[type="number"], +select { + width: 95%; + height: 24px; + margin-bottom: 10px; + margin-top: 10px; + padding: 2px 5px; + box-sizing: content-box; + border: 1px solid #cccccc; +} + +input[type="submit"], +input[type="reset"] { + display: inline-block; + margin: 0 5px; + padding: 6px 15px; + + color: #ffffff; + + background-color: slateblue; + border: none; +} + +.buttons { + margin-top: 10px; + text-align: center; +}