Skip to content

Commit 0424067

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1755 from Devchawla2608/PasswordChecker
Password Checker
2 parents 51d7e55 + 5cf4873 commit 0424067

5 files changed

Lines changed: 167 additions & 0 deletions

File tree

‎Projects/PasswordChecker/Readme.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
Project name and introduction :
2+
Password Checker
3+
4+
Requirements:
5+
This program requires the use of HTML , CSS, JAVASCRIPT .
6+
7+
<h2 align=center>Project Look</h2>
8+
<img src="./img.jpeg" alt=""/><br />
9+
10+
<h3>Project contributor:</h3>
11+
<a href="https://github.com/Devchawla2608">

‎Projects/PasswordChecker/img.jpeg‎

32.6 KB
Loading

‎Projects/PasswordChecker/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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.0">
6+
<title> Password Strength Checker </title>
7+
<link rel="stylesheet" href="./style.css">
8+
<!-- Fontawesome CDN Link -->
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"/>
10+
</head>
11+
<body>
12+
<div class="navbar">
13+
<h1 id="p_heading">Password Checker</h1>
14+
<h1 id="s_heading">How Secure is Your Password?</h1>
15+
</div>
16+
17+
<div class="checker">
18+
<div class="input-box">
19+
<i class="fas fa-eye-slash show_hide"></i>
20+
<input spellcheck="false" type="password" placeholder="Enter password">
21+
</div>
22+
<div class="color_box">
23+
<div class="icon-text">
24+
<i class="fas fa-exclamation-circle error_icon"></i>
25+
<h6 class="text"></h6>
26+
</div>
27+
</div>
28+
</div>
29+
30+
<script src="./index.js"></script>
31+
</body>
32+
</html>

‎Projects/PasswordChecker/index.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
const input = document.querySelector("input"),
2+
showHide = document.querySelector(".show_hide"),
3+
color_box = document.querySelector(".color_box"),
4+
iconText = document.querySelector(".icon-text"),
5+
text = document.querySelector(".text");
6+
7+
showHide.addEventListener("click", ()=>{
8+
if(input.type === "password"){
9+
input.type = "text";
10+
showHide.classList.replace("fa-eye-slash","fa-eye");
11+
}else {
12+
input.type = "password";
13+
showHide.classList.replace("fa-eye","fa-eye-slash");
14+
}
15+
});
16+
17+
let alphabet = /[a-zA-Z]/,
18+
numbers = /[0-9]/,
19+
scharacters = /[!,@,#,$,%,^,&,*,?,_,(,),-,+,=,~]/;
20+
21+
input.addEventListener("keyup", ()=>{
22+
color_box.classList.add("active");
23+
24+
let val = input.value;
25+
if(val.match(alphabet) || val.match(numbers) || val.match(scharacters)){
26+
text.textContent = "Password is weak";
27+
input.style.borderColor = "#FF6333";
28+
showHide.style.color = "#FF6333";
29+
iconText.style.color = "#FF6333";
30+
}
31+
if(val.match(alphabet) && val.match(numbers) && val.length >= 6){
32+
text.textContent = "Password is medium";
33+
input.style.borderColor = "#cc8500";
34+
showHide.style.color = "#cc8500";
35+
iconText.style.color = "#cc8500";
36+
}
37+
if(val.match(alphabet) && val.match(numbers) && val.match(scharacters) && val.length >= 8){
38+
text.textContent = "Password is strong";
39+
input.style.borderColor = "#22C32A";
40+
showHide.style.color = "#22C32A";
41+
iconText.style.color = "#22C32A";
42+
}
43+
if(val == ""){
44+
color_box.classList.remove("active");
45+
input.style.borderColor = "#A6A6A6";
46+
showHide.style.color = "#A6A6A6";
47+
iconText.style.color = "#A6A6A6";
48+
}
49+
});

‎Projects/PasswordChecker/style.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: 'Poppins', sans-serif;
7+
}
8+
body{
9+
height: 100vh;
10+
display: flex;
11+
align-items: center;
12+
justify-content: space-around;
13+
flex-direction: column;
14+
background: #201f21;
15+
border: 2px solid black;
16+
}
17+
.navbar{
18+
color: lightgray;
19+
width: 100%;
20+
height: 150px;
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
flex-direction: column;
25+
}
26+
.checker{
27+
position: relative;
28+
max-width: 460px;
29+
width: 100%;
30+
border-radius: 4px;
31+
padding: 30px;
32+
margin: 0 20px;
33+
}
34+
.checker .input-box{
35+
position: relative;
36+
}
37+
.input-box .show_hide{
38+
position: absolute;
39+
right: 16px;
40+
top: 50%;
41+
transform: translateY(-50%);
42+
color: #A6A6A6;
43+
padding: 5px;
44+
cursor: pointer;
45+
}
46+
.input-box input{
47+
height: 60px;
48+
width: 100%;
49+
border: 2px solid #d3d3d3;
50+
border-radius: 4px;
51+
font-size: 18px;
52+
font-weight: 500;
53+
color: #333;
54+
outline: none;
55+
padding: 0 50px 0 16px;
56+
}
57+
.checker .color_box{
58+
display: none;
59+
}
60+
.checker .color_box.active{
61+
display: block;
62+
margin-top: 14px;
63+
}
64+
.color_box .icon-text{
65+
display: flex;
66+
align-items: center;
67+
}
68+
.icon-text .error_icon{
69+
margin-right: 8px;
70+
}
71+
.icon-text .text{
72+
font-size: 14px;
73+
font-weight: 500;
74+
letter-spacing: 1px;
75+
}

0 commit comments

Comments
 (0)