Move to GitHub

mayanaise · Nov 15, 2023 · b00bd87 · b00bd87
1 parent dda3bf3
commit b00bd87
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.12/tailwind.min.css"
+      integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <title>Password Strength Background</title>
+  </head>
+  <body>
+    <div class="background" id="background"></div>
+    <div class="bg-white rounded p-10 text-center shadow-md">
+      <h1 class="tex-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="password" 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">
+        Submit
+      </button>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,37 @@
+const password = document.getElementById("password")
+const background = document.getElementById("background")
+
+password.addEventListener("input", (e) => {
+  const passwordCheck = "Mon1266"
+  let newPass = passwordCheck.split("")
+  /////////////
+
+  const input = e.target.value
+  const length = input.length
+  const blurValue = 20 - length * 2
+  background.style.filter = `blur(${blurValue}px)`
+
+  /*
+  PSEUDO
+  1. If input[i] === password[i]
+
+  */
+
+  newPass.forEach((el, i) => {
+    if (input[i] === el) {
+      console.log(el)
+    }
+  })
+
+  newPass.forEach((_, i) => {
+    if (input[0] === newPass[0]) {
+      console.log(_)
+    }
+  })
+
+  for (let i = 1; i < newPass.length; i++) {
+    if (input[i] === passwordCheck[i]) {
+      console.log(input[0])
+    }
+  }
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,25 @@
+* {
+    box-sizing: border-box;
+  }
+
+  body {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    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);
+  }