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..5a8e0f5 100644 --- a/server.js +++ b/server.js @@ -46,3 +46,4 @@ app.post('/pets/orders', (request, response) => { response.send(`${pageHead}${pageBody}${pageFoot}`); }); + diff --git a/static/index.html b/static/index.html index 514b62f..703ac98 100644 --- a/static/index.html +++ b/static/index.html @@ -8,9 +8,76 @@

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

+
+
+ Ваши данные + + + + +
- +
+ Данные питомца + + + + + +
+ +
+ +
+ +
+ + +
+
+ \ No newline at end of file diff --git a/static/styles.css b/static/styles.css index ef86c9a..90fab96 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,15 +1,16 @@ body { - background-color: #F2F2F2; + background-color: #4a9159; } main { + font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; box-sizing: border-box; width: 100%; max-width: 1000px; margin: 30px auto; padding: 30px; background: white; - min-height: calc(100vh - 60px); + min-height: calc(100vh - 40px); border-radius: 20px; } @@ -21,7 +22,25 @@ h1 { text-align: center; color: rgba(173,38,164,0.67); } +.data { + font-size:x-large; + border-radius: 50px; +} +.submit{ + font-size:x-large; + width: 170px; + position: absolute; + top: 94%; + left: 50%; + margin-right: -50%; + transform: translate(-50%, -50%); +} + +div{ + font-size:large; + margin-top: 0px; +} .error { color: rgba(173,30,24,0.88); } diff --git a/static/validate.js b/static/validate.js new file mode 100644 index 0000000..4962e79 --- /dev/null +++ b/static/validate.js @@ -0,0 +1,27 @@ +let name = document.getElementById("name"); +let phone = document.getElementById("phone"); +let mail = document.getElementById("email"); + +name.addEventListener("input", function () { + if (name.value.length <= 2) { + name.setCustomValidity("Имя не может быть короче трех букв"); + } else { + name.setCustomValidity(""); + } +}); + +phone.addEventListener("input", function () { + if ((phone.value.length != 11)&&(phone.value.length != 12)) { + phone.setCustomValidity("Пожалуйста, укажите телефон в формате +7XXXXXXXXXX или 8XXXXXXXXXX"); + } else { + phone.setCustomValidity(""); + } +}); + +mail.addEventListener("input", function () { + if (mail.validity.typeMismatch) { + mail.setCustomValidity("Этот почтовый адрес не существует"); + } else { + mail.setCustomValidity(""); + } +}); \ No newline at end of file