How we can check a password strength with an image? Solution: See this JavaScript Image Password Strength Detect, Check Pass With Image.
Previously I have shared a jQuery password strength checker which was very advanced, but this is a basic checker with a blurred image. Basically, all user management websites like social media, eCommerce, etc use form validation. In form validation, majorly we check valid email, phone, and password. And the most complicated validation we set for password inputs for help users to choose a strong password.
Today you will learn to create Check Pass With Image. Basically, there is a background image and password input. The background image is completely blurred at first, but when you will put characters it will clear. We have to put a password with 8 characters to completely reveal the image. And the strength checker only detects the length of the pass, nothing else.
So, Today I am sharing JavaScript Image Password Strength Detect. There I have used pure JavaScript to creating this program, there is no jQuery or any other library. Also, I have used an HTML CSS library for creating the layout for less custom CSS. I know this is a demo program, but you can improve it then you can use it on your website also.
If you are thinking now how this image pass checker actually is, then see the preview given below.
Preview Of Check Pass With Image
See this video preview to getting an idea of how this program looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
JavaScript Image Password Strength Detect Source Code
Before sharing source code, let’s talk about it. First, I have created a div for placing the image, and another div for placing password input and label using HTML. For creating the layout easily I have used an HTML CSS library, which is tailwind (get). We just have to put class names for placing elements and styling them.
Now using CSS I did few works, like position, font, image, etc. I have placed a background image using CSS background-image: command. And given the height of the body and image 100vh, it means the full screen of any device. Also, I have blurred the image by 20px using filter: blur(20px); command.
JavaScript doing here the main work of the program. First, It fetching the image and password input using document.getElementById command. After that, I have created an event listener to reducing the blur value according to character length. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Image Password Strength | Webdevtrick.com</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <div class="BGimg" id="BGimg"></div> <div class="bg-white rounded p-10 text-center shadow-md"> <h1 class="text-3xl">Image Password Strength</h1> <p class="text-sm text-gray-700">put the password to see effect</p> <div class="my-4 text-left"> <label class="text-gray-800">Password:</label> <input id="password" type="password" class="border block w-full p-2 mt-2 rounded" placeholder="Enter password..." /> </div> </div> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url('https://fonts.googleapis.com/css?family=Alata&display=swap'); * { box-sizing: border-box; } body { font-family: 'Alata', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; overflow: hidden; } .BGimg { background-image: url('https://webdevtrick.com/wp-content/uploads/1st.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; position: absolute; top: -20px; left: -20px; bottom: -20px; right: -20px; filter: blur(20px); z-index: -1; } |
function.js
The last step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 |
// Code By Webdevtrick ( https://webdevtrick.com ) const password = document.getElementById('password'); const background = document.getElementById('BGimg'); password.addEventListener('input', (e) => { const input = e.target.value; const length = input.length; const blurValue = 20 - length * 2; const blur = `blur(${blurValue}px)`; background.style.filter = blur; }); |
That’s It. Now you have successfully created JavaScript Image Password Strength Detect, Check Pass With Image. If you have any doubt or questions comment down below.
Thanks For Visiting, Keep Visiting.
You are a prodigy. Thanks for sharing your knowledge. I am learning a lot from, you.
yes its nice
I love this