Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0876ff4

Browse files
task day#19 input forms is ready / not optimized
1 parent 9f33c03 commit 0876ff4

File tree

3 files changed

+70
-19
lines changed

3 files changed

+70
-19
lines changed

‎day19/STARTER-FILES/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ <h1>Signup</h1>
3434
</div>
3535
</div>
3636
<div class="field">
37-
<input type="password" name="password" id="password" placeholder="" />
37+
<input type="text" name="password" id="password" placeholder="" />
3838
<label for="password">Password</label>
3939
<button class="show-hide"></button>
4040
<div class="error hide">
@@ -50,6 +50,7 @@ <h1>Signup</h1>
5050
type="text"
5151
name="confirm-password"
5252
id="confirm-password"
53+
class="security"
5354
placeholder=""
5455
/>
5556
<label for="confirm-password">Confirm Password</label>

‎day19/STARTER-FILES/styles.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,3 +132,7 @@ input[type="submit"] {
132132
.hide {
133133
display: none;
134134
}
135+
136+
.security {
137+
-webkit-text-security: disc !important;
138+
}

‎day19/app.js

Lines changed: 64 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
const inputsNodeList = document.querySelectorAll("input");
2-
31
const inputName = document.querySelector("input#name");
42
const inputEmail = document.querySelector("input#email");
53
const inputPassword = document.querySelector("input#password");
@@ -8,47 +6,95 @@ const inputConfPassword = document.querySelector("input#confirm-password");
86
const divsError = document.querySelectorAll(".error");
97
const divsSuccess = document.querySelectorAll(".success");
108

9+
const buttonsShowHide = document.querySelectorAll(".show-hide");
10+
const submitButton = document.querySelector('input[type="submit"]');
11+
12+
const success = true;
13+
const error = false;
14+
const fieldsValid = [error, error, error, error];
15+
16+
const statusMessageDiv = document.createElement("span");
17+
document.querySelector("h1").appendChild(statusMessageDiv);
18+
19+
const writeMessageOnSubmit = (innerText) => {
20+
statusMessageDiv.innerHTML = innerText;
21+
statusMessageDiv.style.color = "orange";
22+
statusMessageDiv.style.position = "absolute";
23+
statusMessageDiv.style.top = "220px";
24+
return statusMessageDiv;
25+
};
26+
27+
buttonsShowHide.forEach((button) =>
28+
button.addEventListener("click", (e) => {
29+
e.preventDefault();
30+
e.target.parentNode.classList.toggle("show");
31+
e.target.parentNode.childNodes[1].classList.toggle("security");
32+
})
33+
);
34+
1135
const validateUserName = (e) => {
1236
e.preventDefault();
13-
const usernameRegex = /^[a-zA-Zа-яА-ЯїЇєЄґҐ0-9-\s]+$/;
37+
const usernameRegex = /^[a-zA-Zа-яА-ЯіІїЇєЄґҐ0-9-\s]+$/;
1438
if (!usernameRegex.test(e.key)) return false;
1539
e.target.value += e.key;
1640
renderInput();
1741
};
1842
const validateEmail = (e) => {
1943
const emailRegex = /^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/i;
20-
if (emailRegex.test(inputEmail.value))
44+
if (emailRegex.test(inputEmail.value.trim())){
2145
renderFieldStatus(divsSuccess[1], divsError[1]);
22-
else renderFieldStatus(divsError[1], divsSuccess[1]);
46+
fieldsValid[1] = success;
47+
} else {
48+
renderFieldStatus(divsError[1], divsSuccess[1]);
49+
fieldsValid[1] = error;
50+
}
2351
};
2452
const renderInput = () => {
25-
if (inputName.value === "") renderFieldStatus(divsError[0], divsSuccess[0]);
26-
else renderFieldStatus(divsSuccess[0], divsError[0]);
27-
};
28-
const renderFieldStatus = (divShow, divHide) => {
29-
divHide.classList.add("hide");
30-
divShow.classList.remove("hide");
53+
inputName.onkeypress = validateUserName;
54+
if (inputName.value.trim() === "") {
55+
renderFieldStatus(divsError[0], divsSuccess[0]);
56+
fieldsValid[0] = error;
57+
} else {
58+
renderFieldStatus(divsSuccess[0], divsError[0]);
59+
fieldsValid[0] = success;
60+
}
3161
};
3262
const validatePassword = (e) => {
3363
const passwordRegex = /^[\S]{6,36}$/;
34-
if (passwordRegex.test(inputPassword.value))
64+
if (passwordRegex.test(inputPassword.value)){
3565
renderFieldStatus(divsSuccess[2], divsError[2]);
36-
else renderFieldStatus(divsError[2], divsSuccess[2]);
66+
fieldsValid[2] = success;
67+
} else {
68+
renderFieldStatus(divsError[2], divsSuccess[2]);
69+
fieldsValid[2] = error;
70+
}
3771
validatePasswordConfirm();
3872
};
39-
4073
const validatePasswordConfirm = (e) => {
4174
if (
4275
(inputPassword.value !== "") &
4376
(inputPassword.value === inputConfPassword.value)
44-
)
77+
){
4578
renderFieldStatus(divsSuccess[3], divsError[3]);
46-
else renderFieldStatus(divsError[3], divsSuccess[3]);
79+
fieldsValid[3] = success;
80+
} else {
81+
renderFieldStatus(divsError[3], divsSuccess[3]);
82+
fieldsValid[3] = error;
83+
}
84+
};
85+
const renderFieldStatus = (divShow, divHide) => {
86+
divHide.classList.add("hide");
87+
divShow.classList.remove("hide");
4788
};
4889

49-
inputName.onkeypress = validateUserName;
5090
inputName.oninput = renderInput;
51-
5291
inputEmail.oninput = validateEmail;
5392
inputPassword.oninput = validatePassword;
5493
inputConfPassword.oninput = validatePasswordConfirm;
94+
95+
submitButton.addEventListener("click", (e) => {
96+
e.preventDefault();
97+
const isValidForms = fieldsValid.every((field) => field);
98+
if (isValidForms) writeMessageOnSubmit("Welcome!");
99+
else writeMessageOnSubmit("Authentafication failed");
100+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /