├── css
    └── styles.css
├── img
    └── bg-form.jpg
├── index.html
└── js
    └── scripts.js


/css/styles.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   font-family: "Montserrat", sans-serif;
  3 |   padding: 0;
  4 |   margin: 0;
  5 |   box-sizing: border-box;
  6 |   color: #333;
  7 | }
  8 | 
  9 | html,
 10 | body {
 11 |   height: auto;
 12 |   min-height: 100vh;
 13 | }
 14 | 
 15 | html {
 16 |   background: linear-gradient(180deg, #ea03ff 0%, #0097ff 100%);
 17 | }
 18 | 
 19 | input:focus {
 20 |   outline: none;
 21 | }
 22 | 
 23 | #register-container {
 24 |   max-width: 900px;
 25 |   min-height: 80vh;
 26 |   margin: 2rem auto;
 27 |   display: flex;
 28 |   box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
 29 |     rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 30 | }
 31 | 
 32 | #register-banner {
 33 |   background: url("../img/bg-form.jpg");
 34 |   background-size: cover;
 35 |   background-position: center;
 36 |   width: 50%;
 37 | }
 38 | 
 39 | #banner-layer {
 40 |   background-color: rgba(25, 11, 122, 0.7);
 41 |   height: 100%;
 42 |   padding: 2rem;
 43 |   display: flex;
 44 |   align-items: center;
 45 | }
 46 | 
 47 | #register-banner h1 {
 48 |   font-size: 4rem;
 49 |   margin-bottom: 1.5rem;
 50 |   color: #fff;
 51 |   word-spacing: 50rem;
 52 | }
 53 | 
 54 | #register-form {
 55 |   background-color: #fdfdfd;
 56 |   padding: 2rem;
 57 |   width: 50%;
 58 |   display: flex;
 59 |   flex-direction: column;
 60 | }
 61 | 
 62 | #register-form h2 {
 63 |   text-align: center;
 64 |   margin-bottom: 1rem;
 65 |   font-size: 2.2rem;
 66 | }
 67 | 
 68 | #register-form p {
 69 |   text-align: center;
 70 |   margin-bottom: 1.5rem;
 71 |   color: #aaa;
 72 |   font-size: 0.8rem;
 73 | }
 74 | 
 75 | .form-control {
 76 |   margin-bottom: 1rem;
 77 |   display: flex;
 78 |   flex-direction: column;
 79 | }
 80 | 
 81 | .form-control label {
 82 |   font-weight: bold;
 83 |   margin-bottom: 0.6rem;
 84 | }
 85 | 
 86 | .form-control input {
 87 |   border: none;
 88 |   border-bottom: 1px solid #aaa;
 89 |   padding: 0.6rem 0;
 90 | }
 91 | 
 92 | #open-generate-password {
 93 |   font-weight: bold;
 94 |   cursor: pointer;
 95 |   transition: 0.4s;
 96 | }
 97 | 
 98 | #open-generate-password:hover {
 99 |   color: #0099ff;
100 | }
101 | 
102 | #register-form #generated-password {
103 |   border: 1px solid #0099ff;
104 |   border-radius: 4px;
105 |   font-weight: bold;
106 |   font-size: 1.2rem;
107 |   padding: 0.4rem;
108 |   color: #333;
109 |   text-align: center;
110 |   margin-bottom: 1rem;
111 |   display: none;
112 | }
113 | 
114 | #register-form #generated-password p {
115 |   color: #81d340;
116 |   margin-bottom: 0.5rem;
117 | }
118 | 
119 | #register-form input[type="submit"],
120 | #generate-options button,
121 | #copy-password {
122 |   background-color: #81d340;
123 |   color: #fff;
124 |   opacity: 0.8;
125 |   border: none;
126 |   border-radius: 2rem;
127 |   padding: 1rem 1.4rem;
128 |   max-width: 150px;
129 |   cursor: pointer;
130 |   align-self: flex-end;
131 |   transition: 0.4s;
132 | }
133 | 
134 | #register-form input[type="submit"]:hover {
135 |   opacity: 1;
136 | }
137 | 
138 | /* Segunda versão */
139 | #generate-options {
140 |   margin-bottom: 1rem;
141 |   padding: 1rem;
142 |   border: 1px solid #ddd;
143 | }
144 | 
145 | #generate-options .form-control {
146 |   flex-direction: row;
147 |   justify-content: space-between;
148 |   align-items: center;
149 | }
150 | 
151 | #generate-options label {
152 |   font-size: 0.8rem;
153 | }
154 | 
155 | #generate-options input[type="text"] {
156 |   max-width: 30px;
157 |   text-align: center;
158 |   border: 1px solid #ccc;
159 | }
160 | 
161 | #generate-options button {
162 |   background-color: #0097ff;
163 |   display: block;
164 |   margin: 0 auto;
165 | }
166 | 
167 | #copy-password {
168 |   margin: 1rem auto;
169 |   background-color: transparent;
170 |   border: 2px solid #81d340;
171 |   color: #81d340;
172 |   padding: 0.5rem 1rem;
173 | }
174 | 
175 | .hide {
176 |   display: none;
177 | }
178 | 


--------------------------------------------------------------------------------
/img/bg-form.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matheusbattisti/password_generator_js/61d1676a2113ad3909fb1f98a23411e6a5293ee0/img/bg-form.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Gerador de Senha</title>
 8 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10 |     <link
11 |       href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
12 |       rel="stylesheet"
13 |     />
14 |     <link rel="stylesheet" href="css/styles.css" />
15 |     <script src="js/scripts.js" defer></script>
16 |   </head>
17 |   <body>
18 |     <div id="register-container">
19 |       <div id="register-banner">
20 |         <div id="banner-layer">
21 |           <h1>Seja bem-vindo</h1>
22 |         </div>
23 |       </div>
24 |       <div id="register-form">
25 |         <h2>Crie sua conta:</h2>
26 |         <p>Registre-se para utilizar todas as funcionalidades do sistema</p>
27 |         <div class="form-control">
28 |           <label for="name">Nome</label>
29 |           <input
30 |             type="text"
31 |             name="name"
32 |             id="name"
33 |             placeholder="Digite o seu nome"
34 |           />
35 |         </div>
36 |         <div class="form-control">
37 |           <label for="email">E-mail</label>
38 |           <input
39 |             type="text"
40 |             type="email"
41 |             id="email"
42 |             placeholder="Digite o seu e-mail"
43 |           />
44 |         </div>
45 |         <div class="form-control">
46 |           <label for="password">Senha</label>
47 |           <input
48 |             type="text"
49 |             type="password"
50 |             id="password"
51 |             placeholder="Digite a sua senha"
52 |           />
53 |         </div>
54 |         <p>
55 |           Quer ajuda para criar uma senha segura?
56 |           <span id="open-generate-password">Clique aqui.</span>
57 |         </p>
58 |         <div id="generate-options" class="hide">
59 |           <p>Selecione as opções que você deseja</p>
60 |           <div class="form-control">
61 |             <label for="length">Quantidade de caracteres:</label>
62 |             <input type="text" id="length" name="length" value="10" />
63 |           </div>
64 |           <div class="form-control">
65 |             <label for="letters">Letras:</label>
66 |             <input type="checkbox" id="letters" name="letters" checked />
67 |           </div>
68 |           <div class="form-control">
69 |             <label for="numbers">Números:</label>
70 |             <input type="checkbox" id="numbers" name="numbers" checked />
71 |           </div>
72 |           <div class="form-control">
73 |             <label for="symbols">Símbolos:</label>
74 |             <input type="checkbox" id="symbols" name="symbols" checked />
75 |           </div>
76 |           <button id="generate-password">Criar senha</button>
77 |         </div>
78 |         <div id="generated-password">
79 |           <p>Aqui está a sua senha:</p>
80 |           <h4></h4>
81 |           <button id="copy-password">Copiar</button>
82 |         </div>
83 |         <div class="form-control">
84 |           <label for="confirmpassword">Confirmação de Senha</label>
85 |           <input
86 |             type="text"
87 |             type="confirmpassword"
88 |             id="confirmpassword"
89 |             placeholder="Confirme a sua senha"
90 |           />
91 |         </div>
92 |         <input type="submit" value="Cadastrar" />
93 |       </div>
94 |     </div>
95 |   </body>
96 | </html>
97 | 


--------------------------------------------------------------------------------
/js/scripts.js:
--------------------------------------------------------------------------------
  1 | // Seleção de Elementos
  2 | const generatePasswordButton = document.querySelector("#generate-password");
  3 | const generatedPasswordElement = document.querySelector("#generated-password");
  4 | 
  5 | // Novas funcionalidades
  6 | const openCloseGeneratorButton = document.querySelector(
  7 |   "#open-generate-password"
  8 | );
  9 | const generatePasswordContainer = document.querySelector("#generate-options");
 10 | const lengthInput = document.querySelector("#length");
 11 | const lettersInput = document.querySelector("#letters");
 12 | const numbersInput = document.querySelector("#numbers");
 13 | const symbolsInput = document.querySelector("#symbols");
 14 | const copyPasswordButton = document.querySelector("#copy-password");
 15 | 
 16 | // Funções
 17 | const getLetterLowerCase = () => {
 18 |   return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
 19 | };
 20 | 
 21 | const getLetterUpperCase = () => {
 22 |   return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
 23 | };
 24 | 
 25 | const getNumber = () => {
 26 |   return Math.floor(Math.random() * 10).toString();
 27 | };
 28 | 
 29 | const getSymbol = () => {
 30 |   const symbols = "(){}[]=<>/,.!@#$%&*+-";
 31 |   return symbols[Math.floor(Math.random() * symbols.length)];
 32 | };
 33 | 
 34 | const generatePassword = (
 35 |   getLetterLowerCase,
 36 |   getLetterUpperCase,
 37 |   getNumber,
 38 |   getSymbol
 39 | ) => {
 40 |   let password = "";
 41 | 
 42 |   //   Segunda versão
 43 |   const passwordLength = +lengthInput.value;
 44 | 
 45 |   const generators = [];
 46 | 
 47 |   if (lettersInput.checked) {
 48 |     generators.push(getLetterLowerCase, getLetterUpperCase);
 49 |   }
 50 | 
 51 |   if (numbersInput.checked) {
 52 |     generators.push(getNumber);
 53 |   }
 54 | 
 55 |   if (symbolsInput.checked) {
 56 |     generators.push(getSymbol);
 57 |   }
 58 | 
 59 |   console.log(generators.length);
 60 | 
 61 |   if (generators.length === 0) {
 62 |     return;
 63 |   }
 64 | 
 65 |   for (i = 0; i < passwordLength; i = i + generators.length) {
 66 |     generators.forEach(() => {
 67 |       const randomValue =
 68 |         generators[Math.floor(Math.random() * generators.length)]();
 69 | 
 70 |       password += randomValue;
 71 |     });
 72 |   }
 73 | 
 74 |   password = password.slice(0, passwordLength);
 75 | 
 76 |   generatedPasswordElement.style.display = "block";
 77 |   generatedPasswordElement.querySelector("h4").innerText = password;
 78 | };
 79 | 
 80 | // Eventos
 81 | generatePasswordButton.addEventListener("click", () => {
 82 |   generatePassword(
 83 |     getLetterLowerCase,
 84 |     getLetterUpperCase,
 85 |     getNumber,
 86 |     getSymbol
 87 |   );
 88 | });
 89 | 
 90 | openCloseGeneratorButton.addEventListener("click", () => {
 91 |   generatePasswordContainer.classList.toggle("hide");
 92 | });
 93 | 
 94 | copyPasswordButton.addEventListener("click", (e) => {
 95 |   e.preventDefault();
 96 | 
 97 |   const password = generatedPasswordElement.querySelector("h4").innerText;
 98 | 
 99 |   navigator.clipboard.writeText(password).then(() => {
100 |     copyPasswordButton.innerText = "Senha copiada com sucesso!";
101 | 
102 |     setTimeout(() => {
103 |       copyPasswordButton.innerText = "Copiar";
104 |     }, 1000);
105 |   });
106 | });
107 | 


--------------------------------------------------------------------------------