Skip to content

Осипова Елизавета #33

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

Осипова Елизавета #33

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.

86 changes: 85 additions & 1 deletion static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,98 @@
<head>
<meta charset="UTF-8">
<title>Форма выбора питомца</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<h1>Найди себе друга!</h1>

<!--Форму размещай тут-->
<form action="/pets/orders" method="POST">
<fieldset class="data-pet my-3">
<legend class="mb-3">Мой питомец мечты</legend>

<div class="mb-3 row">
<label for="eyeColor" class="col-sm-2 form-label">Я хочу</label>
<div class="col-sm-4">
<select class="form-select" aria-label="Default select example" name="petType">
<option value="dog" selected>Собаку</option>
<option value="cat">Кошку</option>
<option value="tiger">Тигра</option>
</select>
</div>
</div>

<div class="mb-3 row">
<label class="col-sm-2 form-label">Пол питомца</label>
<div class="col-sm-6">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="boy" value="boy" required>
<label class="form-check-label" for="boy">Мальчик</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="girl" value="girl" required>
<label class="form-check-label" for="girl">Девочка</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="none" value="none" required>
<label class="form-check-label" for="none">Не имеет значения</label>
</div>
</div>
</div>

<div class="mb-3 row">
<label for="eyeColor" class="col-sm-2 form-label">Цвет глаз</label>
<div class="col-sm-2">
<input type="color" class="form-control form-control-color" id="eyeColor" name="eyeColor" value="#3F51B5"required>
</div>
</div>

<div class="mb-3 row">
<label for="tailLength" class="col-sm-2 form-label">Длина хвоста</label>
<div class="col-sm-2">
<input type="number" class="form-control" min="7" max="120" step="1" value='15' id="tailLength" name="tailLength" required>
</div>
</div>
</fieldset>

<fieldset class="data-user my-3">
<legend class="mb-3">Ваши данные</legend>

<div class="mb-3">
<label for="name" class="form-label">Имя</label>
<input id="name" name="name" type="text" class="form-control" placeholder="Иван Иванов" required>
</div>

<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input id="email" name="email" type="email" class="form-control" placeholder="[email protected]" required>
</div>

<div class="mb-3">
<label for="dateOfBirth" class="form-label">Дата рождения</label>
<input id="dateOfBirth" name="dateOfBirth" type="date" class="form-control" required>
</div>

<div class="mb-3">
<label for="phone" class="form-label">Номер телефона</label>
<input id="phone" name="phone" type="tel" class="form-control" placeholder="+7 (123) 456-78-90" required>
</div>

<div class="form-check">
<input class="form-check-input" type="checkbox" name="rules" id="rules" required value="true">
<label class="form-check-label" for="rules">
Я согласен с <a href="polite.html">политикой сервиса</a>
</label>
</div>
</fieldset>

<fieldset class="my-4">
<button type="submit" name="submit" class="btn btn-primary">Отправить</button>
<button type="reset" name="reset" class="btn btn-danger">Сбросить</button>
</fieldset>
</form>
<script src="validation.js"></script>
</main>
</body>
</html>
16 changes: 16 additions & 0 deletions static/polite.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Политика сервиса</title>
</head>
<body>
<main>
<h1>Политика сервиса "Найди себе друга!"</h1>
<div class="secret-parent">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TUU93Z7qNQ8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</main>
</body>
</html>
22 changes: 20 additions & 2 deletions static/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ h1 {
margin-top: 0;
font-size: 50px;
text-align: center;
color: rgba(173,38,164,0.67);
color: #3F51B5;
}

.error {
Expand All @@ -28,4 +28,22 @@ h1 {

.orders {
margin: 20px 0;
}
}

input[type=text],
input[type=email],
input[type=tel]{
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 0;
border-bottom: 1px solid darkgray;
width: 50%;
}

.secret-parent{
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
26 changes: 26 additions & 0 deletions static/validation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
let form = document.querySelector(".form");
let phone = document.querySelector("input[name='phone']");
let email = document.querySelector("input[name='email']");

function isPhoneValid() {
let re = /^\d[\d\(\)\ -]{4,14}\d$/;
return phone.value.match(re);
}

function isMailValid() {
let re = /\+7 \(\d{3}\) \d{3}-\d{2}-\d{2}/;
return email.value.match(re);
}

form.addEventListener("submit", (event) => {
let validMail = isMailValid()
let validPhone = isPhoneValid();
if(!validMail) {
alert("Неправильный e-mail");
event.preventDefault();
}
if(!validPhone) {
alert("Неправильный номер телефона");
event.preventDefault();
}
});