Skip to content

Commit 2737037

Browse files
rubens-fsrubens-fs
committed
Upload initial project files.
0 parents  commit 2737037

File tree

6 files changed

+346
-0
lines changed

6 files changed

+346
-0
lines changed

‎imgs/home-page.png

125 KB
Loading

‎imgs/on-gc.gif

414 KB
Loading

‎index.html

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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>Password Generator</title>
8+
9+
<link rel="stylesheet" href="./style/style.css">
10+
<!-- Google Fonts -->
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,700&display=swap" rel="stylesheet">
14+
<!-- Google Icons -->
15+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
16+
<!-- Script with defer: Run the script only when the HTML parsing is finished. -->
17+
<script src="./js/script.js" defer></script>
18+
</head>
19+
<body>
20+
<div class="container">
21+
<h2>Password Generator</h2>
22+
<div class="wrapper">
23+
<div class="input-box">
24+
<input type="text" id="password-list" disable>
25+
<div class="password-icons">
26+
<div class="visibility">
27+
<span
28+
class="material-symbols-outlined">visibility</span>
29+
</div>
30+
<div class="copy_all">
31+
<span class="material-symbols-outlined">copy_all</span>
32+
</div>
33+
</div>
34+
</div>
35+
<div class="password-indicator"></div>
36+
<div class="password-length">
37+
<div class="details">
38+
<label class="title">Password Length</label>
39+
<span></span>
40+
</div>
41+
<input class="lengthRange" type="range" min="1" max="30" step="1">
42+
</div>
43+
<div class="password-settings">
44+
<label class="title">Password Settings</label>
45+
<ul class="options">
46+
<li class="option">
47+
<input type="checkbox" name="Lowercase" id="lowercase" checked>
48+
<label for="lowercase">Lowercase (a-z)</label>
49+
</li>
50+
<li class="option">
51+
<input type="checkbox" name="Uppercase" id="uppercase">
52+
<label for="uppercase">Uppercase (A-Z)</label>
53+
</li>
54+
<li class="option">
55+
<input type="checkbox" name="Numbers" id="numbers">
56+
<label for="numbers">Numbers (0-9)</label>
57+
</li>
58+
<li class="option">
59+
<input type="checkbox" name="Symbols" id="symbols">
60+
<label for="symbols">Symbols (!-$^+)</label>
61+
</li>
62+
<li class="option">
63+
<input type="checkbox" name="Exclude Duplicate" id="exclude-duplicate">
64+
<label for="exclude-duplicate">Exclude Duplicate</label>
65+
</li>
66+
<li class="option">
67+
<input type="checkbox" name="Include Spaces" id="include-spaces">
68+
<label for="include-spaces">Include Spaces</label>
69+
</li>
70+
</ul>
71+
</div>
72+
<button class="generate-btn">Generate Password</button>
73+
</div>
74+
</div>
75+
76+
77+
<!-- <script src="./js/script.js" defer></script> -->
78+
</body>
79+
</html>

‎js/script.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
const lengthSlider = document.querySelector(".password-length input"),
2+
options = document.querySelectorAll(".option input"),
3+
showIcon = document.querySelector(".visibility span"),
4+
copyIcon = document.querySelector(".copy_all span"),
5+
passwordInput = document.querySelector(".input-box input");
6+
passIndicator = document.querySelector(".password-indicator");
7+
generateBtn = document.querySelector(".generate-btn");
8+
9+
const characters = { // object of letters, numbers and symbols
10+
lowercase: "abcdefghijklmnopqrstuvwxyz",
11+
uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
12+
numbers: "0123456789",
13+
symbols: "^!$%&|[](){}:;.,*+-#@<>~",
14+
}
15+
16+
const generatePassword = () => {
17+
let staticPassword = "",
18+
randomPassword = "",
19+
excludeDuplicate = false,
20+
passLength = lengthSlider.value;
21+
22+
options.forEach(option => {
23+
if (option.checked) {
24+
if (option.id !== "exclude-duplicate" && option.id !== "include-spaces") {
25+
staticPassword += characters[option.id];
26+
} else if (option.id === "include-spaces") {
27+
staticPassword += ` ${staticPassword} `;
28+
} else {
29+
excludeDuplicate = true;
30+
}
31+
}
32+
});
33+
34+
for (let i = 0; i < passLength; i++) {
35+
let randomChar = staticPassword[Math.floor(Math.random() * staticPassword.length)];
36+
37+
if(excludeDuplicate) {
38+
!randomPassword.includes(randomChar) || randomChar == " " ? randomPassword += randomChar : i--;
39+
} else {
40+
randomPassword += randomChar;
41+
}
42+
}
43+
passwordInput.value = randomPassword;
44+
}
45+
46+
const updatepassIndicator = () => {
47+
passIndicator.id = lengthSlider.value <= 8 ? "weak" : lengthSlider.value <= 16 ? "medium" : "strong";
48+
}
49+
50+
const updateSlider = () => {
51+
document.querySelector(".password-length span").innerText = lengthSlider.value;
52+
generatePassword();
53+
updatepassIndicator();
54+
}
55+
56+
/* Password copy function. */
57+
const copyPassword = () => {
58+
navigator.clipboard.writeText(passwordInput.value);
59+
copyIcon.innerText = "check";
60+
setTimeout(() => {
61+
copyIcon.innerText = "copy_all"
62+
}, 1500);
63+
}
64+
65+
/* Show/hide password function. */
66+
const showPassword = () => {
67+
const type = passwordInput.getAttribute("type") === "text" ? "password" : "text";
68+
passwordInput.setAttribute("type", type);
69+
70+
type === "text" ? showIcon.innerText = "visibility" : showIcon.innerText = "visibility_off";
71+
}
72+
73+
showIcon.addEventListener("click", showPassword);
74+
copyIcon.addEventListener("click", copyPassword);
75+
lengthSlider.addEventListener("input", updateSlider);
76+
generateBtn.addEventListener("click", generatePassword);

‎readme.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# README.md
2+
3+
## 🔥 Introdução
4+
5+
Projeto de gerador de senhas, com verificação de força, com diversas opções para tornar sua senha ainda mais forte, além de poder copiar ou ocultá-la.
6+
7+
O projeto foi criado utilizando as seguintes ferramentas: HTML5, CSS3 e Javascript(ECMA6).
8+
9+
## 👨‍💻 Sobre a interface
10+
11+
A interface é bastante intuitiva, a senha será apresentada na caixa, e as opções determinarão o que você quer acrescentar (ou retirar) na senha final para que ela fique personalizada ao seu gosto!
12+
13+
Você pode ocultar para não precisar ver o resultado, e/ou copiá-la para uso de sua preferência.
14+
15+
É possível ver a interface em questão abaixo:
16+
17+
![home-page](/imgs/home-page.png)
18+
Interface no Opera.
19+
20+
### Seu funcionamento:
21+
22+
![Funcionamento](/imgs/on-gc.gif)
23+
Interface no Google Chrome.
24+
25+
## ❤️ Espero que gostem!
26+
27+
Esse é meu perfil no LinkedIn! https://www.linkedin.com/in/rubens-fs/ (se quiser me seguir, sinta-se à vontade! 😃).

‎style/style.css

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,700&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Montserrat', sans-serif;
8+
}
9+
10+
body {
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
min-height: 100vh;
15+
/* background: #4284ED; */
16+
background: linear-gradient(45deg, #8e2de2, #4a00c0);
17+
background-repeat: no-repeat;
18+
}
19+
20+
.container {
21+
width: 450px;
22+
background: #fff;
23+
border: 1px solid #4a00c0;
24+
border-radius: 8px;
25+
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
26+
}
27+
28+
.container h2 {
29+
font-weight: 600px;
30+
font-size: 1.31rem;
31+
padding: 1rem 1.175rem;
32+
border-bottom: 1px solid #d4dbe5;
33+
}
34+
35+
.wrapper {
36+
margin: 1.25rem 1.75rem;
37+
}
38+
39+
.wrapper .input-box {
40+
display: flex;
41+
justify-content: space-between;
42+
border-radius: 4px;
43+
border: 1px solid #aaa;
44+
}
45+
46+
.input-box input {
47+
width: 85%;
48+
height: 53px;
49+
color: black;
50+
background: none;
51+
font-size: 1.06rem;
52+
letter-spacing: 1.2px;
53+
font-weight: 500;
54+
padding: 0 1rem 0 1rem;
55+
border: none;
56+
}
57+
58+
.input-box span {
59+
right: 13px;
60+
cursor: pointer;
61+
line-height: 53px;
62+
padding: 0 5px;
63+
color: #707070d0;
64+
}
65+
66+
.password-icons {
67+
display: flex;
68+
}
69+
70+
.wrapper .password-indicator {
71+
width: 100%;
72+
height: 4px;
73+
position: relative;
74+
background: #dfdfdf;
75+
margin-top: 0.75rem;
76+
border-radius: 25px;
77+
}
78+
79+
.password-indicator::before {
80+
position: absolute;
81+
content: "";
82+
height: 100%;
83+
width: 50%;
84+
border-radius: inherit;
85+
transition: width 0.3s ease;
86+
}
87+
88+
.password-indicator#weak::before {
89+
width: 20%;
90+
background: #E64A4A;
91+
}
92+
93+
.password-indicator#medium::before {
94+
width: 50%;
95+
background: #f1c80b;
96+
}
97+
98+
.password-indicator#strong::before {
99+
width: 100%;
100+
background: #4285F4;
101+
}
102+
103+
.wrapper .password-length {
104+
margin: 1.56rem 0 1.25rem;
105+
}
106+
107+
.password-length .details {
108+
display: flex;
109+
justify-content: space-between;
110+
}
111+
112+
.password-length input {
113+
width: 100%;
114+
height: 12px;
115+
}
116+
117+
.password-settings .options {
118+
display: flex;
119+
list-style: none;
120+
flex-wrap: wrap;
121+
margin-top: 1rem;
122+
}
123+
124+
.password-settings .options .option {
125+
display: flex;
126+
align-items: center;
127+
margin-bottom: 1rem;
128+
width: calc(100% / 2);
129+
}
130+
131+
.options .option:first-child {
132+
pointer-events: none;
133+
}
134+
135+
.options .option:first-child input {
136+
opacity: 0.7;
137+
}
138+
139+
.options .option input {
140+
height: 16px;
141+
width: 16px;
142+
cursor: pointer;
143+
}
144+
145+
.options .option label {
146+
cursor: pointer;
147+
padding-left: 0.63rem;
148+
}
149+
150+
.wrapper .generate-btn {
151+
width: 100%;
152+
font-size: 1.06rem;
153+
padding: 0.94rem 0;
154+
border-radius: 5px;
155+
margin: 0.94rem 0 1.3rem;
156+
/* background: #2374FF; */
157+
background: linear-gradient(to left, #4776E6, #8e54e9);
158+
color: #fff;
159+
font-weight: bold;
160+
border: none;
161+
outline: none;
162+
cursor: pointer;
163+
text-transform: uppercase;
164+
}

0 commit comments

Comments
 (0)