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/static/index.html b/static/index.html index 514b62f..a7d1606 100644 --- a/static/index.html +++ b/static/index.html @@ -4,13 +4,89 @@ Форма выбора питомца + - -
+ +

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

- +
+
+
+ +
+ +
+ +
+ +
+
+ + +
+ + +
+ + +
+
*если пол не указан (none), то в дальнейшем он будет выбран случайно
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+ +
+ + +
+ +
+ + +
+
+
+ \ No newline at end of file diff --git a/static/styles.css b/static/styles.css index ef86c9a..b8d853d 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,7 +1,3 @@ -body { - background-color: #F2F2F2; -} - main { box-sizing: border-box; width: 100%; @@ -28,4 +24,76 @@ h1 { .orders { margin: 20px 0; +} + +.wrapper { + margin: auto; + width: 500px; +} + +form { + display: flex; + flex-direction: column; + align-content: space-around; + margin-top: 30px; +} + +form div { + display: flex; + justify-content: space-between; + margin-top: 20px; +} + +form .gender { + display: block; + align-items: start; +} + +.genders { + display: block; +} + +.genders label, .genders input { + margin-bottom: 10px; +} + +.description { + width: 200px; +} + +.choose { + margin-top: 0; +} + +.rules { + align-content: center; +} + +.rules input { + margin: auto; +} + +table { + border-collapse: collapse; + width: 100%; + background-color: mediumaquamarine; + border: 2px solid yellowgreen; +} + +th { + font-weight: bold; + color: rgb(65, 12, 12); + border: 2px solid yellowgreen; + border-radius: 5%; + background-color: rgb(96, 163, 226); +} + +tr:nth-child(2n) { + background-color: khaki; +} + +td { + text-align: center; + box-sizing: border-box; + border: 1px solid yellowgreen; } \ No newline at end of file diff --git a/static/validation.js b/static/validation.js new file mode 100644 index 0000000..7ee45f9 --- /dev/null +++ b/static/validation.js @@ -0,0 +1,8 @@ +const name = document.querySelector('#name'); +const phone = document.querySelector('#phone'); + +name.addEventListener('input', () => name.setCustomValidity(name.value.length < 3 ? 'Имя введено некорректно' : '')); + +phone.addEventListener('input', () => phone.setCustomValidity(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/.test(phone.value) + ? '' + : 'Номер введен некорректно')); \ No newline at end of file