tod
/
odin-sign-up-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added password chec

This commit is contained in:
NetMan 2024-01-25 22:17:05 +01:00
parent bc3fadf4ad
commit f48ff98875
3 changed files with 51 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -6,6 +6,7 @@
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body>
<div id="flexbox">

35
script.js Normal file
View File

@ -0,0 +1,35 @@
const passwordFields = document.querySelectorAll('input[type="password"');
function checkPassword() {
const passwordMatch = Array.from(passwordFields).every(element => {
if (element.value == passwordFields[0].value) {
return true;
}
});
return passwordMatch;
};
function showPasswordMatch() {
passwordFields.forEach(element => {
element.nextSibling.remove();
});
if (checkPassword()) {
passwordFields.forEach(element => {
element.classList.remove("psk-no-match");
})
} else {
passwordFields.forEach(element => {
element.classList.add("psk-no-match");
const info = document.createElement("span");
info.textContent = "* Passwords do not match";
info.classList.add("psk-no-match");
element.after(info);
})
}
}
passwordFields.forEach(element => {
element.addEventListener('keyup', showPasswordMatch);
});

15
style.css
View File

@ -106,6 +106,21 @@ h2 {
box-shadow: #000 0 0 8px -5px;
border: 1px solid #22d;
}
&.psk-no-match {
border: 1px solid #d22;
}
&::after {
display: block;
font-size: 2rem;
position: absolute;
top: 20px;
content: 'Passwords';
}
}
span.psk-no-match {
color: #d22;
font-size: 0.9rem;
margin-top: 0.4em;
}
}
}