Gerador de senha

├── .vscode └── settings.json ├── assets └── logo.png ├── script.js ├── index.html └── style.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devfraga/gerador-senha-youtube/HEAD/assets/logo.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let sliderElement = document.querySelector("#slider"); 2 | let buttonElement = document.querySelector("#button"); 3 | 4 | let sizePassword = document.querySelector("#valor"); 5 | let password = document.querySelector("#password"); 6 | 7 | let containerPassword = document.querySelector("#container-password"); 8 | 9 | let charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!'; 10 | let novaSenha = ''; 11 | 12 | sizePassword.innerHTML = sliderElement.value; 13 | 14 | slider.oninput = function() { 15 | sizePassword.innerHTML = this.value; 16 | } 17 | 18 | 19 | function generatePassword(){ 20 | 21 | let pass = ''; 22 | for(let i = 0, n = charset.length; i < sliderElement.value; ++i){ 23 | pass += charset.charAt(Math.floor(Math.random() * n)); 24 | } 25 | 26 | console.log(pass) 27 | containerPassword.classList.remove("hide"); 28 | password.innerHTML = pass; 29 | novaSenha = pass; 30 | } 31 | 32 | function copyPassword(){ 33 | alert("Senha copiada com sucesso!") 34 | navigator.clipboard.writeText(novaSenha); 35 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Gerador de senha 12 | 13 | 14 | 15 |

16 | 17 |

18 | Tamanho caracteres 19 | 20 | 21 | 22 |

23 | 24 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0 auto; 3 | width: 100%; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | body{ 9 | background-color: #18181B; 10 | width: 100%; 11 | height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | flex-direction: column; 16 | } 17 | 18 | .logo{ 19 | max-width: 600px; 20 | margin-bottom: 24px; 21 | } 22 | 23 | .container-input{ 24 | max-width: 480px; 25 | margin: 14px 0; 26 | } 27 | 28 | .container-input span { 29 | color: #FFF; 30 | font-size: 22px; 31 | } 32 | 33 | .slider { 34 | margin-top: 8px; 35 | -webkit-appearance: none; 36 | width: 100%; 37 | height: 18px; 38 | border-radius: 5px; 39 | background: #DFDFDF; 40 | outline: none; 41 | opacity: 0.7; 42 | } 43 | 44 | .button-cta{ 45 | height: 40px; 46 | margin-top: 40px; 47 | background-color: #3EB72B; 48 | border:0; 49 | border-radius: 4px; 50 | color: #FFF; 51 | font-size: 20px; 52 | font-weight: bold; 53 | cursor: pointer; 54 | } 55 | 56 | .container-password{ 57 | max-width: 480px; 58 | margin: 14px 0; 59 | display: flex; 60 | flex-direction: column; 61 | align-items: center; 62 | cursor: pointer; 63 | } 64 | 65 | .title{ 66 | text-align: center; 67 | color: #FFF; 68 | font-size: 28px; 69 | margin-top: 24px; 70 | margin-bottom: 8px; 71 | } 72 | 73 | .password{ 74 | height: 60px; 75 | background-color: rgba(0,0,0,0.40); 76 | border: 1px solid #313131; 77 | 78 | display: flex; 79 | justify-content: center; 80 | align-items: center; 81 | color: #FFF; 82 | border-radius: 4px; 83 | transition: transform 0.5s; 84 | } 85 | .password:hover{ 86 | transform: scale(1.05); 87 | border-color: #FFF; 88 | } 89 | 90 | .hide{ 91 | display: none; 92 | } 93 | 94 | .tooltip{ 95 | color: #FFF; 96 | position: relative; 97 | top: 20px; 98 | padding: 6px 8px; 99 | font-size: 16px; 100 | border-radius: 6px; 101 | background: rgb(15, 15, 15); 102 | opacity: 0; 103 | visibility: hidden; 104 | transition: all .5s ease-in-out; 105 | text-align: center; 106 | } 107 | 108 | .container-password:hover .tooltip{ 109 | bottom: 50px; 110 | visibility: visible; 111 | opacity: 1; 112 | } --------------------------------------------------------------------------------