Skip to content

Commit 92ee7bb

Browse files
codeaashucodeaashu
authored
✨
1 parent 26e7717 commit 92ee7bb

File tree

5 files changed

+216
-0
lines changed

5 files changed

+216
-0
lines changed

‎images/copy.png‎

824 Bytes
Loading

‎images/—Pngtree—color neon dialog box_4044237.png‎

677 KB
Loading

‎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> <!-- ===( CODE AASHU )=== -->
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
7+
<link rel="stylesheet" href="style.css">
8+
<title>CODE AASHU | Random Password Generator</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="title">
13+
<h1>Generate a <br><span>Random Password</span></h1>
14+
</div>
15+
<div id="message-box">
16+
<img src="images/—Pngtree—color neon dialog box_4044237.png" alt="message-box">
17+
<p>copied</p>
18+
</div>
19+
<div class="password-panel">
20+
<input id="password-input" type="text">
21+
<button class="copy-btn"><img class="copy" src="images/copy.png" alt="copy"></button>
22+
</div>
23+
<div class="btn"><button><i class="fa-solid fa-bolt bolt"></i>Generate Password</button></div>
24+
</div>
25+
26+
<script src="script.js"></script>
27+
</body>
28+
</html>

‎script.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/* ===( CODE AASHU )=== */
2+
const passwordInput = document.getElementById('password-input');
3+
const button = document.querySelector('.btn');
4+
const copyButton = document.querySelector('.copy-btn');
5+
const messageBox = document.getElementById('message-box');
6+
7+
const length = 8;
8+
9+
const upperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
10+
const lowerCase = upperCase.toLowerCase();
11+
const numbers = "0123456789";
12+
const symbol = "@#*";
13+
14+
const allChar = upperCase + lowerCase +numbers +symbol;
15+
16+
function createPassword(){
17+
let password = " ";
18+
19+
password += upperCase[Math.floor(Math.random()*upperCase.length)];
20+
password += lowerCase[Math.floor(Math.random()*lowerCase.length)];
21+
password += numbers[Math.floor(Math.random()*numbers.length)];
22+
password += symbol[Math.floor(Math.random()*symbol.length)];
23+
24+
while(length>password.length){
25+
password += allChar[Math.floor(Math.random()*allChar.length)];
26+
}
27+
passwordInput.value= password;
28+
}
29+
30+
button.addEventListener('click', ()=>{
31+
createPassword();
32+
messageBox.style.scale = '0';
33+
34+
})
35+
36+
function copyText(){
37+
passwordInput.select();
38+
document.execCommand("copy");
39+
};
40+
41+
copyButton.addEventListener('click', ()=>{
42+
copyText();
43+
messageBox.style.scale = '1';
44+
45+
});

‎style.css‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
/* ===( CODE AASHU )=== */
2+
*{
3+
padding: 0;
4+
margin: 0;
5+
font-family: Arial, Helvetica, sans-serif;
6+
box-sizing: border-box;
7+
}
8+
9+
body{
10+
background-color: #191f22;
11+
}
12+
13+
.container{
14+
width: 90%;
15+
max-width: 450px;
16+
position: absolute;
17+
top: 50%;
18+
left: 50%;
19+
transform: translate(-50%,-50%);
20+
}
21+
22+
.container .title {
23+
color: #fff;
24+
font-size: 1.3rem;
25+
word-spacing: 3px;
26+
}
27+
28+
.container .title span{
29+
color: #019f55;
30+
display: flex;
31+
margin-right: 6rem;
32+
margin-top: 10px;
33+
font-size: 2.3rem;
34+
line-height: 5vh;
35+
border-bottom: 4px solid #019f55;
36+
}
37+
38+
.container .password-panel{
39+
width: 90%;
40+
height: 6vh;
41+
42+
border-radius: 10px;
43+
background-color: #fff;
44+
border: 1px solid #fff;
45+
margin:5% 10% 5% 0;
46+
}
47+
48+
.container .password-panel input{
49+
width:85%;
50+
height: 6vh;
51+
background-color: transparent ;
52+
border: none;
53+
outline: none;
54+
padding: 5px ;
55+
font-size: 1.5rem;
56+
}
57+
58+
.container .password-panel button{
59+
width: 15%;
60+
border: none;
61+
margin-top: 2px;
62+
position: absolute;
63+
background-color: transparent;
64+
}
65+
66+
.container .password-panel button img{
67+
width: 30px;
68+
height: 40px;
69+
}
70+
71+
.container .password-panel button img:active{
72+
scale: 0.9;
73+
}
74+
75+
76+
.container #message-box{
77+
scale: 0;
78+
}
79+
80+
81+
.container #message-box img{
82+
display: flex;
83+
float: right;
84+
position: absolute;
85+
right: 0;
86+
margin-top: -35px;
87+
margin-right: 60%;
88+
transform: rotate(-5deg);
89+
width: 100px;
90+
height: 70px;
91+
filter:drop-shadow( 5px 5px 100px #000, -5px -5px 100px #000);
92+
}
93+
94+
.container #message-box p{
95+
position: absolute;
96+
margin-right: 65%;
97+
right: 0;
98+
margin-top: -10px;
99+
display: flex;
100+
color: #fff;
101+
}
102+
103+
.container .btn{
104+
width: 50%;
105+
height: 5vh;
106+
}
107+
108+
.container .btn button{
109+
width: 100%;
110+
height: 100%;
111+
color: white;
112+
background-color: #019f55;
113+
border: none;
114+
border-radius: 5px;
115+
font-size: 1rem;
116+
117+
}
118+
119+
@media (max-width :460px) {
120+
.container .btn button{
121+
font-size: 0.9rem;
122+
margin-right: -20px;
123+
}
124+
125+
.container .btn button i{
126+
font-size: 1rem;
127+
left: 0;
128+
margin-right: 1px;
129+
}
130+
131+
}
132+
133+
.container .btn button:active{
134+
scale: 0.98;
135+
}
136+
137+
138+
.container .btn button i{
139+
position: absolute;
140+
left: 5px;
141+
font-size: 1.5rem;
142+
margin:-3px 0 0 0 ;
143+
}

0 commit comments

Comments
 (0)