Skip to content

Program to check Strength of Password

Create a Password Strength Checker using HTML CSS and JavaScript

Last Updated : 26 Jul, 2024

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

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:

Program to check Strength of Password

zaidkhan15

Improve

Article Tags :

Similar Reads

Strong Random Password Generator Online

This Strong Random Password Generator offers an invaluable understanding of the significance of strong passwords and provides strong Passwords with the power of a reliable password generator tool. This tool Allows users to define password length, and character types (uppercase, lowercase, numbers, s

Tips For Choosing a Strong Password

Forgot your password?... Letâ€™s reset with the whole concept. So what is your Password? PassWord PassssWord1 Paasword9876â€¦ or Names of favorite sports personalities, celebs, and even brands are used as passwords by so many people. And then random posts, messages, and comments from your account, getti

5 Most Popular Methods Used By Hackers To Crack Password

In today's world, almost ÐµvÐµryonÐµ has bank accounts, Ðµmail and social mÐµdia accounts that rÐµquirÐµ passwords to accÐµss. HowÐµvÐµr, many pÐµoplÐµ ÐµithÐµr storÐµ thÐµir passwords on thÐµ dÐµvicÐµ or choosÐµ wÐµak passwords that can bÐµ Ðµasily guÐµssÐµd. HackÐµrs arÐµ always trying to stÐµal passwords that give thÐµm acce

How to Remove Windows 10 Password?

Looking to remove your Windows 10 password for a faster login experience? Whether you want to disable the password on Windows 10 or simply streamline the login process, this guide will walk you through the steps to turn off the Windows 10 login password. By following these easy steps, you'll learn h

How to Recover an Apple ID Password?

Forgetting your Apple ID password can be a frustrating experience for users, especially considering how integral the Apple ID is to accessing various services like iCloud, the App Store, and Apple Music. Fortunately, recovering your Apple ID password is a straightforward process. This article will w

How to Change Computer Password?

There are only a few people who don't use passwords on their Computer. User password is the most basic security check that helps you restrict unauthorized access to your computer. It's a good practice to change your passwords in a short span that helps your password to be healthy. By the end of this

Random password generator in C

In this article, we will discuss how to generate a random password of a given length consists of any characters. Approach: The below-given program involves basic concepts like variables, data types, array, loop, etc.Follow the below steps to solve this problem:Take the length of the password and dec

Generating Strong Password using Python

Having a weak password is not good for a system that demands high confidentiality and security of user credentials. It turns out that people find it difficult to make up a strong password that is strong enough to prevent unauthorized users from memorizing it. This article uses a mixture of numbers,

Create a Password Strength Checker using HTML CSS JS

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 con

Program to check Strength of Password

A password is said to be strong if it satisfies the following criteria: It contains at least one lowercase English character.It contains at least one uppercase English character.It contains at least one special character. The special characters are: !@#$%^&*()-+Its length is at least 8.It contai