UI: Add timeout for success alert to give time for confetti

src/index.html

@@ -12,10 +12,9 @@
       <input name="email" id="email" type="email" required placeholder="Email (christopher@example.com)">
 
       <input name="country" id="country" type="text" list="countries-list" required placeholder="Country (United Kingdom)">
-      <output id="country-info"></output>
       <datalist id="countries-list"></datalist>
 
-      <input name="zip" id="zip" type="text" required placeholder="ZIP code (12-345)" pattern="\d{2}-\d{3}">
+      <input name="zip" id="zip" type="text" required placeholder="ZIP code (12-345)">
 
       <input name="password" id="password" type="password" required placeholder="Password (Pa$Sw0rD)">
       <div id="password-check">

src/main.js

@@ -41,23 +41,34 @@ document.addEventListener("DOMContentLoaded", () => {
       const formData = new FormData(form);
       const formDataValue = formData.values();
       const [email, country, zip] = Array(5).fill(formDataValue.next().value);
-      alert(
-        `Success!\nEmail: ${email}\nCountry: ${country}\nZIP: ${zip}\nPassword: [redacted]`,
-      );
+      setTimeout(() => {
+        alert(
+          `Success!\nEmail: ${email}\nCountry: ${country}\nZIP: ${zip}\nPassword: [redacted]`,
+        );
+      }, 600);
     } else {
       alert("Hold up, one or more fields are invalid! Try again");
     }
   });
+
   countryInput.addEventListener("input", () => {
-    countryInput.setAttribute(
-      "input-valid",
-      countryInput.value.search(COUNTRY_REGEX) >= 0,
-    );
+    const valid = countryInput.value.search(COUNTRY_REGEX) >= 0;
+    countryInput.setAttribute("input-valid", valid);
+    if (valid) {
+      countryInput.setCustomValidity("");
+    } else {
+      countryInput.setCustomValidity("Invalid country");
+    }
   });
 
-  countryInput.addEventListener("change", () => {
-    document.querySelector("#country-info").textContent =
-      countryInput.value.search(COUNTRY_REGEX) >= 0 ? "" : "Invalid country";
+  zipInput.addEventListener("input", () => {
+    const valid = zipInput.value.search(/\d{2}-\d{3}/) >= 0;
+    zipInput.setAttribute("input-valid", valid);
+    if (valid) {
+      zipInput.setCustomValidity("");
+    } else {
+      zipInput.setCustomValidity("ZIP Code format should be 12-345");
+    }
   });
 
   passwordInput.addEventListener("input", checkPasswordValidity);

src/password.js

@@ -19,18 +19,20 @@ function checkPasswordMatch() {
     passwordInput.value === ""
   ) {
     passwordMatch.style.backgroundColor = "";
+    passwordConfirmInput.setCustomValidity("Passwords don't match");
     return false;
   }
   passwordMatch.style.backgroundColor = "#4b4";
+  passwordConfirmInput.setCustomValidity("");
   return true;
 }
 
-function checkPasswordRequirement(e, regex, element) {
-  if (e.value.search(regex) >= 0) {
-    element.style.backgroundColor = "#4b4";
+function checkPasswordRequirement(regex, requirementElement) {
+  if (passwordInput.value.search(regex) >= 0) {
+    requirementElement.style.backgroundColor = "#4b4";
     return true;
   }
-  element.style.backgroundColor = "";
+  requirementElement.style.backgroundColor = "";
   return false;
 }
 
@@ -41,23 +43,18 @@ function checkPasswordValidity() {
   } else {
     passwordLength.style.backgroundColor = "";
   }
-  const lowercase = checkPasswordRequirement(
-    passwordInput,
-    /[a-z]/,
-    passwordLowercase,
-  );
-  const uppercase = checkPasswordRequirement(
-    passwordInput,
-    /[A-Z]/,
-    passwordUppercase,
-  );
-  const number = checkPasswordRequirement(passwordInput, /\d/, passwordNumber);
-  const special = checkPasswordRequirement(
-    passwordInput,
-    /[#?!@$%^&*-]/,
-    passwordSpecial,
-  );
-  return length && lowercase && uppercase && number && special;
+  const lowercase = checkPasswordRequirement(/[a-z]/, passwordLowercase);
+  const uppercase = checkPasswordRequirement(/[A-Z]/, passwordUppercase);
+  const number = checkPasswordRequirement(/\d/, passwordNumber);
+  const special = checkPasswordRequirement(/[#?!@$%^&*-]/, passwordSpecial);
+  const suitsRequirements =
+    length && lowercase && uppercase && number && special;
+  if (suitsRequirements) {
+    passwordInput.setCustomValidity("");
+  } else {
+    passwordInput.setCustomValidity("Password does not meet requirements");
+  }
+  return suitsRequirements;
 }
 
 export { checkPasswordValidity, checkPasswordMatch };