Skip to content

Commit 607ee34

Browse files
supzi-delsupzi-del
committed
Added password strength meter
1 parent 44755c7 commit 607ee34

File tree

5 files changed

+273
-0
lines changed

5 files changed

+273
-0
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,3 +134,4 @@ I've used the concept of *Async functions* and *react hook usestate* also worked
134134
|[Good Vibes Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Good-Vibes-Form)| It is a simple and responsive form which can be used in any project.
135135
|[Survey Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Survey-Form)| It is a simple and responsive urvey-Form.
136136
|[React Pizza App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/react-tailwind-app)| It is a simple pizza react app using TailwindCSS.
137+
|[Password Strength Meter](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Password%20Strength%20Meter)| Checks the strength of a password if it is strong, average or weak.

‎Password Strength Meter/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Password Strength Meter</title>
7+
<meta name="description" content="Checks the strength of Password">
8+
<meta name="author" content="Supritha">
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<body>
12+
<div class="container">
13+
<header>Password Strength Meter<br></header>
14+
<form action="#">
15+
<div class="field"><input id="trigger" type="password" placeholder="Type your password"><span class="showBtn">SHOW</span></div>
16+
<!--field-->
17+
<div class="indicator">
18+
<span class="weak"></span>
19+
<span class="medium"></span>
20+
<span class="strong"></span>
21+
</div>
22+
<!--indicator-->
23+
<div class="text"></div>
24+
</form>
25+
</div>
26+
<!--container-->
27+
<script src="script.js"></script>
28+
</body>
29+
</html>
30+

‎Password Strength Meter/readme.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<h1>Password Strength Meter</h1>
2+
3+
<p>Checks the strength of a password if it is strong, average or weak.</p>
4+
5+
### Use of the Project:
6+
7+
<p>User enters a password, the app shows weak password for just letters, average password for letters and numbers and strong password for letters, numbers and special characters.</p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Start Checking!
29+
30+
<h3> Video Demo </h3>
31+
32+
<video controls width="960" alt="">
33+
<source src="">
34+
</video>
35+
36+
<br>
37+
38+

‎Password Strength Meter/script.js

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
const indicator = document.querySelector(".indicator");
2+
const input = document.querySelector("input");
3+
const showBtn = document.querySelector(".showBtn")
4+
const weak = document.querySelector(".weak");
5+
const medium = document.querySelector(".medium");
6+
const strong = document.querySelector(".strong");
7+
const text = document.querySelector(".text");
8+
9+
let regExpWeak = /[a-z]/;
10+
let regExpMedium = /\d+/;
11+
let regExpStrong = /.[!,@,#,$,%,^,&,*,(,)]/;
12+
13+
14+
15+
document.getElementById("trigger").addEventListener("keyup", function() {
16+
if (input.value != "") {
17+
indicator.style.display = "block";
18+
indicator.style.display = "flex";
19+
20+
if (input.value.length <= 3 && (input.value.match(regExpWeak) || input.value.match(regExpMedium) || input.value.match(regExpStrong))) no = 1;
21+
22+
if (input.value.length >= 6 && ((input.value.match(regExpWeak) && input.value.match(regExpMedium)) || (input.value.match(regExpMedium) && input.value.match(regExpStrong)) || (input.value.match(regExpWeak) && input.value.match(regExpStrong)))) no = 2;
23+
24+
if (input.value.length >= 6 && input.value.match(regExpWeak) && input.value.match(regExpMedium) && input.value.match(regExpStrong)) no = 3;
25+
26+
if (no == 1) {
27+
weak.classList.add("active");
28+
text.style.display = "block";
29+
text.textContent = "Your password is too weak";
30+
text.classList.add("weak");
31+
}
32+
33+
if (no == 2) {
34+
medium.classList.add("active");
35+
text.textContent = "Your password is average";
36+
text.classList.add("medium");
37+
} else {
38+
medium.classList.remove("active");
39+
text.classList.remove("medium");
40+
}
41+
42+
if (no == 3) {
43+
medium.classList.add("active");
44+
strong.classList.add("active");
45+
text.style.display = "block";
46+
text.textContent = "Your password is strong";
47+
text.classList.add("strong");
48+
} else {
49+
strong.classList.remove("active");
50+
text.classList.remove("strong");
51+
}
52+
53+
showBtn.style.display = "block";
54+
showBtn.onclick = function() {
55+
if (input.type == "password") {
56+
input.type = "text";
57+
showBtn.textContent = "HIDE";
58+
showBtn.style.color = "#23ad5c";
59+
} else {
60+
input.type = "password";
61+
showBtn.textContent = "SHOW";
62+
showBtn.style.color = "#000";
63+
}
64+
}
65+
} else {
66+
indicator.style.display = "none";
67+
text.style.display = "none";
68+
showBtn.style.display = "none";
69+
}
70+
});
71+

‎Password Strength Meter/style.css

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "Poppins", "Courier New";
6+
}
7+
8+
html,
9+
body {
10+
display: grid;
11+
height: 100%;
12+
text-align: center;
13+
place-items: center;
14+
background: #f2f2f2;
15+
}
16+
17+
.container {
18+
background: #000;
19+
width: 420px;
20+
padding: 20px 30px;
21+
border-radius: 5px;
22+
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
23+
transform: scale(1.3);
24+
}
25+
26+
.container header {
27+
font-size: 24px;
28+
font-weight: 700;
29+
line-height: 33px;
30+
color: #97e5d7;
31+
}
32+
33+
.container form {
34+
margin: 20px 5px 10px 5px;
35+
}
36+
37+
form .field {
38+
height: 45px;
39+
width: 100%;
40+
display: flex;
41+
position: relative;
42+
}
43+
44+
form .field input {
45+
height: 100%;
46+
width: 100%;
47+
border: 2px solid lightgrey;
48+
padding-left: 15px;
49+
border-radius: 5px;
50+
font-size: 15px;
51+
outline: none;
52+
transition: all 0.2s;
53+
}
54+
55+
form .field input:focus {
56+
border-color: #97e5d7;
57+
box-shadow: inset 0 0 3px #2fd072;
58+
}
59+
60+
form .field .showBtn {
61+
position: absolute;
62+
right: 10px;
63+
top: 50%;
64+
transform: translateY(-50%);
65+
font-weight: 600;
66+
font-size: 15px;
67+
cursor: pointer;
68+
display: none;
69+
}
70+
71+
form .indicator {
72+
height: 10px;
73+
display: flex;
74+
align-items: center;
75+
justify-content: space-between;
76+
margin: 10px 0;
77+
display: none;
78+
}
79+
80+
form .indicator span {
81+
width: 100%;
82+
height: 100%;
83+
background: lightgrey;
84+
border-radius: 5px;
85+
position: relative;
86+
}
87+
88+
form .indicator span.medium {
89+
margin: 0 3px;
90+
}
91+
92+
form .indicator span:before {
93+
content: "";
94+
position: absolute;
95+
top: 0;
96+
left: 0;
97+
height: 100%;
98+
width: 100%;
99+
border-radius: 5px;
100+
}
101+
102+
form .indicator span.active.weak:before {
103+
background-color: #dbc4df;
104+
}
105+
106+
form .indicator span.active.medium:before {
107+
background-color: #ce9dd9;
108+
}
109+
110+
form .indicator span.active.strong:before {
111+
background-color: #ba55d3;
112+
}
113+
114+
form .text {
115+
font-size: 20px;
116+
font-weight: 550;
117+
margin-bottom: -10px;
118+
display: none;
119+
}
120+
121+
form .text.weak {
122+
color: #dbc4df;
123+
}
124+
125+
form .text.medium {
126+
color: #ce9dd9;
127+
}
128+
129+
form .text.strong {
130+
color: #ba55d3;
131+
}
132+
133+

0 commit comments

Comments
 (0)