Skip to content

Commit ce1f9cb

Browse files
committed
Feat(pass-generator) create project
1 parent dd29ff8 commit ce1f9cb

File tree

3 files changed

+137
-0
lines changed

3 files changed

+137
-0
lines changed

PassWord-Generator/index.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
7+
<link rel="stylesheet" href="./style.css" />
8+
<title>Password Generator</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h2>Password Generator</h2>
13+
<span id="result"></span>
14+
<div class="result-container">
15+
<button class="btn" id="clipboard">
16+
Copy
17+
</button>
18+
</div>
19+
<div class="settings">
20+
<div class="setting">
21+
<label>Password Length</label>
22+
<input type="number" id="length" min="4" max="20" value="20">
23+
</div>
24+
<div class="setting">
25+
<label>Include uppercase letters</label>
26+
<input type="checkbox" id="uppercase" checked>
27+
</div>
28+
<div class="setting">
29+
<label>Include lowercase letters</label>
30+
<input type="checkbox" id="lowercase" checked>
31+
</div>
32+
<div class="setting">
33+
<label>Include numbers</label>
34+
<input type="checkbox" id="numbers" checked>
35+
</div>
36+
<div class="setting">
37+
<label>Include symbols</label>
38+
<input type="checkbox" id="symbols" checked>
39+
</div>
40+
<div class="setting">
41+
<label>Include text</label>
42+
<input type="text" id="text" >
43+
</div>
44+
</div>
45+
46+
<button class="btn btn-large" id="generate">
47+
Generate Password
48+
</button>
49+
</div>
50+
<script src="./main.js"></script>
51+
</body>
52+
</html>

PassWord-Generator/main.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const resultEl = document.getElementById('result')
2+
const lengthEl = document.getElementById('length')
3+
const uppercaseEl = document.getElementById('uppercase')
4+
const lowercaseEl = document.getElementById('lowercase')
5+
const numbersEl = document.getElementById('numbers')
6+
const symbolsEl = document.getElementById('symbols')
7+
const textEl = document.getElementById('text')
8+
const generateEl = document.getElementById('generate')
9+
const clipboardBtn = document.getElementById('clipboard')
10+
11+
const randomFunc = {
12+
lower: getRandomLower,
13+
upper: getRandomUpper,
14+
number: getRandomNumber,
15+
symbol: getRandomSymbol
16+
}
17+
18+
clipboardBtn.addEventListener('click', () => {
19+
const password = resultEl.innerText
20+
if (!password) return
21+
navigator.clipboard.writeText(password)
22+
})
23+
24+
generateEl.addEventListener('click', () => {
25+
const hasLower = lowercaseEl.checked
26+
const hasUpper = uppercaseEl.checked
27+
const hasNumber = numbersEl.checked
28+
const hasSymbol = symbolsEl.checked
29+
const length = +lengthEl.value
30+
const text = textEl.value
31+
32+
resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, text, length)
33+
})
34+
35+
function generatePassword(lower, upper, number, symbol, text, length) {
36+
let generatedPassword = text
37+
const typesCount = lower + upper + number + symbol
38+
const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0])
39+
40+
if (typesCount === 0) {
41+
return text.slice(0, length)
42+
}
43+
44+
45+
while (generatedPassword.length < length) {
46+
typesArr.forEach(type => {
47+
const funcName = Object.keys(type)[0]
48+
generatedPassword += randomFunc[funcName]()
49+
})
50+
}
51+
52+
53+
const finalPassword = generatedPassword.slice(0, length)
54+
55+
return finalPassword
56+
}
57+
58+
function getRandomLower() {
59+
return String.fromCharCode(Math.floor(Math.random() * 26) + 97)
60+
}
61+
62+
function getRandomUpper() {
63+
return String.fromCharCode(Math.floor(Math.random() * 26) + 65)
64+
}
65+
66+
function getRandomNumber() {
67+
return String.fromCharCode(Math.floor(Math.random() * 10) + 48)
68+
}
69+
70+
function getRandomSymbol() {
71+
const symbols = '!@#$%^&*(){}[]=<>/,.'
72+
return symbols[Math.floor(Math.random() * symbols.length)]
73+
}

PassWord-Generator/style.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
body{
2+
display: flex;
3+
justify-content: center;
4+
}
5+
.container {
6+
display: flex;
7+
flex-direction: column;
8+
justify-content: center;
9+
}
10+
#clipboard{
11+
opacity: 0;
12+
}

0 commit comments

Comments
 (0)