pranjay-poddar · Shreyas-SAS · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023
diff --git a/Frontend-Projects/Image_based_Password_Strength/README.md 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. <br>
+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. 
+
+
+<br>
+
+## **Tech Stack 🎮**
+
+- HTML
+- CSS
+- JS
+- Tailwind CSS - Optional (very small role, used to give a preview to new developers)
+
+
+<br>
+
+## **Screenshots 📸**
+
+![image](https://github.com/Shreyas-SAS/Dev-Geeks/assets/96542494/54fb53dc-16a4-4c0e-8004-ee2e5634aa18)
+
+
+<br>
+
+## **Developed by 👦**
+
+[Shreyas Sukhadeve](https://github.com/Shreyas-SAS)
+
+<br>
+
+### **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
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <!-- we will add a small section of tailwind CSS to make this project just a little spicy. Below is how to include that. -->
+ <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"
+ />
+ <!-- our custom stylesheet -->
+ <link rel="stylesheet" href="style.css" />
+ <title>Password Strength Backround</title>
+ </head>
+
+ <body> <!-- creating a basic form -->
+ <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>
+ <!-- adding javascript file -->
+ <script src="script.js"></script>
+ </body>
+</html>
diff --git a/Frontend-Projects/Image_based_Password_Strength/script.js 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
@@ -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);
+}