├── README.md
├── index.html
├── preview.png
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | ## Еще один простой генератор паролей на Bootstrap.
2 |
3 | Мой любимый генератор паролей почему-то исчез, а домен больше никем не занят. Это означает что мне нужно написать свой генератор паролей, вот я и написал :>
4 |
5 | ### Как это выглядит:
6 |
7 | 
8 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
8 |
9 | Генератор паролей
10 |
11 |
12 |
13 |
14 |
15 |
36 |
42 |
43 |
44 | Сгенерировать пароль
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kiriharu/web-password-generator/ce3fb4ab6e00d1d4327db9a67eb86f34aa53f41a/preview.png
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | let nums = [...Array(10).keys()]
2 | let lowercase = [...Array(26).keys()].map(i => String.fromCharCode(i + 97));
3 | let uppercase = [...Array(26).keys()].map(i => String.fromCharCode(i + 65));
4 | let specsymbols = ['!', '@', '#', '$', '%', '?', '-', '+', '=', '~'];
5 |
6 | const randomInteger = (min, max) => Math.round(min - 0.5 + Math.random() * (max - min + 1));
7 | const genPassword = () => {
8 | let chars = [];
9 | let password = '';
10 |
11 | if (document.querySelector('#nums').checked) chars = chars.concat(nums);
12 | if (document.querySelector('#lowercase').checked) chars = chars.concat(lowercase);
13 | if (document.querySelector('#uppercase').checked) chars = chars.concat(uppercase);
14 | if (document.querySelector('#specsymbols').checked) chars = chars.concat(specsymbols);
15 | if (chars.length === 0) chars = chars.concat(lowercase);
16 |
17 | const passLength = document.querySelector('#passLength').value;
18 |
19 | for (let i = 0; i < passLength; i++) {
20 | password += chars[randomInteger(0, chars.length - 1)];
21 | }
22 |
23 | return password;
24 | }
25 |
26 | let showPasswords = () => {
27 | let passwords = [];
28 |
29 | const passCount = document.querySelector('#passCount').value;
30 | for (let i = 0; i < passCount; i++) {
31 | passwords.push(genPassword());
32 | }
33 |
34 | document.getElementById('result').innerHTML = '';
35 | document.getElementById('result').appendChild(makeUl(passwords));
36 | }
37 |
38 | let makeUl = array => {
39 | let list = document.createElement('ul');
40 |
41 | for (let i = 0; i < array.length; i++) {
42 | let item = document.createElement('li')
43 | item.appendChild(document.createTextNode(array[i]));
44 | list.appendChild(item);
45 | }
46 |
47 | return list;
48 | }
49 |
50 | document.querySelector('#gen').addEventListener('click', showPasswords);
51 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | .content {
2 | margin: 10px;
3 | border: 1px solid #8b8b8b;
4 | padding: 20px 10px;
5 | position: absolute;
6 | top: 50%;
7 | left: 50%;
8 | transform: translate(-50%, -50%);
9 | }
10 |
11 | .header {
12 | font-size: 18px;
13 | font-weight: 700;
14 | margin: 10px 0;
15 | }
16 |
17 | .inputs input {
18 | color: #212529;
19 | }
20 |
21 | .buttons {
22 | margin: 20px 0 10px 0;
23 | }
24 |
25 | ul {
26 | padding: 0;
27 | margin-top: 10px;
28 | }
29 |
30 | ul li {
31 | list-style: none;
32 | text-align: center;
33 | word-wrap: break-word;
34 | padding: 5px 0;
35 | }
36 |
--------------------------------------------------------------------------------