From fbaf30c85e15980e211f002679d74aa4fdfb0fe3 Mon Sep 17 00:00:00 2001
From: smileman0001 <111222333artem8@gmail.com>
Date: Fri, 12 Nov 2021 15:43:24 +0500
Subject: [PATCH] 1-5

---
 package-lock.json    |  1 +
 static/index.html    | 65 ++++++++++++++++++++++++++++++++++++++++++++
 static/styles.css    | 43 +++++++++++++++++++++++++++++
 static/validation.js | 23 ++++++++++++++++
 4 files changed, 132 insertions(+)
 create mode 100644 static/validation.js

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..ff65844 100644
--- a/static/index.html
+++ b/static/index.html
@@ -11,6 +11,71 @@ <h1>Найди себе друга!</h1>
 
     <!--Форму размещай тут-->
 
+    <form method="post" action="/pets/orders">
+        <fieldset>
+            <legend>Какого питомца вы хотите?</legend>
+            <label for="petType" id="petType" required>
+                <select name="petType">
+                    <option value="default" disabled selected>Выберите тип питомца</option>
+                    <option value="cat">Кошка</option>
+                    <option value="dog">Собака</option>
+                    <option value="hamster">Хомяк</option>
+                	<option value="fish">Рыбка</option>
+                </select>
+            </label>
+            <label name="gender">
+            	<select class="form-select mb-3" name="gender" aria-label="Default select example">
+            		<option value="default" disabled selected>Пол питомца</option>
+	                <option value="boy">Самец</option>
+	                <option value="girl">Самка</option>
+	                <option value="none">Любой</option>
+            	</select>
+            </label>
+
+            <label>
+                Цвет глаз:
+                <input type="color" name="eyeColor">
+            </label>
+
+            <label>
+                Длина хвоста (см):
+                <input type="range" name="tailLength" value="20" min="0" max="100" required>
+            </label>
+
+        </fieldset>
+
+        <fieldset class="user_fieldset">
+            <legend>Информация о вас</legend>
+            <label class="user_label">
+                Ваше имя:
+                <input type="text" name="name" id="name" placeholder="Ваши полные ФИО">
+            </label>
+
+            <label class="user_label">
+                Дата рождения:
+                <input type="date" name="dateOfBirth">
+            </label>
+
+            <label class="user_label">
+                Email:
+                <input type="email" id="email" name="email" placeholder="Ваш Email">
+            </label>
+
+            <label class="user_label">
+                Телефон:
+                <input type="phone" id="phone" name="phone" placeholder="Ваш телефон">
+            </label>
+
+            <label>
+                Я ознакомлен(а) и принимаю <a href="#">политику конфиденциальности</a>
+                <input type="checkbox" name="rules" value="true" checked>
+            </label>
+
+        </fieldset>
+        <input type="submit" class="submit" value="Отправить">
+        <input type="reset" class="reset" value="Сбросить">
+    </form>
 </main>
 </body>
+<script src="validation.js"></script>
 </html>
\ No newline at end of file
diff --git a/static/styles.css b/static/styles.css
index ef86c9a..2faf631 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -3,6 +3,7 @@ body {
 }
 
 main {
+    font-size: 20px;
     box-sizing: border-box;
     width: 100%;
     max-width: 1000px;
@@ -28,4 +29,46 @@ h1 {
 
 .orders {
     margin: 20px 0;
+}
+
+fieldset {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #8C8C8C;
+    border-radius: 5px;
+    margin: 10px;
+}
+
+label {
+    flex-basis: 50px;
+    vertical-align: middle;
+}
+
+legend {
+    font-size: 32px;
+    border: 1px solid #8C8C8C;
+    border-radius: 5px;
+    color: #383838;
+}
+
+input {
+    border: 1px solid #8C8C8C;
+    border-radius: 5px;
+    font-size: 20px;
+}
+
+input[type="color"] {
+    width: 100px;
+    height: 30px;
+}
+
+input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+}
+
+select {
+    font-size: 20px;
+    border-radius: 5px;
+    padding: 5px 10px;
 }
\ No newline at end of file
diff --git a/static/validation.js b/static/validation.js
new file mode 100644
index 0000000..004ceaa
--- /dev/null
+++ b/static/validation.js
@@ -0,0 +1,23 @@
+const name = document.querySelector('#name');
+const phone = document.querySelector('#phone');
+const form = document.querySelector('form');
+
+function validatePhone() {
+    return phone.value.length > 10 && phone.value.length < 13;
+}
+function validateName() {
+    return name.value.length > 3 && name.value.length < 50;
+}
+
+form.addEventListener('submit', (event) => {
+    let phoneIsValid = validatePhone();
+    let nameIsValid = validateName();
+    if (!phoneIsValid) {
+        alert("Номер телефона не валиден");
+        event.preventDefault();
+    }
+    if (!nameIsValid) {
+        alert("Имя введено некорректно");
+        event.preventDefault();
+    }
+}); 
\ No newline at end of file