Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2b364d0

Browse files
final version
1 parent c9093b1 commit 2b364d0

File tree

2 files changed

+124
-108
lines changed

2 files changed

+124
-108
lines changed

‎day18/STARTER-FILES/index.html

Lines changed: 85 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,96 @@
11
<!DOCTYPE html>
22
<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>18 - Password Generator || Advent of JavaScript</title>
8+
<link rel="stylesheet" href="./styles.css" />
9+
</head>
310

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>18 - Password Generator || Advent of JavaScript</title>
9-
<link rel="stylesheet" href="./styles.css" />
10-
</head>
11+
<body>
12+
<div class="wrapper">
13+
<div class="field">
14+
<input
15+
type="text"
16+
name="password"
17+
id="password"
18+
value=""
19+
min="6"
20+
max="32"
21+
steps="1"
22+
/>
1123

12-
<body>
24+
<!-- 👇🏻 Add a class of "copied" when the user clicks this button 👇🏻 -->
25+
<button class="copy">
26+
<svg
27+
width="55"
28+
height="55"
29+
viewBox="0 0 55 55"
30+
fill="none"
31+
xmlns="http://www.w3.org/2000/svg"
32+
>
33+
<path
34+
d="M37.3147 2.83081H20.6332C18.1514 2.83081 16.1332 4.85131 16.1332 7.33081V38.8308C16.1332 41.3126 18.1514 43.3308 20.6332 43.3308H43.1332C45.6149 43.3308 47.6332 41.3126 47.6332 38.8308V13.1493L37.3147 2.83081ZM43.1354 38.8308H20.6332V7.33081H34.1332V16.3308H43.1332L43.1354 38.8308Z"
35+
/>
36+
<path
37+
d="M11.6332 11.8308H7.13318V47.8308C7.13318 50.3126 9.15143 52.3308 11.6332 52.3308H38.6332V47.8308H11.6332V11.8308Z"
38+
/>
39+
</svg>
40+
<span>Copied!</span>
41+
</button>
42+
</div>
1343

14-
<div class="wrapper">
44+
<div class="field">
45+
<input
46+
type="range"
47+
name="length"
48+
id="length"
49+
value="12"
50+
min="6"
51+
max="32"
52+
/>
53+
<span id="lengthText">12</span> characters
54+
</div>
1555

16-
<div class="field">
17-
<input type="text" name="password" id="password" value="" min="6" max="32" steps="1" />
56+
<div class="field">
57+
<input
58+
type="checkbox"
59+
name="symbols"
60+
id="symbols"
61+
value="true"
62+
checked="true"
63+
/>
64+
<label for="symbols"><strong>Include Symbols</strong> (@#$%)</label>
65+
</div>
1866

19-
<!-- 👇🏻 Add a class of "copied" when the user clicks this button 👇🏻 -->
20-
<button class="copy">
21-
<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
22-
<path
23-
d="M37.3147 2.83081H20.6332C18.1514 2.83081 16.1332 4.85131 16.1332 7.33081V38.8308C16.1332 41.3126 18.1514 43.3308 20.6332 43.3308H43.1332C45.6149 43.3308 47.6332 41.3126 47.6332 38.8308V13.1493L37.3147 2.83081ZM43.1354 38.8308H20.6332V7.33081H34.1332V16.3308H43.1332L43.1354 38.8308Z" />
24-
<path
25-
d="M11.6332 11.8308H7.13318V47.8308C7.13318 50.3126 9.15143 52.3308 11.6332 52.3308H38.6332V47.8308H11.6332V11.8308Z" />
26-
</svg>
27-
<span>Copied!</span>
28-
</button>
29-
</div>
30-
31-
<div class="field">
32-
<input type="range" name="length" id="length" value="12" min="6" max="32" />
33-
<span id="lengthText">12</span> characters
34-
</div>
67+
<div class="field">
68+
<input type="checkbox" name="numbers" id="numbers" checked="true" />
69+
<label for="numbers"><strong>Include Numbers</strong> (1234)</label>
70+
</div>
3571

36-
<div class="field">
37-
<input type="checkbox" name="symbols" id="symbols" value="true" checked="true" />
38-
<label for="symbols"><strong>Include Symbols</strong> (@#$%)</label>
39-
</div>
72+
<div class="field">
73+
<input type="checkbox" name="lowercase" id="lowercase" checked="true" />
74+
<label for="lowercase"
75+
><strong>Include Lowercase Characters</strong> (abcd)</label
76+
>
77+
</div>
4078

41-
<div class="field">
42-
<input type="checkbox" name="numbers" id="numbers" checked="true"/>
43-
<label for="numbers"><strong>Include Numbers</strong> (1234)</label>
44-
</div>
79+
<div class="field">
80+
<input type="checkbox" name="uppercase" id="uppercase" checked="true" />
81+
<label for="uppercase"
82+
><strong>Include Uppercase Characters</strong> (ABCD)</label
83+
>
84+
</div>
4585

46-
<div class="field">
47-
<input type="checkbox" name="lowercase" id="lowercase" checked="true"/>
48-
<label for="lowercase"><strong>Include Lowercase Characters</strong> (abcd)</label>
86+
<div class="field">
87+
<input type="checkbox" name="similar" id="similar" checked="true" />
88+
<label for="similar"
89+
><strong>Include Similar Characters</strong> (i, l, 1, L, o, 0,
90+
O)</label
91+
>
92+
</div>
4993
</div>
50-
51-
<div class="field">
52-
<input type="checkbox" name="uppercase" id="uppercase" checked="true"/>
53-
<label for="uppercase"><strong>Include Uppercase Characters</strong> (ABCD)</label>
54-
</div>
55-
56-
<div class="field">
57-
<input type="checkbox" name="similar" id="similar" checked="true"/>
58-
<label for="similar"><strong>Include Similar Characters</strong> (i, l, 1, L, o, 0, O)</label>
59-
</div>
60-
61-
</div>
62-
<script src="/day18/app.js"></script>
63-
</body>
64-
65-
</html>
94+
<script src="/day18/app.js"></script>
95+
</body>
96+
</html>

‎day18/app.js

Lines changed: 39 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,46 @@
1-
const passwordElem = document.getElementById("password");
2-
3-
const lengthElem = document.querySelector("#length");
4-
const lengthTextElem = document.querySelector("#lengthText");
5-
6-
const addSymbols = document.querySelector("#symbols");
7-
const addNumbers = document.querySelector("#numbers");
8-
const addLowerCase = document.querySelector("#lowercase");
9-
const addUpperCase = document.querySelector("#uppercase");
10-
const addSimilar = document.querySelector("#similar");
11-
12-
const copyButton = document.querySelector(".copy");
13-
const copySpan = document.querySelector(".copy span");
14-
15-
const newPasswordArr = [];
1+
const passwordElem = document.getElementById("password"),
2+
lengthElem = document.querySelector("#length"),
3+
lengthTextElem = document.querySelector("#lengthText"),
4+
addSymbolsElem = document.querySelector("#symbols"),
5+
addNumbersElem = document.querySelector("#numbers"),
6+
addLowerCaseElem = document.querySelector("#lowercase"),
7+
addUpperCaseElem = document.querySelector("#uppercase"),
8+
addSimilarElem = document.querySelector("#similar"),
9+
copyButtonElem = document.querySelector(".copy"),
10+
copyButtonTextElem = document.querySelector(".copy span");
11+
12+
const newPassword = [];
1613

1714
function showSymbol() {
18-
const hasSymbols = addSymbols.checked;
19-
const hasNumbers = addNumbers.checked;
20-
const hasLowerCase = addLowerCase.checked;
21-
const hasUpperCase = addUpperCase.checked;
22-
const hasSimilar = addSimilar.checked;
23-
24-
console.log(hasSymbols, hasNumbers, hasLowerCase, hasUpperCase, hasSimilar);
25-
15+
newPassword.length = 0;
2616
hideCopiedMessage();
2717

28-
newPasswordArr.length = 0;
29-
30-
const lengthValue = lengthElem.value;
31-
// const allowLength = newPasswordArr.length < lengthValue;
32-
33-
while (newPasswordArr.length < lengthValue) {
34-
if (hasSymbols) {
35-
if (newPasswordArr.length < lengthValue)
36-
newPasswordArr.push(getRandomSymbol());
37-
}
38-
if (hasNumbers) {
39-
if (newPasswordArr.length < lengthValue)
40-
newPasswordArr.push(getRandomFromChartCode(10, 48));
41-
}
42-
if (hasLowerCase) {
43-
if (newPasswordArr.length < lengthValue)
44-
newPasswordArr.push(getRandomFromChartCode(26, 97));
45-
}
46-
if (hasUpperCase) {
47-
if (newPasswordArr.length < lengthValue)
48-
newPasswordArr.push(getRandomFromChartCode(26, 65));
49-
}
50-
if (hasSimilar) {
51-
if (newPasswordArr.length < lengthValue)
52-
newPasswordArr.push(getRandomSimilar());
18+
const lengthValue = +lengthElem.value,
19+
hasSymbols = addSymbolsElem.checked,
20+
hasNumbers = addNumbersElem.checked,
21+
hasLowerCase = addLowerCaseElem.checked,
22+
hasUpperCase = addUpperCaseElem.checked,
23+
hasSimilar = addSimilarElem.checked;
24+
25+
const checkboxesCounter =
26+
hasSymbols + hasNumbers + hasLowerCase + hasUpperCase + hasSimilar;
27+
28+
if (checkboxesCounter === 0) {
29+
passwordElem.value = "select an option";
30+
} else {
31+
while (newPassword.length < lengthValue) {
32+
if (hasSymbols) newPassword.push(getRandomSymbol());
33+
if (hasNumbers) newPassword.push(getRandomFromChartCode(10, 48));
34+
if (hasLowerCase) newPassword.push(getRandomFromChartCode(26, 97));
35+
if (hasUpperCase) newPassword.push(getRandomFromChartCode(26, 65));
36+
if (hasSimilar) newPassword.push(getRandomSimilar());
5337
}
38+
const generatedPassword = newPassword.join("");
39+
const finalPassword = generatedPassword.slice(0, lengthValue);
40+
passwordElem.value = finalPassword;
5441
}
5542

56-
passwordElem.value = newPasswordArr.join("");
57-
lengthTextElem.innerHTML =
58-
lengthElem.value + " length: (" + passwordElem.value.length + ") ";
43+
lengthTextElem.textContent = lengthElem.value;
5944
}
6045

6146
function getRandomFromChartCode(quantity, startFrom) {
@@ -72,10 +57,10 @@ function getRandomSimilar() {
7257
return similar[Math.floor(Math.random() * similar.length)];
7358
}
7459

75-
const showCopiedMessage = () => (copySpan.style.display = "block");
76-
const hideCopiedMessage = () => (copySpan.style.display = "none");
60+
const showCopiedMessage = () => (copyButtonTextElem.style.display = "block");
61+
const hideCopiedMessage = () => (copyButtonTextElem.style.display = "none");
7762

78-
copyButton.addEventListener("click", () => {
63+
copyButtonElem.addEventListener("click", () => {
7964
const input = passwordElem.value;
8065

8166
/* Copy the text inside the text field */

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /