Social Links
HTML
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Password Validation Check | CodingAyush</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Fontawesome Link for Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"> <script src="script.js" defer></script> </head> <body> <div class="wrapper"> <div class="pass-field"> <input type="password" placeholder="Enter password"> <i class="fa-solid fa-eye"></i> </div> <div class="content"> <p>Password must contains</p> <ul class="requirement-list"> <li> <i class="fa-solid fa-circle"></i> <span>At least 8 characters length</span> </li> <li> <i class="fa-solid fa-circle"></i> <span>At least 1 number (0...9)</span> </li> <li> <i class="fa-solid fa-circle"></i> <span>At least 1 lowercase letter (a...z)</span> </li> <li> <i class="fa-solid fa-circle"></i> <span>At least 1 special symbol (!...$)</span> </li> <li> <i class="fa-solid fa-circle"></i> <span>At least 1 uppercase letter (A...Z)</span> </li> </ul> </div> </div> </body> </html>
CSS
/* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #11131e; } .wrapper { width: 450px; overflow: hidden; padding: 28px; border-radius: 8px; background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.06); } .wrapper .pass-field { height: 65px; width: 100%; position: relative; } .pass-field input { width: 100%; height: 100%; outline: none; padding: 0 17px; font-size: 1.3rem; border-radius: 5px; border: 1px solid #999; } .pass-field input:focus { padding: 0 16px; border: 2px solid #4285F4; } .pass-field i { right: 18px; top: 50%; font-size: 1.2rem; color: #999; cursor: pointer; position: absolute; transform: translateY(-50%); } .wrapper .content { margin: 20px 0 10px; } .content p { color: #333; font-size: 1.3rem; } .content .requirement-list { margin-top: 20px; } .requirement-list li { font-size: 1.3rem; list-style: none; display: flex; align-items: center; margin-bottom: 15px; } .requirement-list li i { width: 20px; color: #aaa; font-size: 0.6rem; } .requirement-list li.valid i { font-size: 1.2rem; color: #4285F4; } .requirement-list li span { margin-left: 12px; color: #333; } .requirement-list li.valid span { color: #999; } @media screen and (max-width: 500px) { body, .wrapper { padding: 15px; } .wrapper .pass-field { height: 55px; } .pass-field input, .content p { font-size: 1.15rem; } .pass-field i, .requirement-list li { font-size: 1.1rem; } .requirement-list li span { margin-left: 7px; } }
JS
const passwordInput = document.querySelector(".pass-field input"); const eyeIcon = document.querySelector(".pass-field i"); const requirementList = document.querySelectorAll(".requirement-list li"); // An array of password requirements with corresponding // regular expressions and index of the requirement list item const requirements = [ { regex: /.{8,}/, index: 0 }, // Minimum of 8 characters { regex: /[0-9]/, index: 1 }, // At least one number { regex: /[a-z]/, index: 2 }, // At least one lowercase letter { regex: /[^A-Za-z0-9]/, index: 3 }, // At least one special character { regex: /[A-Z]/, index: 4 }, // At least one uppercase letter ] passwordInput.addEventListener("keyup", (e) => { requirements.forEach(item => { // Check if the password matches the requirement regex const isValid = item.regex.test(e.target.value); const requirementItem = requirementList[item.index]; // Updating class and icon of requirement item if requirement matched or not if (isValid) { requirementItem.classList.add("valid"); requirementItem.firstElementChild.className = "fa-solid fa-check"; } else { requirementItem.classList.remove("valid"); requirementItem.firstElementChild.className = "fa-solid fa-circle"; } }); }); eyeIcon.addEventListener("click", () => { // Toggle the password input type between "password" and "text" passwordInput.type = passwordInput.type === "password" ? "text" : "password"; // Update the eye icon class based on the password input type eyeIcon.className = `fa-solid fa-eye${passwordInput.type === "password" ? "" : "-slash"}`; });