Skip to content
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

Максим Савков #29

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

Максим Савков #29

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
52 changes: 49 additions & 3 deletions static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,55 @@
<body>
<main>
<h1>Найди себе друга!</h1>

<!--Форму размещай тут-->

<div class="form-container">
<form method="POST" action="/pets/orders">
<div class="form-row">
<label for="petTypeId"> petType: </label>
<input type="text" id="petTypeId" name="petType" placeholder="cat, dog, tiger" value="dog" required>
</div>
<div class="form-row">
<label>gender:</label>
<div class="radio-container">
<input type="radio" id="gender-boy" name="gender" value="boy" checked><label for="gender-boy">Male</label>
<input type="radio" id="gender-girl" name="gender" value="girl"><label for="gender-girl">Female</label>
<input type="radio" id="gender-none" name="gender" value="none"><label for="gender-none">None</label>
</div>
</div>
<div class="form-row">
<label for="eyeColor">eyeColor:</label>
<input type="color" id="eyeColor" name="eyeColor" required>
</div>
<div class="form-row">
<label for="tailLength">tailLength:</label>
<input class="tailLength" type="number" id="tailLength" name="tailLength" value="12" required>
</div>
<div class="form-row">
<label for="name">name:</label>
<input type="text" id="name" name="name" value="Tom" required>
</div>
<div class="form-row">
<label for="dateOfBirth">dateOfBirth:</label>
<input type="date" id="dateOfBirth" name="dateOfBirth" value="13-04-2021" required>
</div>
<div class="form-row">
<label for="email">email:</label>
<input class="email" type="email" id="email" name="email" value="[email protected]" required>
</div>
<div class="form-row">
<label for="phone">phone:</label>
<input class="phone" type="phone" id="phone" name="phone" required value="89005553535">
</div>
<div class="form-row">
<label for="rules">rules:</label>
<input id="rules" name="rules" type="checkbox" readonly checked value="true">
</div>
<div class="form-row"></div>
<input class="submit" type="submit" value="submit">
<input type="reset" value="reset">
</div>
</form>
</div>
</main>
<script src="validator.js"></script>
</body>
</html>
49 changes: 49 additions & 0 deletions static/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,53 @@ h1 {

.orders {
margin: 20px 0;

border-collapse: collapse;
}

.orders tr {

}

.orders td {
text-align: center;
padding: 10px 15px;

border: 1px solid lightcoral;
}

.orders th {
text-align: center;
padding: 10px 15px;
}

.form-container {
display: grid;
grid-template-columns: 25% auto 25%;
}

form {
grid-column: 2 / 3;

display: flex;
flex-direction: column;

grid-template-columns: 100px auto auto 100px;
padding: 20px;
border: 1px solid lightskyblue;
}

.form-row {
padding: 10px 35px;
display: flex;
justify-content: space-between;

}

.form-row label {

}

.form-row input {

}
35 changes: 35 additions & 0 deletions static/validator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
let submit = document.querySelector(".submit");
let tailLength = document.querySelector(".tailLength");
let email = document.querySelector(".email");
let phone = document.querySelector(".phone");

submit.addEventListener("click", function (event) {
if (!isPhoneValid(phone.value) || !isEmailValid(email.value) || !isTailLengthValid(tailLength)) {
console.log("not valid input!");
event.preventDefault();
}
})

function isPhoneValid(value) {
let isValid = value.match(/\d{11}/) != null && value.length === 11;
if (!isValid) {
console.log("phone is not valid");
}
return isValid;
}

function isEmailValid(value) {
let isValid = value.match(/\w+@\w+\.\w+/);
if (!isValid) {
console.log("email is not valid");
}
return isValid;
}

function isTailLengthValid(value) {
let isValid = value.match(/\d+/);
if (!isValid) {
console.log("tailLength is not valid");
}
return isValid;
}