Skip to content

Commit bde1f5a

Browse files
PBJIPBJI
authored
Merge pull request #905 from Pratikdate/master
Random Password generater
2 parents 68bf25a + aec87e4 commit bde1f5a

File tree

5 files changed

+156
-0
lines changed

5 files changed

+156
-0
lines changed

‎PasswordGenerator/assets/favicon.png

1.55 KB
Loading

‎PasswordGenerator/font/sans.ttf

54.5 KB
Binary file not shown.

‎PasswordGenerator/index.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
<link rel="stylesheet" href="style.css">
8+
<link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon">
9+
<script src="main.js"></script>
10+
<title>Random Password Generator</title>
11+
</head>
12+
<body>
13+
<h2>Random Password Generator</h2>
14+
<div class="inputBox">
15+
<input type="text" name="" placeholder="Create Password" id="password" readonly="">
16+
</div>
17+
<div id="btn" onclick="getPassword();" >Generate Password</div>
18+
19+
<footer>
20+
<p>&#x3c; &#47; &#x3e; with ❤️ by
21+
<a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
22+
<br>
23+
<a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" target="_blank">#30DaysOfJavaScript
24+
</a>
25+
</p>
26+
</footer>
27+
</body>
28+
</html>

‎PasswordGenerator/main.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const words = ['seat', 'pen', 'broad', 'vapor', 'ocean',
2+
'red', 'plate', 'late', 'that', 'ring', 'swim', 'shown',
3+
'path', 'law', 'list', 'hard', 'plate', 'block', 'two',
4+
'pupil', 'were', 'lot', 'pay', 'would', 'tired', 'dull',
5+
'mud', 'sky', 'grew', 'hard', 'ill', 'frame',
6+
'sport', 'did', 'many', 'been', 'page', 'year', 'trail',
7+
'earth', 'are', 'while', 'off', 'town', 'doing', 'size',
8+
'steel', 'sale', 'swam', 'put', 'zero', 'week', 'mill',
9+
'past', 'aside', 'her', 'cent', 'box', 'fuel', 'block',
10+
'those', 'late', 'sun', 'map', 'silk', 'lady', 'meant',
11+
'still', 'shine', 'range', 'loud', 'fox', 'gate', 'slide',
12+
'each', 'nails', 'flag', 'exist', 'door', 'luck', 'down',
13+
'poem', 'depth', 'press', 'crowd', 'herd', 'drink', 'worry',
14+
'dried', 'dig', 'new', 'rest', 'play', 'win', 'strong'];
15+
16+
function getPassword () {
17+
18+
const chars = '0123456789!@#$%&';
19+
const clength = chars.length;
20+
let password = '';
21+
22+
while (password.length < 20) {
23+
password = password.concat(randomWord(chars.length));
24+
password = password.concat(chars[randomNumber(clength)]);
25+
}
26+
password = password.substring(0, 16);
27+
28+
document.getElementById('password').value = password;
29+
}
30+
31+
function randomNumber (l) {
32+
return Math.floor(Math.random() * l);
33+
}
34+
35+
function randomWord () {
36+
const number = randomNumber(words.length);
37+
return words[number];
38+
}

‎PasswordGenerator/style.css

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
font-family: "sans";
5+
user-select: none;
6+
}
7+
8+
@font-face {
9+
src: url("font/sans.ttf");
10+
font-family: "sans";
11+
}
12+
13+
body {
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
min-height: 100vh;
18+
background: #19172e;
19+
}
20+
21+
h2 {
22+
position: absolute;
23+
top: 0;
24+
padding-top: 180px;
25+
color: white;
26+
font-size: 2rem;
27+
text-align: center;
28+
}
29+
30+
.inputBox {
31+
position: relative;
32+
width: 400px;
33+
background: rgba(255, 255, 255, 0.05);
34+
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
35+
z-index: 1000;
36+
border-radius: 20px;
37+
backdrop-filter: blur(20px);
38+
}
39+
40+
.inputBox input {
41+
position: relative;
42+
width: 100%;
43+
height: 60px;
44+
border: none;
45+
margin: 15px 0 15px;
46+
padding: 0 20px;
47+
font-size: 24px;
48+
letter-spacing: 3px;
49+
box-sizing: border-box;
50+
border-radius: 8px;
51+
color: white;
52+
text-align: center;
53+
border-radius: 10px;
54+
background: rgba(255, 255, 255, 0.05);
55+
}
56+
57+
::-webkit-input-placeholder {
58+
text-align: center;
59+
}
60+
61+
#btn {
62+
position: absolute;
63+
cursor: pointer;
64+
color: #fff;
65+
background: #333;
66+
font-size: 24px;
67+
padding: 15px;
68+
border-radius: 8px;
69+
bottom: 0;
70+
margin: 200px auto;
71+
}
72+
73+
#btn:active {
74+
background: #1e8e3e;
75+
}
76+
77+
footer {
78+
text-align: center;
79+
color: white;
80+
font-size: 1rem;
81+
position: absolute;
82+
bottom: 0;
83+
margin-bottom: 0;
84+
padding: 5px;
85+
line-height: 3vh;
86+
}
87+
88+
footer a:visited {
89+
color: inherit;
90+
}

0 commit comments

Comments
 (0)