Skip to content

Commit 2c6117b

Browse files
PBJIPBJI
authored
Merge pull request #926 from Shuklaaa/master
Add PasswordStrengthChecker
2 parents 8f29178 + bb94994 commit 2c6117b

File tree

7 files changed

+224
-0
lines changed

7 files changed

+224
-0
lines changed

‎PasswordStrengthChecker/Shuklaaa/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
#PASSWORD STRENGTH CHECKER
2+
3+
##Overview
4+
The Password Strength Checker is a web application built using HTML, CSS, and JavaScript. It provides a user-friendly interface for assessing the strength of passwords. Users can input a password, and the application will evaluate its strength based on various criteria.
5+
6+
##Features
7+
- Password Input: Users can enter a password into the application.
8+
- Strength Evaluation: The application assesses the strength of the password based on criteria such as length, complexity, and character types.
9+
- Strength Indicator: A visual or textual indicator is provided to show the strength of the password (e.g., Weak, Medium, Strong).
10+
- User-Friendly: The interface is designed to be user-friendly and intuitive, making it easy for users to understand the strength of their passwords.
11+
- Styling and Presentation: The application is styled with CSS to ensure a pleasant and visually appealing user experience.
12+
13+
##SCREENSHOTS
14+
![Alt text](image.png)
15+
![Alt text](image-1.png)
16+
![Alt text](image-2.png)
17+

‎PasswordStrengthChecker/Shuklaaa/image-1.png‎

53.5 KB
Loading

‎PasswordStrengthChecker/Shuklaaa/image-2.png‎

51.4 KB
Loading

‎PasswordStrengthChecker/Shuklaaa/image.png‎

47.3 KB
Loading

‎PasswordStrengthChecker/Shuklaaa/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Password Strength Checker</title>
8+
<link rel="stylesheet" href="./style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h2>Password Strength Checker</h2>
13+
<div class="inputBox">
14+
<input type="password" placeholder="Enter your password" id="myPassword">
15+
<div class="show"></div>
16+
</div>
17+
<div class="strengthMeter"></div>
18+
</div>
19+
<script src="./script.js"></script>
20+
</body>
21+
</html>

‎PasswordStrengthChecker/Shuklaaa/script.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
function Strength(password){
2+
let i = 0;
3+
if(password.length > 6){
4+
i++;
5+
}
6+
if(password.length >= 10){
7+
i++;
8+
}
9+
if(/[A-Z]/.test(password)){
10+
i++;
11+
}
12+
if(/[0-9]/.test(password)){
13+
i++;
14+
}
15+
if(/[A-Za-z0-8]/.test(password)){
16+
i++;
17+
}
18+
return i;
19+
}
20+
21+
let container = document.querySelector('.container');
22+
document.addEventListener("keyup", function(e){
23+
let password = document.querySelector('#myPassword').value;
24+
25+
let strength = Strength(password);
26+
if(strength <= 2){
27+
container.classList.add('weak');
28+
container.classList.remove('medium');
29+
container.classList.remove('strong');
30+
}
31+
else if(strength >= 2 && strength <= 4){
32+
container.classList.remove('weak');
33+
container.classList.add('medium');
34+
container.classList.remove('strong');
35+
}
36+
else{
37+
container.classList.remove('weak');
38+
container.classList.remove('medium');
39+
container.classList.add('strong');
40+
}
41+
})
42+
43+
let pswrd = document.querySelector('#myPassword');
44+
let show = document.querySelector('.show');
45+
46+
show.onclick = function(){
47+
if(pswrd.type === 'password'){
48+
pswrd.setAttribute('type', 'text');
49+
show.classList.add('hide');
50+
}
51+
52+
else{
53+
pswrd.setAttribute('type', 'password');
54+
show.classList.remove('hide');
55+
}
56+
}

‎PasswordStrengthChecker/Shuklaaa/style.css‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
*
2+
{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
7+
}
8+
9+
body{
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
min-height: 100vh;
14+
background: #222;
15+
}
16+
17+
.container{
18+
position: relative;
19+
width: 400px;
20+
padding: 30px;
21+
background: #333;
22+
display: flex;
23+
justify-content: center;
24+
flex-direction: column;
25+
border: 1px solid #111;
26+
gap: 10px;
27+
padding-bottom: 70px;
28+
-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0005);
29+
}
30+
.container h2{
31+
color: #666;
32+
font-weight: 500;
33+
}
34+
35+
.container .inputBox{
36+
position: relative;
37+
width: 100%;
38+
}
39+
.container .inputBox input{
40+
position: relative;
41+
width: 100%;
42+
background: #222;
43+
border: none;
44+
outline: none;
45+
padding: 10px;
46+
color: #fff;
47+
font-size: 1.1em;
48+
}
49+
50+
.container .strengthMeter{
51+
position: absolute;
52+
bottom: 0;
53+
left: 0;
54+
width: 100%;
55+
height: 3px;
56+
background: #222;
57+
}
58+
.container .strengthMeter::before{
59+
content: '';
60+
position: absolute;
61+
width: 0%;
62+
height: 100%;
63+
transition: 0.5s;
64+
background: #f00;
65+
}
66+
67+
68+
.container.weak .strengthMeter::before{
69+
width: 10%;
70+
background: #f00;
71+
filter: drop-shadow(0 0 5px #f00) drop-shadow(0 0 10px #f00) drop-shadow(0 0 20px #f00);
72+
}
73+
.container.medium .strengthMeter::before{
74+
width: 66.66%;
75+
background: #ffa500;
76+
filter: drop-shadow(0 0 5px #ffa500) drop-shadow(0 0 10px #ffa500) drop-shadow(0 0 20px #ffa500);
77+
}
78+
.container.strong .strengthMeter::before{
79+
width: 100%;
80+
background: #0f0;
81+
filter: drop-shadow(0 0 5px #0f0) drop-shadow(0 0 10px #0f0) drop-shadow(0 0 20px #0f0);
82+
}
83+
84+
.container .strengthMeter::after{
85+
position: absolute;
86+
top: -45px;
87+
left: 30px;
88+
color: #fff;
89+
transition: 0.5s;
90+
}
91+
.container.weak .strengthMeter::after{
92+
content: 'Your password is weak';
93+
color: #f00;
94+
filter: drop-shadow(0 0 5px #f00);
95+
}
96+
.container.medium .strengthMeter::after{
97+
content: 'Your password is medium';
98+
color: #ffa500;
99+
filter: drop-shadow(0 0 5px #ffa500);
100+
}
101+
.container.strong .strengthMeter::after{
102+
content: 'Your password is strong';
103+
color: #0f0;
104+
filter: drop-shadow(0 0 5px #0f0);
105+
}
106+
107+
.show{
108+
position: absolute;
109+
top: 0;
110+
right: 0;
111+
width: 60px;
112+
height: 100%;
113+
background: #333;
114+
border: 5px solid #222;
115+
cursor: pointer;
116+
display: flex;
117+
justify-content: center;
118+
align-items: center;
119+
}
120+
.show::before{
121+
content: 'Show';
122+
font-size: 0.6em;
123+
color: #fff;
124+
letter-spacing: 0.10em;
125+
text-transform: uppercase;
126+
}
127+
128+
.show.hide::before{
129+
content: 'Hide';
130+
}

0 commit comments

Comments
 (0)