diff --git a/index.html b/index.html
index 120e712..205a979 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
Document
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..3f12fdb
--- /dev/null
+++ b/script.js
@@ -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);
+});
+
diff --git a/style.css b/style.css
index 96366b5..f97ac88 100644
--- a/style.css
+++ b/style.css
@@ -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;
}
}
}