Password Strength Checker using HTML ,CSS & Javascript.

Hello friends, I’m hoping all is well with you. In today’s blog post, I’ve demonstrated how to create a Password Strength Checker using HTML, CSS, and JavaScript. You most likely know that I’ve created an alot of JavaScript projects, a password and confirm password checker.

A password strength checker informs or demonstrates that the user-entered password can be broken using password-cracking attempts/methods like brute force and dictionary attacks. The password strength checker contains a metre that evaluates user-entered passwords, including a complete mix of symbols, digits, uppercase letters, and lowercase letters.

I hope you have a general idea of what the project entails. In our article, we will go over this project step by step.

Table of Contents

Step1: Adding some basic HTML Code

HTML stands for HyperText Markup Language. This is a markup language. Its main job is to give our project structure. We will provide our project structure by utilising this markup language. So let’s look at our HTML code.

<html>
<head>
    <title>Password Strength Checker</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>PASSWORD STRENGTH APPLICATION</h1>
    <form>
        <div id="container">
            <input id="input" type="password" name="Password" placeholder="Please input a password"><br>
            <div class="progress">
                <div class="progressBar"></div>
            </div>
            
            <div>
                <span id="inputLen"></span><br>
                <span id="percent"></span>
            </div>
        </div>
            <button type="submit">Check Strength</button>
    </form>
    <script src="index.js"></script>
</body>
</html>

Before beginning to add structure to our password Strength checker, We need to update some links. Because we used two separate files for our HTML and CSS in this project, we need to connect them all.To do this, please include the links to our CSS .

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

<link rel="stylesheet" href="style.css">

Now let’s Add the structure for our Password Strength bar.

We will include a heading to our password strength bar project using the <h1> tag.
We create a form using the <form> tag.
We’ll make a type of password input box inside our form tag.
We also a create a div which we will be using as the progress bar for our password strength checker
We also create two span tag which we will be using to show the password strength using percentage.
We will also create a input type as “submit” which we will be using to check the password strength.

We have now added the basic structure of our webpage. Now we will be using our stylesheet to add styles to our file upload with progress bar but first let’s take a look at our output.

Output:

Step2: Adding CSS Code

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

Now we will look at our CSS code.

body {
  background: #cccccc;
  text-align: center;
  color: #000;
  font-family: serif;
}

h1 {
  text-shadow: 0 3px 5px rgba(255, 255, 255, 0.8);
}

h1:hover {
  color: green;
}

form {
  border: 5px solid #fff;
  border-radius: 10px;
  display: inline-block;
  padding: 50px;
}
#container {
  height: 100px;
}
input {
  height: 20px;
  width: 300px;
  border-radius: 5px;
  padding: 5px 20px;
  font-size: 16px;
  border: #cccccc;
}
input:focus {
  outline: none;
  box-shadow: 1px 2px 5px 3px;
}

input::placeholder {
  padding: 5px;
  text-align: center;
  color: #cccccc;
}

div {
  margin-top: 10px;
}
div.progress {
  border: 1px solid #efefef;
  border-radius: 5px;
  width: 240px;
  height: 5px;
  display: inline-block;
  text-align: left;
  padding: 2px;
  display: none;
}
div div.progressBar {
  width: 50px;
  height: 100%;
  margin-top: 0;
  transition-timing-function: ease-out;
  transition: 3s;
}
span#percent {
  color: transparent;
}
button {
  width: 200px;
  height: 30px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  padding: 2px;
  margin-top: 3%;
  outline: none;
  cursor: pointer;
}
button:hover {
  outline: none;
  box-shadow: 1px 1px 0px 3px;
  background-color: grey;
}

After we’ve added the CSS code, we’ll go over it step by step. To save time, you can simply copy this code and paste it into your IDE. Let us now examine our code step by step.

Step1: We will style our body by applying some styling using the body tag selector. Our body now has a grey background thanks to the background property. The text-align property will provide centre alignment, and the font-family property will add “serif” as the font family.

50+ Html ,Css & Javascript Projects With Source Code

Now using the h1 tag we will add a text shadow to our heading and also using the hover selector we will add a color to green as the user hover over the heading the color will change to green.

body {
  background: #cccccc;
  text-align: center;
  color: #000;
  font-family: serif;
}

h1 {
  text-shadow: 0 3px 5px rgba(255, 255, 255, 0.8);
}

h1:hover {
  color: green;
}

Step2: Now we will style our form using the border. We will add a border of 5px with a solid white color. We also added some border-radius to add curveness to border edges and the display is set to the inline block.

Now using id selector (#container) we will set the height of 100px of our container.

form {
  border: 5px solid #fff;
  border-radius: 10px;
  display: inline-block;
  padding: 50px;
}
#container {
  height: 100px;
}

Step3:Our form elements will now be styled using the tag selector (input). We’ll set the dimensions to 200px for the height and 300px for the width. We will set the border radius to 5px using the border-radius property, and we will add 5px of padding to the top and bottom of the 20px border.

Now using the focus selector as the user focus over the input element the outline is set to none and box shadow will be applied to our input box.

input {
  height: 20px;
  width: 300px;
  border-radius: 5px;
  padding: 5px 20px;
  font-size: 16px;
  border: #cccccc;
}
input:focus {
  outline: none;
  box-shadow: 1px 2px 5px 3px;
}

input::placeholder {
  padding: 5px;
  text-align: center;
  color: #cccccc;
}

Step4: Now we will styling to our progress bar and button we will give a border to our progress bar and width is set to 240px and height is set to 5px and using the text-align we will align it to the left.

5+ HTML CSS Projects With Source Code

The width and height of the button is set to 200px and 30px and the border-radius set to 5px and we have also added a hover property to add box shadow while the user hover over the button and backgrounf color changes to dark grey.

div {
  margin-top: 10px;
}
div.progress {
  border: 1px solid #efefef;
  border-radius: 5px;
  width: 240px;
  height: 5px;
  display: inline-block;
  text-align: left;
  padding: 2px;
  display: none;
}
div div.progressBar {
  width: 50px;
  height: 100%;
  margin-top: 0;
  transition-timing-function: ease-out;
  transition: 3s;
}
span#percent {
  color: transparent;
}
button {
  width: 200px;
  height: 30px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  padding: 2px;
  margin-top: 3%;
  outline: none;
  cursor: pointer;
}
button:hover {
  outline: none;
  box-shadow: 1px 1px 0px 3px;
  background-color: grey;
}

Step3: JavaScript Code

const passwordLength = () => {
    let inputVal = document.querySelector('#input').value;
    const inputLen = document.querySelector('#inputLen');
    document.querySelector('#percent').style.color = 'transparent';

    if (inputVal.includes(' ')){
        inputLen.innerHTML  = 'Whitespaces are not allowed';
        document.querySelector('.progress').style.display = 'none'
         return;
     }

     if (inputVal.length === 0) {
         inputLen.innerHTML = '';
         document.querySelector('.progress').style.display = 'none';
         return;
     }

    if (inputVal.length < 6) {
        inputLen.innerHTML = 'Minimum password length is 6';
        document.querySelector('.progress').style.display = 'none'
        return;
    }

    if (inputVal.length >= 6) {
        inputLen.innerHTML = '';
        document.querySelector('.progress').style.display = 'inline-block';
    }

    if(inputVal.length > 12) {
        inputLen.innerHTML = 'Maximum password length is 12';
        document.querySelector('.progress').style.display = 'none'
        return
    }

    const lower = /[a-z]/.test(inputVal);
    const upper = /[A-Z]/.test(inputVal);
    const digit = /[0-9]/.test(inputVal);
    const specialChar = /[$@#&!]/.test(inputVal);
    let passStrength = 0;
    if (lower){
        passStrength += 25;
        document.querySelector('#percent').innerHTML = passStrength;
    }
    if (upper) {
        passStrength += 25;
        document.querySelector('#percent').innerHTML = passStrength;
    }
    if (digit) {
        passStrength += 25;
        document.querySelector('#percent').innerHTML = passStrength;
    }
    if (specialChar) {
        passStrength += 25;
        document.querySelector('#percent').innerHTML = passStrength;
    }
    
    document.querySelector('#percent').innerHTML += '%';


    let percentage = document.querySelector('#percent').innerHTML;

    if (percentage === '25%'){
        document.querySelector('.progressBar').style.background = 'red';
        document.querySelector('.progressBar').style.width = percentage;
    }
    if (percentage === '50%'){
        document.querySelector('.progressBar').style.background = '#FAD054';
        document.querySelector('.progressBar').style.width = percentage;
    }
    if (percentage === '75%'){
        document.querySelector('.progressBar').style.background = 'blue';
        document.querySelector('.progressBar').style.width = percentage;
    }
    if (percentage === '100%'){
        document.querySelector('.progressBar').style.background = 'green';
        document.querySelector('.progressBar').style.width = percentage;
    }
    
}
document.querySelector('#input').addEventListener('keyup', passwordLength);

const clickToCheck = (event) => {
    event.preventDefault();
    inputVal = document.querySelector('#input').value;

    if(!inputVal.includes(' ') && inputVal.length > 5 && inputVal.length <= 12) {
        document.querySelector('#percent').style.color = '#000000';
    }
}
document.querySelector('button').addEventListener('click', clickToCheck);

We will create a constant variable (password length) and inside it we will create a anonymous function which we will select our HTML element using the document.queryselector and stor their value inside a variable and using the style property we will change the color to transparent of the element with id (#percent)
Now using the if statement wew will first check if there is white space inside our input the it will print whitespace are not allowed and we will also check if the length is short then 6 it will print mimum password required .
similarly we will check for the special charactor as based on that we will check the percentage and using the percentage we will change the progress bar width and color
We will also add an event listener click to the button then it will display uss the percentage of our password

Now we’ve completed our simple password checker with progress bar using JavaScript. I hope you understood the whole project. Let’s take a look at our Live Preview.

Portfolio Website Using HTML ,CSS and Javascript Source Code

Output:

Codepen Preview Of password strength checker with Progress Bar HTML, CSS & JavaScript

See the Pen
PASSWORD STRENGTH by OLUWASEUN SOMEFUN (@oseun)
on CodePen.

Now We have Successfully created our password strength checker with Progress Bar using HTML, CSS & JavaScript You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

follow : @codewithrandom

Written By : @Arun

Code By: @Oluwaseun

This Post Has 2 Comments

joel October 29, 2022 Reply
Hello, I have made a small modification so that only when typing the password the security percentage is shown according to the color. You can see it at the following link:
https://i.postimg.cc/X7dt9s5x/Password-Strength.png
1. arun October 30, 2022 Reply
  Nice Bro Keep up the good work 👍🏻👍🏻

CodeWithRandom

Password Strength Checker using HTML ,CSS & JavaScript

Password Strength Checker using HTML ,CSS & Javascript.

Step1: Adding some basic HTML Code

Output:

Step2: Adding CSS Code

Step3: JavaScript Code

Codepen Preview Of password strength checker with Progress Bar HTML, CSS & JavaScript

This Post Has 2 Comments

Leave a Reply Cancel reply

Navigate

Subscribe Now

Password Strength Checker using HTML ,CSS & Javascript.

Step1: Adding some basic HTML Code

Output:

Step2: Adding CSS Code

Step3: JavaScript Code

Codepen Preview Of password strength checker with Progress Bar HTML, CSS & JavaScript

You Might Also Like

18 HTML Resume Templates (Demo + Free Code)

Create a Screen Recorder using JavaScript

Copy to Clipboard using HTML ,CSS & JavaScript (Source Code)

This Post Has 2 Comments

Leave a Reply Cancel reply

Navigate

Subscribe Now