Skip to content

Commit 63a6d97

Browse files
harshita2216harshita2216
authored
Merge pull request #354 from supzi-del/supritha
Added password strength meter
2 parents 4f51e14 + a3d4276 commit 63a6d97

File tree

5 files changed

+265
-0
lines changed

5 files changed

+265
-0
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,3 +139,4 @@ I've used the concept of *Async functions* and *react hook usestate* also worked
139139
| [Age Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Live%20Clock) |It is a simple Javascript project which calculates our age in years.
140140
|[Digital & Analog Clock](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Clock)| It is a simple project built using Javascript which has two clocks, one is Digital Clock and another one is Analog Clock.
141141
| [Insta Clone](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Instagram-clone) |It is a simple clone of instagram front page using react.
142+
|[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" class="input" 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="passwordstrength">
33+
<source src="https://user-images.githubusercontent.com/78655439/128182046-f7baacc3-14f4-41b7-a050-3102a5964a84.mp4">
34+
</video>
35+
36+
<br>
37+
38+

‎Password Strength Meter/script.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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+
17+
if (input.value.length <= 3 && (input.value.match(regExpWeak) || input.value.match(regExpMedium) || input.value.match(regExpStrong))) no = 1;
18+
19+
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;
20+
21+
if (input.value.length >= 6 && input.value.match(regExpWeak) && input.value.match(regExpMedium) && input.value.match(regExpStrong)) no = 3;
22+
23+
if (no == 1) {
24+
weak.classList.add("active");
25+
text.style.display = "block";
26+
text.textContent = "Your password is too weak";
27+
text.classList.add("weak");
28+
}
29+
30+
if (no == 2) {
31+
medium.classList.add("active");
32+
text.textContent = "Your password is average";
33+
text.classList.add("medium");
34+
} else {
35+
medium.classList.remove("active");
36+
text.classList.remove("medium");
37+
}
38+
39+
if (no == 3) {
40+
medium.classList.add("active");
41+
strong.classList.add("active");
42+
text.style.display = "block";
43+
text.textContent = "Your password is strong";
44+
text.classList.add("strong");
45+
} else {
46+
strong.classList.remove("active");
47+
text.classList.remove("strong");
48+
}
49+
50+
showBtn.style.display = "block";
51+
showBtn.onclick = function() {
52+
if (input.type == "password") {
53+
input.type = "text";
54+
showBtn.textContent = "HIDE";
55+
showBtn.style.color = "#23ad5c";
56+
} else {
57+
input.type = "password";
58+
showBtn.textContent = "SHOW";
59+
showBtn.style.color = "#000";
60+
}
61+
}
62+
63+
});
64+

‎Password Strength Meter/style.css

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
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;
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+
align-items: center;
74+
justify-content: space-between;
75+
margin: 10px 0;
76+
display: none;
77+
}
78+
79+
form .indicator span {
80+
width: 100%;
81+
height: 100%;
82+
background: lightgrey;
83+
border-radius: 5px;
84+
position: relative;
85+
}
86+
87+
form .indicator span.medium {
88+
margin: 0 3px;
89+
}
90+
91+
form .indicator span:before {
92+
content: "";
93+
position: absolute;
94+
top: 0;
95+
left: 0;
96+
height: 100%;
97+
width: 100%;
98+
border-radius: 5px;
99+
}
100+
101+
form .indicator span.active.weak:before {
102+
background-color: #dbc4df;
103+
}
104+
105+
form .indicator span.active.medium:before {
106+
background-color: #ce9dd9;
107+
}
108+
109+
form .indicator span.active.strong:before {
110+
background-color: #ba55d3;
111+
}
112+
113+
form .text {
114+
font-size: 20px;
115+
font-weight: 550;
116+
margin-bottom: -10px;
117+
display: none;
118+
}
119+
120+
form .text.weak {
121+
color: #dbc4df;
122+
}
123+
124+
form .text.medium {
125+
color: #ce9dd9;
126+
}
127+
128+
form .text.strong {
129+
color: #ba55d3;
130+
}
131+
132+

0 commit comments

Comments
 (0)