Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Password Validation" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Password Validation" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Password Validation [Source Code]
To get the following HTML, CSS & JS code for the Password Validation project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Validation</title>
<link rel="stylesheet" href="style.css">
<!-- Font Awesome cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<h1>Password validation</h1>
<div class="input">
<input type="password" placeholder="password" autocomplete="off">
<i class="fa-solid fa-eye"></i>
</div>
<div class="validations">
<p>Password must contains</p>
<ul class="allChecks">
<li>At least 10 Characters Long</li>
<li>At least 1 UpperCase letter (A,B,...Z)</li>
<li>At least 1 lowercase letter (a,b,...z)</li>
<li>At least 1 special symbol (!,@,...$)</li>
<li>At least 1 Number (0,1,2...9)</li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #eaeaea;
}
.container {
width: 420px;
height: 265px;
padding: 20px;
border: 4px dotted #893168;
background-color: transparent;
border-radius: 10px;
}
h1 {
color: #893168;
font-size: 24px;
margin: 0 0 10px 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
word-spacing: 5px;
}
.input {
width: 100%;
position: relative;
}
.input input {
width: 100%;
height: 50px;
font-size: 18px;
padding: 0 30px;
border: 3px solid #893168;
border-radius: 10px;
outline: none;
}
.input i {
position: absolute;
right: 5%;
top: 35%;
cursor: pointer;
}
.validations {
width: 100%;
margin: 20px 10px;
text-align: center;
}
.validations p {
font-weight: 600;
}
.allChecks {
width: 100%;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.allChecks li {
width: 180px;
font-size: 10px;
font-weight: 500;
color: #893168;
text-align: start;
}
JavaScript
const inputEl = document.querySelector("input");
const eyeEl = document.querySelector(".input i");
const checkListEl = document.querySelectorAll(".allChecks li");
// regex means regular expression and here, I have taken separate regex & index in a check array.
// You don't need to remember all these expressions and you can refer from below link.
// Regular expression checks were took from https://www.section.io/engineering-education/password-strength-checker-javascript/
// you can refer any other site also but I referred this website.
const checks = [
{ regex: /.{10,}/, index: 0 }, // At least of 10 characters
{ regex: /[A-Z]/, index: 1}, // At least upperCase
{ regex: /[a-z]/, index: 2 }, // At least one lowerCase
{ regex: /[^A-Za-z0-9]/, index: 3 }, // At least one special character
{regex: /[0-9]/, index: 4} // At least one uppercase letter
]
inputEl.addEventListener("keyup", (event) => {
checks.forEach(e => {
// it checks if the password matches the check regex
const valid = e.regex.test(event.target.value);
const checkItem = checkListEl[e.index];
// if regex is valid then it adds text decoration to line-through or else none.
if (valid) {
checkItem.style = "text-decoration: line-through";
} else {
checkItem.style = "text-decoration: none";
}
});
});
// when we click on eye icon It toggles between eye icon slash & eye icon and also input toggles between text and password based on the eye icon.
eyeEl.addEventListener("click", () => {
eyeEl.className = `fa-solid fa-eye${inputEl.type === "password" ? "" : "-slash"}`;
inputEl.type = inputEl.type === "password" ? "text" : "password";
});
Generating Download Link...