diff --git a/static/index.html b/static/index.html index 514b62f..4c2d666 100644 --- a/static/index.html +++ b/static/index.html @@ -8,9 +8,55 @@

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

- - - +
+
+
+ + +
+
+ +
+ + + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ \ No newline at end of file diff --git a/static/styles.css b/static/styles.css index ef86c9a..4e06e98 100644 --- a/static/styles.css +++ b/static/styles.css @@ -28,4 +28,53 @@ h1 { .orders { margin: 20px 0; + + border-collapse: collapse; +} + +.orders tr { + +} + +.orders td { + text-align: center; + padding: 10px 15px; + + border: 1px solid lightcoral; +} + +.orders th { + text-align: center; + padding: 10px 15px; +} + +.form-container { + display: grid; + grid-template-columns: 25% auto 25%; +} + +form { + grid-column: 2 / 3; + + display: flex; + flex-direction: column; + + grid-template-columns: 100px auto auto 100px; + padding: 20px; + border: 1px solid lightskyblue; +} + +.form-row { + padding: 10px 35px; + display: flex; + justify-content: space-between; + +} + +.form-row label { + +} + +.form-row input { + } \ No newline at end of file diff --git a/static/validator.js b/static/validator.js new file mode 100644 index 0000000..7a4bac5 --- /dev/null +++ b/static/validator.js @@ -0,0 +1,35 @@ +let submit = document.querySelector(".submit"); +let tailLength = document.querySelector(".tailLength"); +let email = document.querySelector(".email"); +let phone = document.querySelector(".phone"); + +submit.addEventListener("click", function (event) { + if (!isPhoneValid(phone.value) || !isEmailValid(email.value) || !isTailLengthValid(tailLength)) { + console.log("not valid input!"); + event.preventDefault(); + } +}) + +function isPhoneValid(value) { + let isValid = value.match(/\d{11}/) != null && value.length === 11; + if (!isValid) { + console.log("phone is not valid"); + } + return isValid; +} + +function isEmailValid(value) { + let isValid = value.match(/\w+@\w+\.\w+/); + if (!isValid) { + console.log("email is not valid"); + } + return isValid; +} + +function isTailLengthValid(value) { + let isValid = value.match(/\d+/); + if (!isValid) { + console.log("tailLength is not valid"); + } + return isValid; +}