From 54645d5d3b3086b1d1db60c85996918e19a49f81 Mon Sep 17 00:00:00 2001
From: sashapetrova28 <sasha_281200@mail.ru>
Date: Sat, 5 Jun 2021 23:30:21 +0500
Subject: [PATCH] task

---
 static/index.html    | 70 +++++++++++++++++++++++++++++++++++++++++++-
 static/styles.css    | 42 +++++++++++++++++++++++++-
 static/validation.js | 21 +++++++++++++
 3 files changed, 131 insertions(+), 2 deletions(-)
 create mode 100644 static/validation.js

diff --git a/static/index.html b/static/index.html
index 514b62f..63eddad 100644
--- a/static/index.html
+++ b/static/index.html
@@ -9,8 +9,76 @@
 <main>
     <h1>Найди себе друга!</h1>
 
-    <!--Форму размещай тут-->
+    <form method ="post" action="/pets/orders">
+        <fieldset>
+
+            <legend>Информация о питомце</legend>
+            <lable for="petType" id="petType" required>
+            Тип питомца:
+                <select name="petType">
+                    <option value="dog">Собака</option>
+                    <option value="cat" selected>Кошка</option>
+                    <option value="hedgehog">Еж</option>
+                </select>
+            </lable><br>
+            
+            <label name="gender">
+                 Пол питомца:
+                <input type="radio" name="gender" value="man" value="boy">Мальчик
+                <input type="radio" name="gender" value="woman" value="girl">Девочка
+                <input type="radio" name="gender" value="none" checked>Не определено
+            </label><br>
+            
+            <label>
+                Цвет глаз:
+                <input type="color" name="eyeColor">
+            </label><br>    
+            
+            <label>
+                Длина хвоста:
+                <input type="range" name="tailLength" value="25" min="0" max="110" required>
+            </label>
+                
+        </fieldset>
+
+
+        <fieldset>
+
+            <label>
+                Ваше имя:
+                <input type="text" name="name" value="Александра">
+            </label>
+
+            <label>
+                Дата рождения:
+                <input type="date" name="dateOfBirth">
+            </label>
+            
+            <label>
+                Email:
+                <input type="email" name="email" placeholder="sasha_281200@mail.ru">
+            </label>
+            
+            <label>
+                Телефон:
+                <input type="tel" name="phone" placeholder="8-800-555-3535" required>
+                <!--pattern="[0-9]{1}-[0-9]{3}-[0-9]{3}-[0-9]{4}" -->
+            </label>
+
+            <label>
+                Я согласен с правилами:
+                <input type="checkbox" checked name="rules" values="true">
+            </label>
+    
+        </fieldset>
+        
+
+        <input type="submit" class="submit" value="Отправить">
+        <input type="reset" class="reset" value="Сбросить">
+    </form>
+
 
 </main>
+<script src ="validation.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/static/styles.css b/static/styles.css
index ef86c9a..8b68bc1 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -19,7 +19,7 @@ h1 {
     margin-top: 0;
     font-size: 50px;
     text-align: center;
-    color: rgba(173,38,164,0.67);
+    color: rgba(173, 6, 70, 0.67);
 }
 
 .error {
@@ -28,4 +28,44 @@ h1 {
 
 .orders {
     margin: 20px 0;
+}
+
+fieldset {
+    border: 2px solid #c90e56;
+    border-radius: 20px;
+    margin: 30px;
+    padding: 10px 25px;
+}
+
+legend {
+    font-size: 22px;
+    font-weight: bold;
+    color: #880e33;
+}
+
+.submit, .reset {
+    margin: 5px auto;
+    padding: 10px;
+    font-size: 14px;
+    color: rgb(255, 255, 255);
+    border: 2px solid #f1b6c8;
+    border-radius: 20px;
+    background-color:#880e33;
+}
+
+
+select {
+    padding: 5px;
+    margin: 10px 10px;
+    border-radius: 10px;
+}
+
+input[type=radio], input[type="color"], input[type="range"] {
+    margin: 10px 5px;
+}
+
+input[type="text"], input[type="date"], input[type="email"], input[type="phone"] {
+    margin: 10px 5px;
+    border-radius: 5px;
+    border: 2px solid #f85694;
 }
\ No newline at end of file
diff --git a/static/validation.js b/static/validation.js
new file mode 100644
index 0000000..c94792e
--- /dev/null
+++ b/static/validation.js
@@ -0,0 +1,21 @@
+let submitButton = document.querySelector('input[type="submit"]');
+let telPhone = document.querySelector('input[type="tel"]');
+let email = document.querySelector('input[type="email"]');
+let form = document.querySelector('form');
+
+function validateEmail() {
+    return email.value.includes('@');
+}
+
+function validatePhone() {
+    const regex = /+7 (\d{3}) \d{3}-\d{2}-\d{2}/;
+    return telPhone.value.match(regex);
+}
+
+form.addEventListener("submit", (e) => {
+    let isValid = validateEmail() && validatePhone();
+    if(!isValid) {
+        alert("Данные не валидны");
+        e.preventDefault();
+    }
+});