Skip to content

Commit 19bd5a6

Browse files
tamannasghtamannasgh
authored
Merge pull request tamannasgh#27 from marcelotk15/feature/password-generator
📦 NEW: password generator
2 parents ab2678b + a60e385 commit 19bd5a6

File tree

3 files changed

+194
-0
lines changed

3 files changed

+194
-0
lines changed

‎basic-projects/marcelotk15-password-generator/READM.MD

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Password Generator
2+
## This project is made by Vanilla Js
3+
4+
<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/a8944298148144d4a17a3a684c4790ac" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

‎basic-projects/marcelotk15-password-generator/index.html

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>marcelotk15 - Password Genereator</title>
9+
10+
<script src="https://cdn.tailwindcss.com"></script>
11+
<script src="script.js" defer></script>
12+
13+
<style>@import url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.min.css);</style>
14+
</head>
15+
16+
<body>
17+
<section class="grid w-full h-screen content-center bg-slate-900">
18+
<div class="w-full max-w-[500px] mx-auto rounded-lg bg-slate-800 shadow p-5 text-gray-300">
19+
<div class="relative mb-2">
20+
<input
21+
type="text"
22+
id="password"
23+
class="w-full pl-3 pr-10 py-2 border-2 rounded-md focus:outline-none transition-colors bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
24+
placeholder='Password Generated'
25+
disabled
26+
>
27+
28+
<button
29+
class="block w-7 h-7 text-center text-xl leading-0 absolute top-2 right-2 text-gray-400 focus:outline-none hover:text-indigo-500 transition-colors"
30+
onclick="App.handleCopyPassword()"
31+
>
32+
<i class="mdi mdi-content-copy"></i>
33+
</button>
34+
</div>
35+
36+
<hr class="my-5 border border-gray-200">
37+
38+
<div class="mb-2">
39+
<label class="block text-xs font-semibold text-gray-500 mb-2">PASSWORD LENGTH</label>
40+
41+
<input
42+
class="w-full px-3 py-2 mb-1 border-2 rounded-md stransition-colors bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
43+
placeholder="Length"
44+
type="number"
45+
min="6"
46+
max="30"
47+
step="1" />
48+
49+
<input
50+
class="w-full bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
51+
type="range"
52+
min="6"
53+
max="30"
54+
step="1" />
55+
</div>
56+
57+
<div class='grid grid-cols-2'>
58+
<div class='px-2'>
59+
<label html='charsLower' class='flex items-start'>
60+
<input
61+
class='rounded focus:ring-2 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500 ring-offset-gray-800'
62+
id='charsLower'
63+
type='checkbox'
64+
checked
65+
onchange="App.generatePassword()" />
66+
67+
<span class='ml-2 text-sm font-medium'>LOWERCASE</span>
68+
</label>
69+
</div>
70+
71+
<div class='px-2'>
72+
<label html='charsUpper'>
73+
<input
74+
type='checkbox'
75+
class='rounded focus:ring-2 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500 ring-offset-gray-800'
76+
id='charsUpper'
77+
checked
78+
onchange="App.generatePassword()" />
79+
80+
<span class='ml-2 text-sm font-medium'>UPPERCASE</span>
81+
</label>
82+
</div>
83+
84+
<div class='px-2'>
85+
<label html='charsNumeric'>
86+
<input
87+
type='checkbox'
88+
class='rounded focus:ring-2 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500 ring-offset-gray-800'
89+
id='charsNumeric'
90+
checked
91+
onchange="App.generatePassword()" />
92+
93+
<span class='ml-2 text-sm font-medium'>NUMBERS</span>
94+
</label>
95+
</div>
96+
97+
<div class='px-2'>
98+
<label html='charsSymbols'>
99+
<input
100+
type='checkbox'
101+
class='rounded focus:ring-2 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500 ring-offset-gray-800'
102+
id='charsSymbols'
103+
checked
104+
onchange="App.generatePassword()" />
105+
106+
<span class='ml-2 text-sm font-medium'>SYMBOLS</span>
107+
</label>
108+
</div>
109+
</div>
110+
</div>
111+
</section>
112+
</body>
113+
</html>

‎basic-projects/marcelotk15-password-generator/script.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
const App = {
2+
password: '',
3+
charsLength: 12,
4+
chars: {
5+
lower: 'abcdefghijklmnopqrstuvwxyz',
6+
upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
7+
numeric: '0123456789',
8+
symbols: '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~'
9+
},
10+
11+
shuffleArray(string) {
12+
const strArray = string.split('')
13+
14+
for (let i = strArray.length - 1; i > 0; i--) {
15+
const j = Math.floor(Math.random() * (i + 1))
16+
17+
const temp = strArray[i]
18+
19+
strArray[i] = strArray[j]
20+
strArray[j] = temp
21+
}
22+
23+
return strArray.join('')
24+
},
25+
26+
generatePassword: () => {
27+
const passwordShuffled = App.shuffleArray(
28+
(document.getElementById('charsLower').checked ? App.chars.lower : '') +
29+
(document.getElementById('charsUpper').checked ? App.chars.upper : '') +
30+
(document.getElementById('charsNumeric').checked ? App.chars.numeric : '') +
31+
(document.getElementById('charsSymbols').checked ? App.chars.symbols : '')
32+
)
33+
34+
App.password = passwordShuffled.substring(0, App.charsLength)
35+
36+
document.getElementById('password').value = App.password
37+
},
38+
39+
setInputCharsLengthValue: (initEvent = false) => {
40+
const inputs = document.querySelectorAll('input[type="number"], input[type="range"]')
41+
42+
inputs.forEach(input => {
43+
input.value = App.charsLength
44+
45+
if (initEvent)
46+
input.addEventListener('change', App.handleCharsLengthChange)
47+
48+
App.generatePassword()
49+
})
50+
},
51+
52+
handleCharsLengthChange: (event) => {
53+
App.charsLength = event.target.value
54+
55+
App.setInputCharsLengthValue()
56+
},
57+
58+
handleCopyPassword: () => {
59+
navigator.clipboard.writeText(App.password)
60+
61+
const passwordInput = document.getElementById('password')
62+
63+
passwordInput.value = "Copied to Clipboard"
64+
65+
setTimeout(() => {
66+
passwordInput.value = App.password
67+
}, 1000)
68+
},
69+
70+
init: () => {
71+
App.setInputCharsLengthValue(true)
72+
},
73+
}
74+
75+
document.addEventListener('DOMContentLoaded', () => {
76+
App.init()
77+
})

0 commit comments

Comments
 (0)