Skip to content

Усынин Андрей #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Усынин Андрей #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,4 @@ app.post('/pets/orders', (request, response) => {
response.send(`${pageHead}${pageBody}${pageFoot}`);
});


69 changes: 68 additions & 1 deletion static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,76 @@
<body>
<main>
<h1>Найди себе друга!</h1>
<form action ='/pets/orders' method='POST'>
<fieldset class='data'>
<legend>Ваши данные</legend>
<label>
Имя: </br>
<input type="text" placeholder="Введите ваше имя" name='name' value="Based_Name">
</label>
<label>
</br>Дата рождения: </br>
<input type="date" name='dateOfBirth' value="1337-04-20">
</label>
<label>
</br>Номер телефона: </br>
<input type="tel" placeholder="Введите ваш номер" name='phone' value="88005553535">
</label>
<label>
</br>Почта: </br>
<input type="email" placeholder="Введите вашу почту" name='email' value="[email protected]">
</label>
</fieldset>

<!--Форму размещай тут-->
<fieldset class='data'>
<legend>Данные питомца</legend>
<label>
Вид: </br>
<select name='petType'>
<option value="dog">Собака</option>
<option value="cat">Кот</option>
<option value="toad">Жаба</option>
<option value="frog">Лягушка</option>
</select>
</label>
<label>
</br>Пол: </br>
<select name="gender">
<option value="boy">Мальчик</option>
<option value="girl">Девочка</option>
<option value="meh">Неважно</option>
</select>
</label>
<label>

</label>
<label>
</br>Цвет глаз: </br>
<input type="color" name='eyeColor'>
</label>
<label>
</br>Длина хвоста, км: </br>
<input type="number" name='tailLength' min='1' max='100' step="1" value="69">
</label>
</fieldset>

<div>
<label>
</br>Я прочитал <a href='https://www.youtube.com/watch?v=BJWhyDeVb3E'>правила</a> и согласен с ними <input type="checkbox" name='rules' value='true'>
</label>
</div>

<fieldset class='submit'>
<label>
<input type="reset" name="Reset" value="Сбросить">
</label>
<label>
<input type="submit" name="Submit" value="Отправить">
</label>
</fieldset>
</form>

</main>
<script src="validate.js"></script>
</body>
</html>
23 changes: 21 additions & 2 deletions static/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

Expand All @@ -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);
}
Expand Down
27 changes: 27 additions & 0 deletions static/validate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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("");
}
});