Skip to content

Горохов Денис #58

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
xirce wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Горохов Денис #58

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.

77 changes: 77 additions & 0 deletions static/form-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
* {
color: rgb(173, 38, 164);
}

form, select, input {
font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

form {
font-size: 25px;
padding: 10px;
background-color: #EEE;
text-align: start;
}

fieldset {
margin-bottom: 10px;
}

a {
color: cornflowerblue;
text-decoration: none;
}

label[for="rules"] {
font-size: smaller;
}

form, fieldset, .field, .btn {
border-radius: 0.3em;
}

.row {
display: flex;
margin: 5px;
flex-flow: row wrap;
justify-content: center;
align-items: baseline;
}

.field, .btn {
padding: 5px;
background-color: #FFF;
}

.field:hover, .btn:hover {
background-color: #DDD;
}

.field:focus-within, .btn:active {
background-color: #CCC;
}

.field.row {
gap: 5px;
}

input, select, option {
color: #D659CB;
}

.buttons input[type="reset"] {
float: right;
}

input[type="radio"] {
display: none;
}

.btn,
input[type="radio"]:checked + label {
font-weight: bold;
}

select, input {
font-size: 20px;
}
68 changes: 67 additions & 1 deletion static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,79 @@
<meta charset="UTF-8">
<title>Форма выбора питомца</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="form-styles.css">
</head>
<body>
<main>
<h1>Найди себе друга!</h1>

<!--Форму размещай тут-->
<form action="/pets/orders" method="POST">
<fieldset>
<legend>Информация о желаемом питомце</legend>
<div class="row">
<div class="field row">
<label for="petType">Вид</label>
<select id="petType" name="petType">
<option value="dog">Собака</option>
<option value="cat">Кот</option>
<option value="tiger">Тигр</option>
</select>
</div>
<div class="field row" style="align-self: start">
<label>Пол</label>
<input type="radio" id="boy" name="gender" value="boy">
<label for="boy">Мальчик</label>
<input type="radio" id="girl" name="gender" value="girl">
<label for="girl">Девочка</label>
<input type="radio" id="none" name="gender" value="none" checked>
<label for="none">Не важно</label>
</div>
</div>
<div class="row">
<div class="field row">
<label for="eyeColor">Цвет глаз</label>
<input type="color" id="eyeColor" name="eyeColor">
</div>
<div class="field row">
<label for="tailLength">Длина хвоста</label>
<input type="number" id="tailLength" name="tailLength" min="7" max="120" value="7">
</div>
</div>
</fieldset>

<fieldset>
<legend>Информация о себе</legend>
<div class="row">
<div class="field row">
<label for="name">Имя</label>
<input type="text" id="name" name="name" placeholder="Введите ваше имя" required>
</div>
<div class="field row">
<label for="dateOfBirth">Дата рождения</label>
<input type="date" id="dateOfBirth" name="dateOfBirth">
</div>
</div>
<div class="row">
<div class="field row">
<label for="email">Эл. почта</label>
<input type="email" id="email" name="email" placeholder="email@example.com" required>
</div>
<div class="field row">
<label for="phone">Номер телефона</label>
<input type="tel" id="phone" name="phone" placeholder="+7 XXX XXX-XX-XX">
</div>
</div>
</fieldset>

<div class="buttons">
<input class="btn" type="submit" value="Заказать">
<input type="checkbox" id="rules" name="rules" value="true" required>
<label for="rules">Я принимаю <a href="#">политику конфиденциальности</a></label>
<input class="btn" type="reset" value="Сбросить">
</div>
</form>
</main>

<script src="validation.js"></script>
</body>
</html>
10 changes: 7 additions & 3 deletions static/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
* {
margin: 0;
}

body {
background-color: #F2F2F2;
}
Expand All @@ -19,13 +23,13 @@ h1 {
margin-top: 0;
font-size: 50px;
text-align: center;
color: rgba(173,38,164,0.67);
color: rgba(173, 38, 164, 0.67);
}

.error {
color: rgba(173,30,24,0.88);
color: rgba(173, 30, 24, 0.88);
}

.orders {
margin: 20px 0;
}
}
7 changes: 7 additions & 0 deletions static/validation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const phone = document.querySelector('#phone');

phone.oninput = () => {
phone.setCustomValidity(/(\+7 ?)?\d{3} ?\d{3}-?\d{2}-?\d{2}/.test(phone.value) === false
? "Неверный формат"
: "");
};