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 c9093b1

Browse files
moderate functional add copy button eventListener
1 parent fe85da9 commit c9093b1

File tree

1 file changed

+64
-49
lines changed

1 file changed

+64
-49
lines changed

‎day18/app.js

Lines changed: 64 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,86 @@
1-
const passwordInput = document.getElementById("password");
1+
const passwordElem = document.getElementById("password");
22

3-
const passwordLengthElement = document.querySelector("#length");
4-
// const passwordLength = passwordLengthElement.value;
5-
const passwordLengthText = document.querySelector("#lengthText");
3+
const lengthElem = document.querySelector("#length");
4+
const lengthTextElem = document.querySelector("#lengthText");
65

7-
const selectSymbols = document.querySelector("#symbols").checked;
8-
const selectNumbers = document.querySelector("#numbers").checked;
9-
const selectLowerCase = document.querySelector("#lowercase").checked;
10-
const selectUpperCase = document.querySelector("#uppercase").checked;
11-
const selectSimilar = document.querySelector("#similar").checked;
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");
1214

1315
const newPasswordArr = [];
1416

15-
// passwordInput.onkeydown = showSymbol;
16-
passwordLengthElement.addEventListener("input", () => showSymbol());
17+
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;
1723

18-
// passwordLength.oninput = () => console.log(passwordLength.value);
24+
console.log(hasSymbols, hasNumbers, hasLowerCase, hasUpperCase, hasSimilar);
25+
26+
hideCopiedMessage();
1927

20-
function showSymbol() {
2128
newPasswordArr.length = 0;
22-
// console.log(passwordLengthElement.value);
2329

24-
for (let i = 0; i <= passwordLengthElement.value; i++) {
25-
if (selectSymbols) {
26-
newPasswordArr.push(getRandomFromChartCode(15, 33));
27-
i++;
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());
2837
}
29-
if (selectNumbers&&i<=passwordLengthElement.value) {
30-
newPasswordArr.push(getRandomFromChartCode(10,48));
31-
i++;
38+
if (hasNumbers) {
39+
if(newPasswordArr.length<lengthValue)
40+
newPasswordArr.push(getRandomFromChartCode(10,48));
3241
}
33-
if (selectLowerCase&&i<=passwordLengthElement.value) {
34-
newPasswordArr.push(getRandomFromChartCode(26,97));
35-
i++;
42+
if (hasLowerCase) {
43+
if(newPasswordArr.length<lengthValue)
44+
newPasswordArr.push(getRandomFromChartCode(26,97));
3645
}
37-
if (selectUpperCase && i <= passwordLengthElement.value) {
38-
newPasswordArr.push(getRandomFromChartCode(26, 65));
39-
i++;
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());
4053
}
41-
// if (selectSimilar) {
42-
// newPasswordArr.push(getRandomFromChartCode(15, 33));
43-
// i++;
44-
// }
4554
}
4655

47-
passwordInput.value = newPasswordArr.join("");
48-
passwordLengthText.innerHTML = passwordLengthElement.value;
56+
passwordElem.value = newPasswordArr.join("");
57+
lengthTextElem.innerHTML =
58+
lengthElem.value + " length: (" + passwordElem.value.length + ") ";
4959
}
5060

51-
// console.log(passwordLengthElement.value);
61+
function getRandomFromChartCode(quantity, startFrom) {
62+
return String.fromCharCode(Math.floor(Math.random() * quantity) + startFrom);
63+
}
5264

53-
function getRandomLower() {
54-
return Math.floor(Math.random() * 26) + 97;
55-
} // 26, 97
65+
function getRandomSymbol() {
66+
const symbols = "!@#$%^&*(){}[]=<>/,.";
67+
return symbols[Math.floor(Math.random() * symbols.length)];
68+
}
5669

57-
function getRandomUpper() {
58-
return Math.floor(Math.random() * 26) + 65;
59-
} // 26, 65
70+
function getRandomSimilar() {
71+
const similar = "il1Lo0O";
72+
return similar[Math.floor(Math.random() * similar.length)];
73+
}
6074

61-
function getRandomSymbol() {
62-
return Math.floor(Math.random() * 15) + 33;
63-
} // 15, 33
75+
const showCopiedMessage = () => (copySpan.style.display = "block");
76+
const hideCopiedMessage = () => (copySpan.style.display = "none");
6477

65-
function getRandomNumber() {
66-
return Math.floor(Math.random() * 10) + 48;
67-
} // 10, 48
78+
copyButton.addEventListener("click", () => {
79+
const input = passwordElem.value;
6880

69-
function getRandomFromChartCode(quantity, startFrom) {
70-
return String.fromCharCode(Math.floor(Math.random() * quantity) + startFrom);
71-
}
81+
/* Copy the text inside the text field */
82+
navigator.clipboard.writeText(input);
83+
showCopiedMessage();
84+
});
85+
86+
lengthElem.addEventListener("input", () => showSymbol());

0 commit comments

Comments
(0)

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