Skip to content

Commit 5c34343

Browse files
pabitra0011pabitra0011
committed
Add random password generator
1 parent 9e6b636 commit 5c34343

File tree

3 files changed

+361
-0
lines changed

3 files changed

+361
-0
lines changed

‎randomPassword/randomPassword/pabitra0011/index.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
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 generator</title>
7+
8+
<link rel="stylesheet" href="style.css">
9+
10+
</head>
11+
<body>
12+
13+
<!-- ============= header section=================== -->
14+
<header>
15+
<div class="logo">passLetter</div>
16+
<div class="navlist">
17+
<ul>
18+
<li><a href="">Product</a></li>
19+
<li><a href="">Resources</a></li>
20+
<li><a href="">Support</a></li>
21+
</ul>
22+
</div>
23+
</div>
24+
25+
</header>
26+
27+
<!-- =========== password generating section ================= -->
28+
<main class="password-section">
29+
<div class="password-section-container">
30+
<h1>Generate a Strong Brand New PassWord to Secure Your Digital World</h1>
31+
<div class="password-generator-container">
32+
<div class="password-container">
33+
<h2>Generated password: 👇</h2>
34+
<div class="password">
35+
<h2> </h2>
36+
</div>
37+
<div class="generator-btns">
38+
<button class="generate-btn">Genereate</button>
39+
<button class="copy-btn">copy</button>
40+
</div>
41+
<p class="copy-text-alert">Password Copied</p>
42+
</div>
43+
44+
<div class="customization-section">
45+
<div class="length-section">
46+
<label for="">Length</label>
47+
<input type="range" id="length" min="8" max="80" value="12">
48+
<p id="rangevalue">12</p>
49+
</div>
50+
<div class="num">
51+
<input type="checkbox" id="number">
52+
<label for="">Numbers</label>
53+
<input type="checkbox" id="uppercase">
54+
<label for="">UpperCase</label>
55+
</div>
56+
<div class="symbol">
57+
<input type="checkbox" id="symbol">
58+
<label for="">Symbol</label>
59+
<input type="checkbox" id="lowercase">
60+
<label for="">Lowercase</label>
61+
</div>
62+
</div>
63+
</div>
64+
65+
</div>
66+
</main>
67+
68+
69+
70+
71+
<script src="main.js"></script>
72+
</body>
73+
</html>

‎randomPassword/randomPassword/pabitra0011/main.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
2+
3+
// ============= All variables ========================
4+
const passwordContainer = document.querySelector(".password h2");
5+
const generateBtn = document.querySelector(".generate-btn")
6+
const copyBtn = document.querySelector(".copy-btn")
7+
const checkNumber = document.getElementById("number")
8+
const checkSymbol = document.getElementById("symbol")
9+
const checkUpper = document.getElementById("uppercase")
10+
const checkLower = document.getElementById("lowercase")
11+
12+
const lengthValue = document.getElementById("rangevalue")
13+
const lengthBtn = document.getElementById("length")
14+
15+
const coiped = document.querySelector(".copy-text-alert")
16+
17+
18+
// =========== get length value for password =================
19+
let length = 12
20+
lengthBtn.addEventListener("input", () => {
21+
lengthValue.innerText = lengthBtn.value;
22+
length = lengthValue.innerText
23+
})
24+
25+
// function for create new password ///////////////////////////
26+
checkLower.checked = true; // generate lowercase passward by default..
27+
28+
const createNewPassword = (len) => {
29+
let res = ''
30+
let chars = '';
31+
// below conditions for catomization password type ....
32+
if (checkNumber.checked) {
33+
chars += '0123456729850589'
34+
}
35+
if (checkSymbol.checked) {
36+
chars += '!@#$%^&*?/.,=+-_'
37+
}
38+
if (checkUpper.checked) {
39+
chars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
40+
}
41+
if (checkLower.checked) {
42+
chars += 'abcdefghijklmnopqrstuvwxyz'
43+
}
44+
45+
let c = 0;
46+
while (c < len) {
47+
res += chars.charAt(Math.floor(Math.random() * chars.length))
48+
c++;
49+
}
50+
51+
return res;
52+
}
53+
54+
55+
generateBtn.addEventListener("click", () => {
56+
passwordContainer.textContent = createNewPassword(length)
57+
})
58+
59+
// ................. for copy password . . . .......................
60+
61+
copyBtn.addEventListener("click", () => {
62+
const txt = passwordContainer.textContent;
63+
// console.log(txt);
64+
navigator.clipboard.writeText(txt);
65+
66+
coiped.style.display = "block"
67+
setTimeout(function () {
68+
coiped.style.display = "none"
69+
}, 1000);
70+
71+
})
72+

‎randomPassword/randomPassword/pabitra0011/style.css‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
a {
8+
text-decoration: none;
9+
}
10+
11+
li {
12+
list-style: none;
13+
}
14+
15+
/* header ............................... */
16+
header {
17+
background-color: rgb(8, 32, 110);
18+
display: flex;
19+
justify-content: space-between;
20+
flex-wrap: wrap;
21+
padding: 1.5rem;
22+
}
23+
24+
.logo {
25+
font-size: 2.5rem;
26+
color: red;
27+
}
28+
29+
.navlist ul {
30+
display: flex;
31+
}
32+
33+
.navlist ul li {
34+
/* border: 1px solid red; */
35+
margin: 0 0.5rem;
36+
}
37+
38+
.navlist ul li a {
39+
font-size: 1.5rem;
40+
color: white;
41+
}
42+
43+
.header-right {
44+
display: flex;
45+
gap: 2rem;
46+
}
47+
48+
49+
/* main seciton ...................................... */
50+
51+
.password-section {
52+
background-color: #063e5e;
53+
border-radius: 0% 0 0 0;
54+
}
55+
56+
/* .password-section::before{
57+
content: '';
58+
position: absolute;
59+
top: 0;
60+
left: 0;
61+
width: 100%;
62+
height: 100%;
63+
background: #063e5e;
64+
z-index: -1;
65+
border-radius: 0 0 50% 50%;
66+
transform: scale(1.5);
67+
} */
68+
.password-section-container {
69+
max-width: 70vw;
70+
margin: auto;
71+
padding: 5rem 0;
72+
}
73+
74+
.password-section-container h1 {
75+
color: white;
76+
text-align: center;
77+
}
78+
79+
.password-generator-container {
80+
padding: 5rem 0;
81+
}
82+
83+
.password-container h2 {
84+
color: rgb(255, 199, 57);
85+
}
86+
87+
.password {
88+
background-color: white;
89+
padding: 1rem;
90+
border-radius: 15px;
91+
text-align: center;
92+
margin: 0.5rem 0;
93+
}
94+
95+
.password h2 {
96+
letter-spacing: 4px;
97+
color: rgb(0, 47, 255);
98+
word-wrap: break-word;
99+
}
100+
101+
.generator-btns {
102+
display: flex;
103+
justify-content: center;
104+
align-items: center;
105+
gap: 1rem;
106+
padding: 1rem 0;
107+
}
108+
109+
.generate-btn {
110+
background: linear-gradient(40deg, rgb(7, 234, 241), rgb(214, 7, 255));
111+
font-size: 1.5rem;
112+
padding: 0.4rem 0.3rem;
113+
border-radius: 20px;
114+
border: none;
115+
}
116+
117+
.generate-btn:hover {
118+
cursor: pointer;
119+
background: linear-gradient(40deg, rgb(214, 7, 255), rgb(7, 234, 241));
120+
}
121+
122+
.copy-btn {
123+
font-size: 1.3rem;
124+
padding: 0.2rem 0.4rem;
125+
border: none;
126+
border-top-left-radius: 10px;
127+
border-bottom-right-radius: 10px;
128+
}
129+
130+
.copy-btn:hover {
131+
background: linear-gradient(40deg, rgb(214, 7, 255), rgb(7, 234, 241));
132+
cursor: pointer;
133+
}
134+
135+
.copy-text-alert {
136+
color: rgb(15, 218, 245);
137+
font-size: 1.8rem;
138+
text-align: center;
139+
display: none;
140+
}
141+
142+
.show-copy-alert {
143+
display: block;
144+
}
145+
146+
/* .customization-section.......................... */
147+
.customization-section {
148+
border: 1px solid red;
149+
border-radius: 20px;
150+
padding: 1rem;
151+
margin: 2rem 0;
152+
text-align: center;
153+
color: white;
154+
}
155+
156+
.length-section {
157+
font-size: 1.5rem;
158+
159+
}
160+
161+
.num {
162+
padding: 1rem 0;
163+
font-size: 1.4rem;
164+
}
165+
166+
label {
167+
padding-right: 1rem;
168+
padding-left: 0.5rem;
169+
}
170+
171+
.symbol {
172+
font-size: 1.4rem;
173+
}
174+
175+
input[type=checkbox] {
176+
transform: scale(1.7);
177+
}
178+
179+
input[type=checkbox]:hover {
180+
cursor: pointer;
181+
}
182+
183+
#length {
184+
/* -webkit-appearance: none; */
185+
height: 10px;
186+
border-radius: 5px;
187+
background: #ff6767;
188+
outline: none;
189+
opacity: 0.7;
190+
-webkit-transition: .2s;
191+
transition: opacity .2s;
192+
}
193+
194+
#length:hover {
195+
opacity: 1;
196+
}
197+
198+
/* .c-password-generator__slider {
199+
-webkit-appearance: none;
200+
-moz-appearance: none;
201+
appearance: none;
202+
background: none;
203+
outline: none;
204+
} */
205+
206+
207+
/* add responsive for mobile devices. ................ */
208+
@media (max-width:600px) {
209+
210+
.password-section-container {
211+
max-width: 90vw;
212+
}
213+
214+
215+
216+
}

0 commit comments

Comments
 (0)