Create a Password Strength Checker using HTML CSS and JavaScript

Last Updated : 26 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

This project aims to create a password strength checker using HTML, CSS, and JavaScript that is going to be responsible for checking the strength of a password for the user's understanding of their password strength by considering the length of the password which will be that the password should contain at least 8 characters and the other is that the password should contain one uppercase letter, one lowercase letter, one number and one special character.

Prerequisites

Final Output

z9-min
Final Output

Approach

The password strength checker will be implemented using the following steps:

  • Create an HTML form that includes an input field for entering passwords using some tags that help to build the structure of the project <form>,<div>,<h>, etc.
  • Styling the project using the CSS some properties that are used border, margin, padding, etc.
  • Utilize JavaScript to analyze the characteristics of passwords and calculate their strengths.
  • Display the assessed strength of passwords using indicators such as colors or progress bars.
  • Provide users with feedback, about their password strength based on predefined criteria.

Project Structure

z5
Project structure

Example: This example describes the basic implementation of the Password Strength Checker using HTML, CSS, and JavaScript.

HTML 
<!--index.html-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <link rel="stylesheet" 
          href="style.css" />
    <script src="script.js"></script>
</head>

<body>
    <div class="group">
        <h1 id="top">GeeksforGeeks</h1>
        <h1>Password Strength Checker</h1>
        <label for="">Password</label>
        <input type="text" 
               id="password"
               placeholder="Type your password here" />
        <label for="">
              Strength of password
          </label>
        <div class="power-container">
            <div id="power-point"></div>
        </div>
    </div>
</body>

</html>
CSS 
/* style.css */

body {
    margin: 0;
    font-family: monospace;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to top right,
            #7abb76, #cfd2d8);
    color: #0e0f0f;
    font-size: 20px;
}

#top {
    color: green;
}

.group {
    width: auto;
    text-align: center;
}

.group label {
    display: block;
    padding: 20px 0;
}

.group input {
    border: none;
    outline: none;
    padding: 20px;
    width: calc(100% - 40px);
    border-radius: 10px;
    background-color: #eaeff2;
    color: #3ba62f;
    font-size: 20px;
}

.group .power-container {
    background-color: #2E424D;
    width: 100%;
    height: 15px;
    border-radius: 5px;
}

.group .power-container #power-point {
    background-color: #D73F40;
    width: 1%;
    height: 100%;
    border-radius: 5px;
    transition: 0.5s;
}
JavaScript 
// script.js

let password = document.getElementById("password");
let power = document.getElementById("power-point");
password.oninput = function () {
    let point = 0;
    let value = password.value;
    let widthPower = 
        ["1%", "25%", "50%", "75%", "100%"];
    let colorPower = 
        ["#D73F40", "#DC6551", "#F2B84F", "#BDE952", "#3ba62f"];

    if (value.length >= 6) {
        let arrayTest = 
            [/[0-9]/, /[a-z]/, /[A-Z]/, /[^0-9a-zA-Z]/];
        arrayTest.forEach((item) => {
            if (item.test(value)) {
                point += 1;
            }
        });
    }
    power.style.width = widthPower[point];
    power.style.backgroundColor = colorPower[point];
};

Output:


Next Article
Program to check Strength of Password
author
zaidkhan15
Improve
Article Tags :

Similar Reads