├── README.md ├── index.html └── src ├── images └── illustration.svg ├── javascript └── script.js └── styles └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # Gerador de Senha 2 | 3 | Este é um gerador de senha aleatória desenvolvido com HTML, CSS e JavaScript. Ele gera senhas seguras e aleatórias com base nos parâmetros fornecidos pelo usuário, como comprimento da senha e caracteres especiais. 4 | 5 | ## Visualize o projeto 6 | (https://larissakich.github.io/password-generator/) 7 | 8 | ## Funcionalidades 9 | 10 | - Geração de senhas aleatórias com opções personalizáveis. 11 | - Opções para incluir letras maiúsculas, minúsculas, números e caracteres especiais. 12 | - Botão para copiar a senha gerada para a área de transferência. 13 | 14 | ## Como Usar 15 | 16 | 1. Abra o arquivo `index.html` em seu navegador da web. 17 | 2. Defina a quantidade de caracteres desejada para a senha. 18 | 3. Marque as opções de acordo com os tipos de caracteres que deseja incluir na senha. 19 | 4. Clique no botão "Gerar senha" para obter uma senha aleatória. 20 | 5. Se desejar, clique no ícone de cópia para copiar a senha para a área de transferência. 21 | 22 | ## Vídeo Tutorial 23 | 24 | Aprenda a usar o gerador de senha assistindo ao vídeo tutorial no meu canal do YouTube: 25 | 26 | [Gerador de Senha - Tutorial](https://www.youtube.com/watch?v=L7d6VdI8Cnk) 27 | 28 | ## Pré-requisitos 29 | 30 | Não há pré-requisitos específicos para utilizar este gerador de senha. 31 | 32 | ## Contribuindo 33 | 34 | Este é um projeto de código aberto e contribuições são bem-vindas! Sinta-se à vontade para propor melhorias, relatar problemas ou enviar solicitações de pull. 35 | 36 | ## Autor 37 | 38 | Larissa Kich - larissakich04@gmail.com 39 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Password Generator 13 | 14 | 15 |

16 | 17 |

18 | 19 |

Generate Password

20 | 21 | 22 |

23 | 24 | 25 | 28 |

29 | 30 | 31 |

32 | 33 |

34 | 35 | 36 | Password Length 37 | 38 |

39 | 40 | 41 |

42 | 43 | 44 | Include Uppercase Letter 45 | 46 |

47 | 48 | 49 |

50 | 51 | 52 | Include Lowercase Letter 53 | 54 |

55 | 56 | 57 |

58 | 59 | 60 | Include Number 61 | 62 |

63 | 64 | 65 |

66 | 67 | 68 | Include Special Character 69 | 70 |

71 | 72 | 73 | 76 |

77 |

78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /src/images/illustration.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/javascript/script.js: -------------------------------------------------------------------------------- 1 | // Function to get the selected character types 2 | function getChartTypes() { 3 | // Retrieve the checked status of each character type checkbox 4 | const uppercase = document.querySelector('#include_uppercase').checked; 5 | const lowercase = document.querySelector('#include_lowercase').checked; 6 | const number = document.querySelector('#include_number').checked; 7 | const specialCharacter = document.querySelector('#include_special_character').checked; 8 | 9 | // Initialize an empty array to store selected character types 10 | const charTypes = []; 11 | 12 | // If uppercase is selected, add uppercase characters to charTypes array 13 | if (uppercase) { 14 | charTypes.push('ABCDEFGHIJKLMNOPQRSTUVWXYZ'); 15 | } 16 | 17 | // If lowercase is selected, add lowercase characters to charTypes array 18 | if (lowercase) { 19 | charTypes.push('abcdefghijklmnopqrstuvwxyz'); 20 | } 21 | 22 | // If number is selected, add numeric characters to charTypes array 23 | if (number) { 24 | charTypes.push('0123456789'); 25 | } 26 | 27 | // If specialCharacter is selected, add special characters to charTypes array 28 | if (specialCharacter) { 29 | charTypes.push('!@#$%^&*()_-+={}[]|\\/?><:;"\'.,~`'); 30 | } 31 | 32 | // Return the array of selected character types 33 | return charTypes; 34 | } 35 | 36 | // Function to get the desired password size 37 | function getPasswordSize() { 38 | // Retrieve the value entered in the size input field 39 | const size = document.querySelector('#size').value; 40 | 41 | // Validate the size: must be a number between 4 and 128 42 | if (isNaN(size) || size < 4 || size > 128) { 43 | // Display an error message if the size is invalid 44 | message('Tamanho inválido, digite um número entre 4 e 128!', 'danger'); 45 | } 46 | 47 | // Return the validated size 48 | return size; 49 | } 50 | 51 | // Function to generate a password with specified size and character types 52 | function generatePassword(size, charTypes) { 53 | let passwordGenerated = ''; 54 | // Concatenate all selected character types into a single string 55 | const selectedChars = charTypes.join(''); 56 | 57 | // Ensure at least one character from each selected character type 58 | charTypes.forEach(type => { 59 | passwordGenerated += type[Math.floor(Math.random() * type.length)]; 60 | }); 61 | 62 | // Generate remaining characters randomly from the selected character types 63 | while (passwordGenerated.length < size) { 64 | passwordGenerated += selectedChars[Math.floor(Math.random() * selectedChars.length)]; 65 | } 66 | 67 | // Shuffle the password string to enhance randomness 68 | passwordGenerated = passwordGenerated.split('').sort(() => Math.random() - 0.5).join(''); 69 | 70 | // Return the generated password 71 | return passwordGenerated; 72 | } 73 | 74 | // Function to display a message using Toastify library 75 | function message(text, status = 'success') { 76 | Toastify({ 77 | text: text, 78 | duration: 2000, 79 | style: { 80 | background: status === 'success' ? '#84cc16' : '#dc2626', 81 | boxShadow: 'none' 82 | } 83 | }).showToast(); 84 | } 85 | 86 | // Event listener for the "Generate" button 87 | document.querySelector('#generate').addEventListener('click', function () { 88 | // Get the desired password size 89 | const size = getPasswordSize(); 90 | // Get the selected character types 91 | const charTypes = getChartTypes(); 92 | 93 | // If size is not valid, return and do not proceed further 94 | if (!size) { 95 | return; 96 | } 97 | 98 | // If no character type is selected, display an error message and return 99 | if (!charTypes.length) { 100 | message('Selecione pelo menos um tipo de caractere!', 'danger'); 101 | return; 102 | } 103 | 104 | // Generate the password with the specified size and character types 105 | const passwordGenerated = generatePassword(size, charTypes); 106 | 107 | // Display the generated password 108 | document.querySelector('#password_container').classList.add('show'); 109 | document.querySelector('#password').textContent = passwordGenerated; 110 | }); 111 | 112 | // Event listener for the "Copy" button 113 | document.querySelector('#copy').addEventListener('click', function () { 114 | // Copy the generated password to the clipboard 115 | navigator.clipboard.writeText(document.querySelector('#password').textContent); 116 | // Display a success message 117 | message('Senha copiada com sucesso!', 'success'); 118 | }); 119 | -------------------------------------------------------------------------------- /src/styles/styles.css: -------------------------------------------------------------------------------- 1 | /* Import Google Fonts */ 2 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap'); 3 | 4 | /* Define color variables */ 5 | :root { 6 | --color-primary-1: #8BC34A; 7 | --color-primary-2: #8BC34AA6; 8 | 9 | --color-neutral-1: #f8fafc; 10 | --color-neutral-2: #24232b; 11 | --color-neutral-3: #13121a; 12 | } 13 | 14 | /* Global */ 15 | * { 16 | margin: 0; 17 | padding: 0; 18 | box-sizing: border-box; 19 | font-family: 'Roboto Mono', monospace; 20 | } 21 | 22 | body { 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | min-height: 100vh; 27 | background-color: var(--color-neutral-3); 28 | } 29 | 30 | /* Container */ 31 | #container { 32 | display: flex; 33 | flex-direction: column; 34 | align-items: center; 35 | gap: 12px; 36 | } 37 | 38 | #password_img { 39 | width: 100px; 40 | } 41 | 42 | #title { 43 | color: var(--color-neutral-1); 44 | font-weight: 500; 45 | margin-bottom: 10px; 46 | } 47 | 48 | /* Password */ 49 | #password_container { 50 | width: 100%; 51 | max-width: 400px; 52 | display: none; 53 | justify-content: space-between; 54 | align-items: center; 55 | background-color: var(--color-neutral-2); 56 | color: var(--color-neutral-1); 57 | border-radius: 8px; 58 | padding: 8px 18px; 59 | } 60 | 61 | #password_container.show { 62 | display: flex; 63 | } 64 | 65 | #password { 66 | font-size: 14px; 67 | white-space: nowrap; 68 | overflow: hidden; 69 | text-overflow: ellipsis; 70 | } 71 | 72 | #copy { 73 | background-color: transparent; 74 | border: none; 75 | color: var(--color-primary-1); 76 | height: 40px; 77 | width: 30px; 78 | font-size: 16px; 79 | cursor: pointer; 80 | transition: color .4s; 81 | } 82 | 83 | #copy:hover { 84 | color: var(--color-primary-2); 85 | } 86 | 87 | /* Items */ 88 | #password_items { 89 | width: 400px; 90 | background-color: var(--color-neutral-2); 91 | color: var(--color-neutral-1); 92 | border-radius: 8px; 93 | display: flex; 94 | flex-direction: column; 95 | gap: 8px; 96 | padding: 18px; 97 | } 98 | 99 | .item { 100 | display: flex; 101 | gap: 14px; 102 | } 103 | 104 | #size { 105 | width: 50px; 106 | text-align: center; 107 | border: none; 108 | border-radius: 4px; 109 | } 110 | 111 | #size::-webkit-inner-spin-button, 112 | #size::-webkit-outer-spin-button { 113 | opacity: 1; 114 | } 115 | 116 | #size:focus { 117 | outline: 1px solid var(--color-primary-1); 118 | } 119 | 120 | #generate { 121 | background-color: var(--color-primary-1); 122 | border: none; 123 | margin-top: 12px; 124 | padding: 10px 0px; 125 | border-radius: 4px; 126 | color: var(--color-neutral-3); 127 | font-size: 16px; 128 | font-weight: 500; 129 | cursor: pointer; 130 | transition: background-color .4s; 131 | } 132 | 133 | #generate:hover { 134 | background-color: var(--color-primary-2); 135 | } --------------------------------------------------------------------------------