Skip to content
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

Jump to bottom

Added Password Strength Calculator #654

Closed
wants to merge 3 commits into from
Closed

Added Password Strength Calculator #654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9a3dc83
passwordStrength-Calculator
cxde-Sujal May 10, 2024
f7a5f5c
pass strength calculator
cxde-Sujal May 10, 2024
f958935
password-strengthChecker
cxde-Sujal May 10, 2024
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
22 changes: 22 additions & 0 deletions Calculators/PasswordStrength-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# <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 :-
![Screenshot (142)](https://github.com/Rakesh9100/CalcDiverse/assets/137087363/ba95ecc9-3158-4747-8c3e-e92111f52876)


88 changes: 88 additions & 0 deletions Calculators/PasswordStrength-Calculator/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
25 changes: 25 additions & 0 deletions Calculators/PasswordStrength-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
66 changes: 66 additions & 0 deletions Calculators/PasswordStrength-Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
14 changes: 14 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,20 @@ <h3>Calculates the area and perimeter of different useful 2D shapes.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Password Strength Calculator</h2>
<h3>Calculates password strength.</h3>
<div class="card-footer">
<a href="./Calculators/PasswordStrength-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/PasswordStrength-Calculator" title="Source Code" target="_blank">
<img src="./assets/images/github.png" alt="Source Code"></img>
</a>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>3D Shapes Volume Calculator</h2>
Expand Down
Loading