Skip to content

Commit d8b92f4

Browse files
Hüseynağa HaqverdiyevHüseynağa Haqverdiyev
Hüseynağa Haqverdiyev
authored and
Hüseynağa Haqverdiyev
committed
project added
0 parents  commit d8b92f4

File tree

6 files changed

+284
-0
lines changed

6 files changed

+284
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎index.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<iframe src="silence.mp3" allow="autoplay" id="audio" hidden></iframe>
14+
<audio id="player" autoplay loop>
15+
<source src="sound.mp3" type="audio/mp3">
16+
</audio>
17+
<div class="container">
18+
<h1>Password Generator</h1>
19+
<div class="result">
20+
<input type="text" id="resultpass" disabled ><button class="clipboard">Copy</button>
21+
</div>
22+
<div class="cases">
23+
<div class="inputs">
24+
<label for="counts">Count of symbols</label>
25+
<input type="number" name="counts" min="5" max="20" value="10" id="countsofsymbols">
26+
</div>
27+
<div class="inputs">
28+
<label for="uppercase">Uppercase</label>
29+
<input type="checkbox" name="uppercase" id="uppercase" checked>
30+
</div>
31+
<div class="inputs">
32+
<label for="lowercase">Lowercase</label>
33+
<input type="checkbox" name="lowercase" id="lowercase" checked>
34+
</div>
35+
<div class="inputs">
36+
<label for="numbers">Numbers</label>
37+
<input type="checkbox" name="numbers" id="numbers" checked>
38+
</div>
39+
<div class="inputs">
40+
<label for="symbols">Symbols</label>
41+
<input type="checkbox" name="symbols" id="symbols" checked>
42+
</div>
43+
</div>
44+
<button id="generator">Generate Password</button>
45+
<h4>===========================</h4>
46+
<h4>(c) created by H.Hagverdiev</h4>
47+
</div>
48+
</body>
49+
<script src="script.js"></script>
50+
51+
</html>

‎script.js

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
'use strict'
2+
3+
4+
const result = document.getElementById('resultpass');
5+
const counts = document.getElementById('countsofsymbols');
6+
const uppercase = document.getElementById('uppercase')
7+
const lowercase = document.getElementById('lowercase')
8+
const numbers = document.getElementById('numbers');
9+
const symbols = document.getElementById('symbols');
10+
const generator = document.getElementById('generator');
11+
const copy = document.querySelector('.clipboard');
12+
13+
const randomFunc = {
14+
u: getupper,
15+
l: getlower,
16+
n: getnumber,
17+
s: getsymbol
18+
19+
}
20+
21+
generator.addEventListener("click", function () {
22+
const lenghtpass = Number(counts.value);
23+
// console.log(lenghtpass);
24+
25+
const lowered = lowercase.checked;
26+
const uppered = uppercase.checked;
27+
const numbered = numbers.checked;
28+
const symboled = symbols.checked;
29+
30+
// console.log(lowered, uppered, numbered, symboled);
31+
32+
result.value = generatePass(
33+
lowered, uppered, numbered, symboled, lenghtpass
34+
)
35+
36+
37+
})
38+
39+
function generatePass(l, u, n, s, c) {
40+
let newpassword = '';
41+
42+
const typesCount = l + u + n + s;
43+
44+
// console.log(typesCount);
45+
46+
const typesArray = [{ l }, { u }, { n }, { s }].filter(item => Object.values(item)[0]);
47+
48+
// console.log(typesArray);
49+
50+
if (typesCount === 0) {
51+
return '';
52+
}
53+
54+
for (let i = 0; i < c; i += typesCount) {
55+
typesArray.forEach(type => {
56+
const funcName = Object.keys(type)[0];
57+
58+
// console.log(funcName);
59+
60+
newpassword += randomFunc[funcName]();
61+
62+
// console.log(newpassword);
63+
});
64+
65+
}
66+
67+
const password = newpassword.slice(0, c)
68+
69+
return password;
70+
}
71+
72+
function getlower() {
73+
return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
74+
}
75+
76+
function getupper() {
77+
return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
78+
}
79+
80+
function getnumber() {
81+
return Number(String.fromCharCode(Math.floor(Math.random() * 10) + 48));
82+
}
83+
84+
function getsymbol() {
85+
const symbols = '!@#$%^&*(){}[]=<>/,.'
86+
return symbols[Math.floor(Math.random() * symbols.length)];
87+
}
88+
89+
copy.addEventListener('click', function () {
90+
const textarea = document.createElement('textarea');
91+
const pw = result.value;
92+
93+
94+
if (!pw) { return; }
95+
96+
textarea.value = pw;
97+
document.body.appendChild(textarea);
98+
textarea.select();
99+
document.execCommand('copy');
100+
textarea.remove();
101+
alert('Password copied to clipboard');
102+
});
103+
104+
// console.log(getlower(), getupper(), getsymbol(), getnumber());

‎silence.mp3

35.6 KB
Binary file not shown.

‎sound.mp3

4.08 MB
Binary file not shown.

‎style.css

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
2+
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css');
3+
*{
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
body{
10+
background-color: black;
11+
font-family: "Press Start 2P", sans-serif;
12+
font-size: 10px;
13+
}
14+
15+
.container{
16+
width: 450px;
17+
height: 450px;
18+
padding: 2px;
19+
margin: auto;
20+
background-color: black;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
justify-content: space-evenly;
25+
border: 2px solid white;
26+
color: white;
27+
}
28+
29+
.inputs {
30+
display: flex;
31+
justify-content: space-between;
32+
align-items: center;
33+
}
34+
35+
.result{
36+
width: 250px;
37+
height: 40px;
38+
39+
}
40+
41+
#resultpass{
42+
width: 70%;
43+
height: 40px;
44+
background: none;
45+
border: 1px solid white;
46+
font-family: inherit;
47+
color: white;
48+
text-align: center;
49+
font-size: 8px;
50+
51+
}
52+
53+
.clipboard
54+
{
55+
width: 30%;
56+
height: 40px;
57+
border: 2px solid white;
58+
background-color: black;
59+
color: white;
60+
font-size: 8px;
61+
font-family: inherit;
62+
cursor: pointer;
63+
}
64+
65+
.cases {
66+
display: flex;
67+
justify-content: space-between;
68+
flex-direction: column;
69+
width: 250px;
70+
height: 150px;
71+
72+
}
73+
74+
input[type="checkbox"]{
75+
appearance: none;
76+
-webkit-appearance: none;
77+
height: 15px;
78+
width: 15px;
79+
border: 1px white solid;
80+
background-color: black;
81+
cursor: pointer;
82+
align-items: center;
83+
display: flex;
84+
justify-content: center;
85+
}
86+
87+
input[type="checkbox"]:after{
88+
font-family: "Font Awesome 5 Sharp";
89+
content: "\f14a";
90+
display: none;
91+
color: black;
92+
font-size: 15px;
93+
font-weight: 800;
94+
}
95+
96+
97+
input[type="checkbox"]:checked{
98+
background-color: white;
99+
}
100+
101+
input[type="checkbox"]:checked:after{
102+
display: block;
103+
}
104+
105+
#generator {
106+
width: 250px;
107+
height: 50px;
108+
border: 2px solid white;
109+
background-color: black;
110+
color: white;
111+
font-size: 8px;
112+
font-family: inherit;
113+
cursor: pointer;
114+
}
115+
116+
#countsofsymbols{
117+
background: none;
118+
border: 1px solid white;
119+
font-family: inherit;
120+
height: 30px;
121+
width: 50px;
122+
color: white;
123+
text-align: center;
124+
font-size: 8px;
125+
}
126+
127+
h4{
128+
font-size: 8px;
129+
}

0 commit comments

Comments
 (0)