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..dee083b 100644 --- a/server.js +++ b/server.js @@ -44,5 +44,4 @@ app.post('/pets/orders', (request, response) => { console.log(request.body); response.send(`${pageHead}${pageBody}${pageFoot}`); -}); - +}); \ No newline at end of file diff --git a/static/index.html b/static/index.html index 514b62f..d8a30f5 100644 --- a/static/index.html +++ b/static/index.html @@ -1,16 +1,100 @@ - + Форма выбора питомца +

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

- +
+
+ Мой будущий питомец +
+ +
+ +
+
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+
+ +
+ Ваши данные + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+ + +
+
+
\ No newline at end of file diff --git a/static/styles.css b/static/styles.css index ef86c9a..c7ca8d1 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,7 +1,6 @@ body { - background-color: #F2F2F2; + background-color: #8a499b; } - 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; + font-size: 70px; text-align: center; - color: rgba(173,38,164,0.67); + color: #481753; } .error { @@ -28,4 +26,32 @@ h1 { .orders { margin: 20px 0; -} \ No newline at end of file +} + + +fieldset { + border-radius: 20px; + border: 1px solid #4f0661; + margin: 30px; + padding: 10px 25px; + background-color: #f9edfd; +} + +input[type=text], +input[type=email], +input[type=tel]{ + padding: 10px; + margin: 10px 0; + border: none; + border-radius: 0; + border-bottom: 1px solid darkgray; + width: 50%; +} + +.secret-parent{ + display: flex; + align-items: center; + align-content: center; + justify-content: center; +} + diff --git a/static/validation.js b/static/validation.js new file mode 100644 index 0000000..4cb8e28 --- /dev/null +++ b/static/validation.js @@ -0,0 +1,26 @@ +let form = document.querySelector(".form"); +let phone = document.querySelector("input[name='phone']"); +let email = document.querySelector("input[name='email']"); + +function isPhoneValid() { + let re = /^\d[\d\(\)\ -]{4,14}\d$/; + return phone.value.match(re); +} + +function isMailValid() { + let re = /\+7 \(\d{3}\) \d{3}-\d{2}-\d{2}/; + return email.value.match(re); +} + +form.addEventListener("submit", (event) => { + let validMail = isMailValid() + let validPhone = isPhoneValid(); + if(!validMail) { + alert("Неправильный e-mail"); + event.preventDefault(); + } + if(!validPhone) { + alert("Неправильный номер телефона"); + event.preventDefault(); + } +}); \ No newline at end of file