password-strength-background

<!DOCTYPE html>

<head>

<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"

/>

<style>

* {

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);

}

</style>

<title>Password Strength Backround</title>

</head>

<body>

<h1 class="text-3xl">Image Password Strength</h1>

<p class="text-sm text-gray-700">Change the password to see the effect</p>

<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>

<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>

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)`

})</script>

</body>

</html>