├── README.md ├── index.html ├── preview.png ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | ## Еще один простой генератор паролей на Bootstrap. 2 | 3 | Мой любимый генератор паролей почему-то исчез, а домен больше никем не занят. Это означает что мне нужно написать свой генератор паролей, вот я и написал :> 4 | 5 | ### Как это выглядит: 6 | 7 | ![Main page](./preview.png) 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | Генератор паролей 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |

Какие символы включать в пароль:

18 |
19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 |
37 |
38 |

Длина пароля:

39 |

Количество паролей:

40 |
41 |
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 | --------------------------------------------------------------------------------