Password Strength Checker in HTML CSS JavaScript

Password Strength Checker In JavaScript

by

Do you want to create a Password Strength Checker using HTML, CSS and JavaScript?

If you are a beginner and want to create Password Strength Checker with JavaScript then this article is for you.

Password strength checker play a crucial role in guiding users towards creating robust passwords that are resistant to various hacking techniques. 

In this article, we’ll explore the significance of password strength checker and delve into the implementation of such tools using JavaScript.

Password Strength Checker in HTML CSS JavaScript

Creating a Password Strength Checker is very easy if you know basic JavaScript. This type of project helps you a lot in understanding the fundamentals of JavaScript.

To implement a password strength checker in JavaScript, developers can leverage both client-side and server-side validation. Here’s a basic example of a password strength checker implemented in JavaScript.

See the Pen Untitled by Growthpanda (@Growthpanda) on CodePen.

As you can see this Password Strength Checker is very simple. There is an input box in which you input the password and its strength is displayed below.

Step 1: Structure of Password Strength Checker

First, create this JavaScript Password Strength Checker structure by HTML. You can copy and paste these codes into your HTML file.

Copy Text 
    <div class="wrapper">
        <div class="container">
            <input type="password" id="password" oninput="strengthChecker()">
            <span id="toggle" onclick="toggle()">
                <i class="fas fa-eye"></i>
            </span>
            <div id="strength-bar"></div>
        </div>
        <p id="msg"></p>
    </div>

Step 2: Password Strength Checker's CSS

Now we need to use some CSS to design the Password Strength Checker.

Copy Text 
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: linear-gradient(
        135deg,
        #61d954,
        #2ebf75
    );
}
.wrapper{
    background-color: #ffffff;
    width: 450px;
    padding: 50px 0;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 8px;
    box-shadow: 0 20px 25px rgba(0,0,0,0.2);
}
.container{
    width: 300px;
    position: relative;
    margin: auto;
}
input,
p{
    font-family: "Roboto Mono", monospace;
}
input{
    width: 100%;
    height: 50px;
    padding: 0 40px 0 20px;
    position: relative;
    background-color: #f5f5f5;
    border: none;
    outline: none;
    border-radius: 5px 5px 0 0;
}

#toggle{
    position: absolute;
    top: 17px;
    right: 15px;
    color: #808080;
    cursor: pointer;
}
.strength{
    width: 25%;
    display: inline-block;
    position: relative;
    height: 100%;
    bottom: 5px;
}
#strength-bar{
    background-color: #dcdcdc;
    height: 10px;
    position: relative;
}
p{
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

Step 3: Password Strength Checker in JavaScript

Now this Password Strength Checker needs to be activated by JavaScript. I have tried to explain the following codes well. Hope you can understand easily.

Copy Text 
// Object to keep track of password strength parameters
let parameters = {
    count: false,
    letters: false,
    numbers: false,
    special: false
};

// DOM elements
let strengthBar = document.getElementById("strength-bar");
let msg = document.getElementById("msg");

// Function to check and update password strength
function strengthChecker() {
    // Get the password from the input field
    let password = document.getElementById("password").value;

    // Check for the presence of letters, numbers, special characters, and minimum length
    parameters.letters = /[A-Za-z]+/.test(password) ? true : false;
    parameters.numbers = /[0-9]+/.test(password) ? true : false;
    parameters.special = /[!\"$%&/()=?@~`\\.';:+=^*_-]+/.test(password) ? true : false;
    parameters.count = password.length > 7 ? true : false;

    // Filter out the true values and get the count
    let barLength = Object.values(parameters).filter(value => value);

    // Log the values for debugging
    console.log(Object.values(parameters), barLength);

    // Clear previous strength bar
    strengthBar.innerHTML = "";

    // Create strength bars based on the count of true parameters
    for (let i in barLength) {
        let span = document.createElement("span");
        span.classList.add("strength");
        strengthBar.appendChild(span);
    }

    // Reference to strength bars
    let spanRef = document.getElementsByClassName("strength");

    // Update strength indicator and message based on the count of true parameters
    for (let i = 0; i < spanRef.length; i++) {
        switch (spanRef.length - 1) {
            case 0:
                spanRef[i].style.background = "#ff3e36";
                msg.textContent = "Your password is very weak";
                break;
            case 1:
                spanRef[i].style.background = "#ff691f";
                msg.textContent = "Your password is weak";
                break;
            case 2:
                spanRef[i].style.background = "#ffda36";
                msg.textContent = "Your password is good";
                break;
            case 3:
                spanRef[i].style.background = "#0be881";
                msg.textContent = "Your password is strong";
                break;
        }
    }
}

// Function to toggle password visibility
function toggle() {
    let password = document.getElementById("password");
    let eye = document.getElementById("toggle");

    // Toggle between password and text types
    if (password.getAttribute("type") == "password") {
        password.setAttribute("type", "text");
        eye.style.color = "#0be881"; // Change eye icon color
    } else {
        password.setAttribute("type", "password");
        eye.style.color = "#808080"; // Change eye icon color back to default
    }
}

Password strength checkers in JavaScript play a pivotal role in enhancing the security of online accounts by guiding users towards creating robust passwords.

This type of JavaScript Password Strength Checker will give you real time data. That is when you input in the input box it will show you if it is strong.

Let me know how you like this project and if you have any questions you can comment me.

Source Code

You can use JavaScript to test password strength by implementing a set of criteria and checking whether a given password meets those criteria. Here’s a simple example of how you can do this:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Password Strength Checker</title>
<style>
body {
font-family: Arial, sans-serif;
}
input {
margin-bottom: 10px;
}
#strength {
margin-top: 10px;
}
</style>
</head>
<body>
<h2>Password Strength Checker</h2>
<label for=”password”>Enter Password:</label>
<input type=”password” id=”password” oninput=”checkPasswordStrength()”>
<div id=”strength”></div>

<script>
function checkPasswordStrength() {
var password = document.getElementById(“password”).value;
var strengthText = document.getElementById(“strength”);

// Define criteria
var minLength = 8;
var hasUpperCase = /[A-Z]/.test(password);
var hasLowerCase = /[a-z]/.test(password);
var hasNumbers = /\d/.test(password);
var hasSpecialChars = /[!@#$%^&*(),.?”:{}|<>]/.test(password);

// Check criteria
var strength = 0;
if (password.length >= minLength) {
strength++;
}
if (hasUpperCase) {
strength++;
}
if (hasLowerCase) {
strength++;
}
if (hasNumbers) {
strength++;
}
if (hasSpecialChars) {
strength++;
}

// Display strength
switch (strength) {
case 0:
case 1:
strengthText.innerHTML = “Weak”;
strengthText.style.color = “red”;
break;
case 2:
strengthText.innerHTML = “Moderate”;
strengthText.style.color = “orange”;
break;
case 3:
case 4:
strengthText.innerHTML = “Strong”;
strengthText.style.color = “green”;
break;
case 5:
strengthText.innerHTML = “Very Strong”;
strengthText.style.color = “darkgreen”;
break;
}
}
</script>
</body>
</html>

Creating a password strength checker in JavaScript involves evaluating various criteria such as length, complexity, and the presence of different types of characters. Here’s a simple example of a password strength checker using JavaScript.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Password Strength Checker</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#passwordInput {
width: 300px;
padding: 8px;
font-size: 16px;
}
#strengthIndicator {
margin-top: 10px;
}
</style>
</head>
<body>
<label for=”passwordInput”>Enter Password:</label>
<input type=”password” id=”passwordInput” oninput=”checkPasswordStrength()”>
<div id=”strengthIndicator”></div>

<script>
function checkPasswordStrength() {
var password = document.getElementById(“passwordInput”).value;
var strengthIndicator = document.getElementById(“strengthIndicator”);

// Reset indicator
strengthIndicator.innerHTML = “”;

// Minimum length requirement
if (password.length < 8) {
strengthIndicator.innerHTML = “Password should be at least 8 characters long”;
return;
}

// Check for uppercase letters
if (/[A-Z]/.test(password)) {
strengthIndicator.innerHTML += “Uppercase letter “;
}

// Check for lowercase letters
if (/[a-z]/.test(password)) {
strengthIndicator.innerHTML += “Lowercase letter “;
}

// Check for numbers
if (/\d/.test(password)) {
strengthIndicator.innerHTML += “Number “;
}

// Check for special characters
if (/[^A-Za-z0-9]/.test(password)) {
strengthIndicator.innerHTML += “Special character “;
}

// Provide feedback based on the criteria checked
if (strengthIndicator.innerHTML === “”) {
strengthIndicator.innerHTML = “Strong password!”;
} else {
strengthIndicator.innerHTML = “Weak password – missing: ” + strengthIndicator.innerHTML;
}
}
</script>
</body>
</html>

This example includes basic checks for minimum length, presence of uppercase and lowercase letters, numbers, and special characters.

Leave a Comment

Home
Menu
Instagram
Search