diff --git a/Frontend-Projects/Image_based_Password_Strength/README.md b/Frontend-Projects/Image_based_Password_Strength/README.md new file mode 100644 index 0000000000..505b75e703 --- /dev/null +++ b/Frontend-Projects/Image_based_Password_Strength/README.md @@ -0,0 +1,35 @@ +# Image based Password Strength +It is a simple UI feature essentially useful for people exploring web development for the first time.
+The project also has a challenge to weigh symbols like $ and # differently to decrease blur. The changes need to be made in script.js. Go for it. + +## **Functionality** + +- As you increase the length of the password the strength or clarity of background dicreases as blur index decreases. + + +
+ +## **Tech Stack 🎮** + +- HTML +- CSS +- JS +- Tailwind CSS - Optional (very small role, used to give a preview to new developers) + + +
+ +## **Screenshots 📸** + +![image](https://github.com/Shreyas-SAS/Dev-Geeks/assets/96542494/54fb53dc-16a4-4c0e-8004-ee2e5634aa18) + + +
+ +## **Developed by 👦** + +[Shreyas Sukhadeve](https://github.com/Shreyas-SAS) + +
+ +### **Thanks for using this project** diff --git a/Frontend-Projects/Image_based_Password_Strength/index.html b/Frontend-Projects/Image_based_Password_Strength/index.html new file mode 100644 index 0000000000..4300cda01b --- /dev/null +++ b/Frontend-Projects/Image_based_Password_Strength/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + Password Strength Backround + + + +
+
+

Image Password Strength

+

Change the password to see the effect

+
+ + +
+ +
+ + +
+ + +
+ + + + diff --git a/Frontend-Projects/Image_based_Password_Strength/script.js b/Frontend-Projects/Image_based_Password_Strength/script.js new file mode 100644 index 0000000000..07701c201a --- /dev/null +++ b/Frontend-Projects/Image_based_Password_Strength/script.js @@ -0,0 +1,12 @@ +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 // blur is only defined on length for simplicity. + // I wish to add a challenge to it. Make it such that symbols contribute 2x clarity vs other characters. + + // applying blur to background + background.style.filter = `blur(${blurValue}px)` +}) diff --git a/Frontend-Projects/Image_based_Password_Strength/style.css b/Frontend-Projects/Image_based_Password_Strength/style.css new file mode 100644 index 0000000000..e8d7ade42e --- /dev/null +++ b/Frontend-Projects/Image_based_Password_Strength/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); +}