Password Strength Background blurred Using HTML CSS and JS

5
102

Hey, learner today In this blog post, We will be Creating a Password Strength Background blurred Using HTML CSS and JS. In the past post, we have created many projects one of them Responsive Drawing App Using HTML CSS & Javascript. Now it is time to create a Password Strength Background blurred.

Password Strength Background blurred Using HTML CSS and JS

This is the project of the Password Strength checker. We have created this by using HTML CSS and JS. In this Project, We have given 2 inputs one is an email and another one is a password. while entering the password if the password is strong the background image is cleared password is weak the background image will blur.

We create this blurry effect by using Javascript. A long and strong password there the image is cleard. and other basic besing and style is created by using HTML and CSS.

Preview of Password Strength Background blurred on Codepen

Codepen Link

You might like this

Password Strength Background blurred Using HTML CSS and JS [Source code]

To create a Password Strength Background blurred Using HTML CSS and JS At first, you have to create three files (HTML, CSS, and JS) files with the named index.html, style.css, and Script.js in the same folder and you have to link the CSS and JS files to HTML. after that paste, the HTML code in index.html, and paste the CSS code in style.css at last paste the Javascript code in Script.js that’s all after pasting the code.

At first, you have to create an HTML file with the named index.html and paste the below HTML code on it and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>
<!--Codingthai.com--> 
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css"
      integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Password Strength Backround</title>
  </head>
  <body>
    <div class="background" id="background"></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">Change the password to see the effect</p>
      <div class="my-4 text-left">
        <label for="email" class="text-gray-900">Email:</label>
        <input
          type="text"
          class="border block w-full p-2 mt-2 rounded"
          id="email"
          placeholder="Enter Email"
        />
      </div>

      <div class="my-4 text-left">
        <label for="email" class="text-gray-900">Password:</label>
        <input
          type="password"
          class="border block w-full p-2 mt-2 rounded"
          id="password"
          placeholder="Enter Password"
        />
      </div>

      <button
        class="bg-black text-white py-2 mt-4 inline-block w-full rounded"
        type="submit"
      >
        Submit
      </button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.background {
  background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b')
    no-repeat center center/cover;
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
  z-index: -1;
  filter: blur(20px);
}

At last, you have to create a Javascript file with the named script.js and paste the Js code on it and save it again don’t forget to give the .js extension to the Javascript file.

const password = document.getElementById('password')
const background = document.getElementById('background')

password.addEventListener('input', (e) => {
  const input = e.target.value
  const length = input.length
  const blurValue = 20 - length * 2
  background.style.filter = `blur(${blurValue}px)`
})

That’s all after pasting the code now your code will be successfully run. If you get any kind of error/problem in the code just comment down or contact me

Previous articleResponsive Drawing App Using HTML CSS & Javascript
Next articleResponsive Mobile Tab Navigation Bar Using HTML CSS & JS

5 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here