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 d54ceca

Browse files
day10 complete
1 parent 27a5ea2 commit d54ceca

File tree

2 files changed

+55
-25
lines changed

2 files changed

+55
-25
lines changed

‎day10/STARTER-FILES/styles.css

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;900&display=swap');
1+
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;900&display=swap");
22

33
body {
44
padding: 0;
@@ -8,12 +8,12 @@ body {
88
justify-content: center;
99
min-width: 100vw;
1010
min-height: 100vh;
11-
font-family: 'Source Sans Pro', sans-serif;
11+
font-family: "Source Sans Pro", sans-serif;
1212
}
1313

1414
.wrapper {
1515
background: white;
16-
box-shadow: 0px 23px 44px #CAD0E0;
16+
box-shadow: 0px 23px 44px #cad0e0;
1717
border-radius: 10px;
1818
min-width: 575px;
1919
padding: 70px 35px 30px;
@@ -23,7 +23,7 @@ h1 {
2323
text-align: center;
2424
letter-spacing: 0.11em;
2525
text-transform: uppercase;
26-
color: #6778E8;
26+
color: #6778e8;
2727
font-weight: 900;
2828
font-size: 20px;
2929
margin-bottom: 12px;
@@ -37,42 +37,46 @@ p {
3737
.fields {
3838
margin-bottom: 45px;
3939
display: flex;
40-
justify-content: center;;
40+
justify-content: center;
4141
}
4242

43-
input[type=text] {
44-
color: #6778E8;
43+
input[type="text"] {
44+
color: #6778e8;
4545
font-weight: 900;
4646
font-size: 3.75rem;
4747
box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.05);
4848
border-radius: 5px;
4949
margin: 0px 10px;
50-
font-family: 'Source Sans Pro', sans-serif;
50+
font-family: "Source Sans Pro", sans-serif;
5151
border: none;
5252
text-align: center;
5353
width: 80px;
54-
background: #F0F3FA;
54+
background: #f0f3fa;
5555
height: 85px;
5656
}
5757

58-
5958
button {
6059
width: 100%;
6160
text-align: center;
62-
background: linear-gradient(93.32deg, #8D9EFF -10.93%, #A674FB 113.82%);
61+
background: linear-gradient(93.32deg, #8d9eff -10.93%, #a674fb 113.82%);
6362
border-radius: 10px;
6463
border: none;
6564
height: 75px;
6665
text-transform: uppercase;
67-
color: #FFFFFF;
66+
color: #ffffff;
6867
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
6968
margin-bottom: 0;
7069
}
7170

7271
button {
73-
font-family: 'Source Sans Pro', sans-serif;
72+
font-family: "Source Sans Pro", sans-serif;
7473
font-size: 20px;
7574
font-weight: 900;
7675
letter-spacing: 0.11em;
7776
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
78-
}
77+
}
78+
79+
.pincode {
80+
-webkit-text-security: disc;
81+
-moz-text-security: disc;
82+
}

‎day10/app.js

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,47 @@
1-
const passwordFields = document.querySelectorAll("input");
1+
const passwordFields = document.querySelectorAll('input[type="text"]');
22
const verifyButton = document.querySelector("button");
33
const fields = document.querySelector(".fields");
44

55
let userPass = [];
66

77
for (let i = 0; i < passwordFields.length; i++) {
8-
passwordFields[i].onkeypress = function getKey(event) {
9-
userPass[i] = event.key;
10-
console.log(userPass);
11-
passwordFields[i].value = "*";
12-
if (i === passwordFields.length - 1) {
13-
verifyButton.focus();
14-
} else passwordFields[i + 1].focus();
8+
const cell = passwordFields[i];
9+
const nextCell = passwordFields[i + 1];
10+
11+
cell.oninput = () => {
12+
if (cell.value.length >= cell.maxLength) {
13+
if (i === passwordFields.length - 1) verifyButton.focus();
14+
else nextCell.focus();
15+
}
16+
};
17+
18+
cell.onpaste = function pastePassword(data) {
19+
const paste = (data.clipboardData || window.clipboardData).getData("text");
20+
let k = 0;
21+
22+
while (i < passwordFields.length) {
23+
passwordFields[i].value = "";
24+
passwordFields[i].value = paste.slice(k, k + 1);
25+
26+
if (i === passwordFields.length - 1) {
27+
verifyButton.focus();
28+
} else passwordFields[i + 1].focus();
29+
30+
k++;
31+
i++;
32+
}
1533
};
34+
35+
cell.classList.add("pincode");
1636
}
1737

18-
verifyButton.onclick = function passwordVerify() {
19-
if (userPass.join("") === "2819") alert("Welcome");
38+
function passwordVerify(password) {
39+
userPass = [];
40+
for (let i = 0; i < passwordFields.length; i++)
41+
userPass[i] = passwordFields[i].value;
42+
43+
if (userPass.join("") === password) alert("Welcome");
2044
else alert("Incorrect password!");
21-
};
45+
}
46+
47+
verifyButton.addEventListener("click", () => passwordVerify("2819"));

0 commit comments

Comments
(0)

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