From db455d218d8779fa6aac5d57fb9270a2a6f65d31 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Wed, 7 Oct 2020 11:50:17 -0400 Subject: [PATCH] Password strength background --- password-strength-background/index.html | 49 +++++++++++++++++++++++++ password-strength-background/script.js | 9 +++++ password-strength-background/style.css | 25 +++++++++++++ 3 files changed, 83 insertions(+) create mode 100644 password-strength-background/index.html create mode 100644 password-strength-background/script.js create mode 100644 password-strength-background/style.css diff --git a/password-strength-background/index.html b/password-strength-background/index.html new file mode 100644 index 0000000..fd14e7f --- /dev/null +++ b/password-strength-background/index.html @@ -0,0 +1,49 @@ + + + + + + + + Password Strength Backround + + +
+
+

Image Password Strength

+

Change the password to see the effect

+
+ + +
+ +
+ + +
+ + +
+ + + diff --git a/password-strength-background/script.js b/password-strength-background/script.js new file mode 100644 index 0000000..82737e0 --- /dev/null +++ b/password-strength-background/script.js @@ -0,0 +1,9 @@ +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)` +}) diff --git a/password-strength-background/style.css b/password-strength-background/style.css new file mode 100644 index 0000000..e8d7ade --- /dev/null +++ b/password-strength-background/style.css @@ -0,0 +1,25 @@ +* { + 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); +}