Skip to content

feat: add password strength analyzer tool (#836) #837

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
praveenscience merged 1 commit into from
Sep 19, 2026
Merged

feat: add password strength analyzer tool (#836) #837

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions data/tools.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3969,6 +3969,29 @@
],
"difficulty": "Easy",
"status": "live"
},
{
"id": "password-analyzer-uncodebar",
"name": "Password Strength Analyzer Uncodebar",
"shortDescription": "Evaluate password complexity against standard security rules with an integrated random strong password generator",
"longDescription": "Evaluate password complexity against standard security rules with an integrated random strong password generator.",
"category": "Security",
"tags": [
"generator",
"offline",
"password",
"privacy",
"security",
"utility"
],
"techStack": [
"Crypto API",
"CSS3",
"HTML5",
"Vanilla JS"
],
"difficulty": "Easy",
"status": "live"
}
]
}
186 changes: 186 additions & 0 deletions tools/password-analyzer-uncodebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Strength Analyzer</title>
<!-- Tailwind CSS via CDN -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style>
/* Custom smooth transition for the strength bar */
.strength-bar { transition: width 0.4s ease-in-out, background-color 0.4s ease; }
</style>
</head>
<body class="bg-slate-900 text-slate-100 min-h-screen flex items-center justify-center p-4">

<div class="w-full max-w-md bg-slate-800 rounded-2xl shadow-xl border border-slate-700 p-6 space-y-6">

<!-- Header -->
<div class="text-center">
<h1 class="text-2xl font-bold tracking-tight text-white">Password Analyzer</h1>
<p class="text-sm text-slate-400 mt-1">Check your password security instantly</p>
</div>

<!-- Input Field -->
<div class="space-y-2">
<label for="passwordInput" class="text-xs font-semibold uppercase tracking-wider text-slate-400">Enter Password</label>
<div class="relative">
<input type="password" id="passwordInput" placeholder="Type a password..."
class="w-full bg-slate-950 border border-slate-700 rounded-lg px-4 py-3 pr-10 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
<button id="toggleVisibility" class="absolute right-3 top-3.5 text-slate-400 hover:text-slate-200 focus:outline-none text-sm">
👁️
</button>
</div>
</div>

<!-- Strength Meter Visual -->
<div class="space-y-2">
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">Strength:</span>
<span id="strengthText" class="font-bold text-slate-500">Empty</span>
</div>
<div class="h-2 w-full bg-slate-950 rounded-full overflow-hidden">
<div id="strengthBar" class="strength-bar h-full w-0 bg-slate-500"></div>
</div>
<p id="feedbackText" class="text-xs text-slate-400 italic mt-1"></p>
</div>

<!-- Requirements Checklist -->
<div class="bg-slate-950/50 rounded-xl p-4 border border-slate-700/50 space-y-2.5">
<h3 class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-1">Security Requirements</h3>
<div id="req-length" class="flex items-center text-sm text-slate-400">
<span class="mr-2 text-xs">❌</span> At least 8 characters
</div>
<div id="req-upper" class="flex items-center text-sm text-slate-400">
<span class="mr-2 text-xs">❌</span> Includes uppercase letter (A-Z)
</div>
<div id="req-lower" class="flex items-center text-sm text-slate-400">
<span class="mr-2 text-xs">❌</span> Includes lowercase letter (a-z)
</div>
<div id="req-number" class="flex items-center text-sm text-slate-400">
<span class="mr-2 text-xs">❌</span> Includes a number (0-9)
</div>
<div id="req-special" class="flex items-center text-sm text-slate-400">
<span class="mr-2 text-xs">❌</span> Includes special character (!@#\$%^&*)
</div>
</div>

<!-- Generator Button -->
<div class="pt-2">
<button id="generateBtn" class="w-full bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors flex items-center justify-center gap-2">
⚡ Generate Strong Password
</button>
</div>

</div>

<!-- JavaScript logic -->
<script>
const passwordInput = document.getElementById('passwordInput');
const toggleVisibility = document.getElementById('toggleVisibility');
const strengthText = document.getElementById('strengthText');
const strengthBar = document.getElementById('strengthBar');
const feedbackText = document.getElementById('feedbackText');
const generateBtn = document.getElementById('generateBtn');

const requirements = {
length: { regex: /.{8,}/, element: document.getElementById('req-length') },
upper: { regex: /[A-Z]/, element: document.getElementById('req-upper') },
lower: { regex: /[a-z]/, element: document.getElementById('req-lower') },
number: { regex: /[0-9]/, element: document.getElementById('req-number') },
special: { regex: /[^A-Za-z0-9]/, element: document.getElementById('req-special') }
};

// Analyze password logic
function analyzePassword() {
const password = passwordInput.value;
let score = 0;

if (password.length === 0) {
updateUI(0, 'Empty', 'bg-slate-500', 'Enter a password to test its strength.');
resetChecklist();
return;
}

// Check requirements and update checklist
for (const key in requirements) {
const isValid = requirements[key].regex.test(password);
if (isValid) {
score++;
requirements[key].element.classList.remove('text-slate-400');
requirements[key].element.classList.add('text-emerald-400');
requirements[key].element.querySelector('span').textContent = '✅';
} else {
requirements[key].element.classList.remove('text-emerald-400');
requirements[key].element.classList.add('text-slate-400');
requirements[key].element.querySelector('span').textContent = '❌';
}
}

// Adjust scores based on context
if (password.length >= 16 && score >= 4) score = 5; // Bonus for exceptional length

// Map score to UX presentation
switch (score) {
case 1:
updateUI(20, 'Very Weak', 'bg-red-500', 'Add more variety and length to protect your account.');
break;
case 2:
updateUI(40, 'Weak', 'bg-orange-500', 'Still highly guessable. Try adding numbers or symbols.');
break;
case 3:
updateUI(60, 'Medium', 'bg-yellow-500', 'Decent, but adding more unique characters makes it safer.');
break;
case 4:
updateUI(80, 'Strong', 'bg-emerald-500', 'Great password! Hard to crack.');
break;
case 5:
updateUI(100, 'Excellent', 'bg-teal-400 shadow-[0_0_12px_rgba(45,212,191,0.4)]', 'Superb! Highly secure structure.');
break;
}
}

function updateUI(widthPercent, text, colorClass, feedback) {
strengthBar.style.width = `${widthPercent}%`;
strengthBar.className = `strength-bar h-full ${colorClass}`;
strengthText.textContent = text;
strengthText.className = `font-bold text-sm ${colorClass.split(' ')[0].replace('bg-', 'text-')}`;
feedbackText.textContent = feedback;
}

function resetChecklist() {
for (const key in requirements) {
requirements[key].element.classList.remove('text-emerald-400');
requirements[key].element.classList.add('text-slate-400');
requirements[key].element.querySelector('span').textContent = '❌';
}
}

// Toggle text visibility
toggleVisibility.addEventListener('click', () => {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
toggleVisibility.textContent = '🙈';
} else {
passwordInput.type = 'password';
toggleVisibility.textContent = '👁️';
}
});

// Generate strong password
generateBtn.addEventListener('click', () => {
const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#\$%^&*()_+~}{[]';
let generated = '';
// Ensure criteria are easily met by grabbing random chunks
for (let i = 0; i < 16; i++) {
generated += chars.charAt(Math.floor(Math.random() * chars.length));
}
passwordInput.value = generated;
analyzePassword();
});

// Event listener
passwordInput.addEventListener('input', analyzePassword);
</script>
</body>
</html>
Binary file added tools/password-analyzer-uncodebar.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading