passwordStrength-Calculator

Rakesh9100 · May 10, 2024 · 9a3dc83 · 9a3dc83
1 parent 22c3c46
commit 9a3dc83
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 0 deletions.
diff --git a/Calculators/PasswordStrength-Calculator/README.md b/Calculators/PasswordStrength-Calculator/README.md
@@ -0,0 +1,20 @@
+# <p align="center">Password Strength Calculator</p>
+
+## Description :-
+
+This is a simple website that checks whether a entered password is how much effective.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+> Checks for single words and phrases (including spaces and punctuation).
+Displays in ranges weak medium strong very-strong based on the users input
+
+
+## Screenshots :-
+
diff --git a/Calculators/PasswordStrength-Calculator/app.js b/Calculators/PasswordStrength-Calculator/app.js
@@ -0,0 +1,88 @@
+const passwordInput = document.getElementById('password');
+    const strengthText = document.getElementById('strength');
+    const feedbackText = document.getElementById('feedback');
+    const bars = document.querySelectorAll('.bar');
+
+    passwordInput.addEventListener('input', function() {
+      const password = passwordInput.value;
+      const strength = calculatePasswordStrength(password);
+      updatePasswordStrengthUI(strength);
+      updateFeedbackText(strength);
+    });
+
+    function calculatePasswordStrength(password) {
+      let strength = 0;
+
+      // Check length
+      if (password.length >= 8) {
+        strength += 1;
+      }
+
+      // Check for uppercase letters
+      if (/[A-Z]/.test(password)) {
+        strength += 1;
+      }
+
+      // Check for lowercase letters
+      if (/[a-z]/.test(password)) {
+        strength += 1;
+      }
+
+      // Check for numbers
+      if (/\d/.test(password)) {
+        strength += 1;
+      }
+
+      // Check for special characters
+      if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+        strength += 1;
+      }
+
+      return strength;
+    }
+
+    function updatePasswordStrengthUI(strength) {
+      strengthText.textContent = `Strength: ${strength}/5`;
+
+      bars.forEach((bar, index) => {
+        bar.classList.remove('weak', 'medium', 'strong', 'very-strong');
+        if (index < strength) {
+          if (strength <= 1) {
+            bar.classList.add('weak');
+          } else if (strength === 2) {
+            bar.classList.add('medium');
+          } else if (strength === 3) {
+            bar.classList.add('strong');
+          } else {
+            bar.classList.add('very-strong');
+          }
+        }
+      });
+    }
+
+    function updateFeedbackText(strength) {
+      let feedback = '';
+      switch (strength) {
+        case 0:
+          feedback = '';
+          break;
+        case 1:
+          feedback = 'Very Weak: Password must be at least 8 characters long.';
+          break;
+        case 2:
+          feedback = 'Weak: Add uppercase, lowercase letters, numbers or special characters to improve strength.';
+          break;
+        case 3:
+          feedback = 'Medium: Password is decent, but can be improved with a mix of characters.';
+          break;
+        case 4:
+          feedback = 'Strong: Password is strong, but adding more variety of characters can make it stronger.';
+          break;
+        case 5:
+          feedback = 'Very Strong: Password is very strong! Well done.';
+          break;
+        default:
+          feedback = '';
+      }
+      feedbackText.textContent = feedback;
+    }
diff --git a/Calculators/PasswordStrength-Calculator/index.html b/Calculators/PasswordStrength-Calculator/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Password Strength Calculator</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <h2 style="text-align: center; margin-bottom: 20px;">Password Strength Calculator</h2>
+    <input type="password" id="password" placeholder="Enter your password">
+    <div id="strength"></div>
+    <div class="bar-container">
+      <div class="bar weak"></div>
+      <div class="bar medium"></div>
+      <div class="bar strong"></div>
+      <div class="bar very-strong"></div>
+    </div>
+    <div class="feedback" id="feedback">Password feedback will appear here</div>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/Calculators/PasswordStrength-Calculator/style.css b/Calculators/PasswordStrength-Calculator/style.css
@@ -0,0 +1,66 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f5f5f5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: blanchedalmond;
+  }
+  .container {
+    width: 350px;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0,0,0,0.1);
+  }
+  input[type="password"] {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    transition: border-color 0.3s;
+  }
+  input[type="password"]:focus {
+    border-color: dodgerblue;
+  }
+  #strength {
+    margin-top: 10px;
+    font-weight: bold;
+    text-align: center;
+    color: #555;
+  }
+  .bar-container {
+    display: flex;
+    align-items: center;
+    margin-top: 15px;
+  }
+  .bar {
+    flex-grow: 1;
+    height: 10px;
+    border-radius: 5px;
+    margin-right: 5px;
+  }
+  .bar.weak {
+    background-color: #ff6347; /* Tomato */
+  }
+  .bar.medium {
+    background-color: #ffa500; /* Orange */
+  }
+  .bar.strong {
+    background-color: #ffd700; /* Gold */
+  }
+  .bar.very-strong {
+    background-color: #7fff00; /* Chartreuse */
+  }
+  .feedback {
+    margin-top: 10px;
+    font-size: 14px;
+    text-align: center;
+  }
+  .container{
+    height: 300px;
+    background:linear-gradient(rgb(215, 215, 232),rgb(90, 83, 83));
+    padding:30px;
+  }