Skip to content

Commit c7d0174

Browse files
ayushigeorgeayushigeorge
authored
Project 41
1 parent 16bafbc commit c7d0174

File tree

3 files changed

+165
-0
lines changed

3 files changed

+165
-0
lines changed

‎project 41/index.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
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+
<link rel="stylesheet" href="style.css" />
7+
<title>Verify Account</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h2>Verify Your Account</h2>
12+
<p>
13+
We emailed you the six digit code to cool_guy@email.com <br />
14+
Enter the code below to confirm your email address.
15+
</p>
16+
<div class="code-container">
17+
<input
18+
type="number"
19+
class="code"
20+
placeholder="0"
21+
min="0"
22+
max="9"
23+
required
24+
/>
25+
<input
26+
type="number"
27+
class="code"
28+
placeholder="0"
29+
min="0"
30+
max="9"
31+
required
32+
/>
33+
<input
34+
type="number"
35+
class="code"
36+
placeholder="0"
37+
min="0"
38+
max="9"
39+
required
40+
/>
41+
<input
42+
type="number"
43+
class="code"
44+
placeholder="0"
45+
min="0"
46+
max="9"
47+
required
48+
/>
49+
<input
50+
type="number"
51+
class="code"
52+
placeholder="0"
53+
min="0"
54+
max="9"
55+
required
56+
/>
57+
<input
58+
type="number"
59+
class="code"
60+
placeholder="0"
61+
min="0"
62+
max="9"
63+
required
64+
/>
65+
</div>
66+
<small class="info">
67+
This is design only. We didn't actually send you an email as we don't
68+
have your email, right?
69+
</small>
70+
</div>
71+
<script src="script.js"></script>
72+
</body>
73+
</html>

‎project 41/script.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const codes = document.querySelectorAll(".code");
2+
3+
codes[0].focus();
4+
5+
codes.forEach((code, idx) => {
6+
code.addEventListener("keydown", (e) => {
7+
if (e.key >= 0 && e.key <= 9) {
8+
codes[idx].value = "";
9+
setTimeout(() => codes[idx + 1].focus(), 10);
10+
} else if (e.key === "Backspace") {
11+
setTimeout(() => codes[idx - 1].focus(), 10);
12+
}
13+
});
14+
});

‎project 41/style.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #fbfcfe;
9+
font-family: 'Muli', sans-serif;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100vh;
14+
overflow: hidden;
15+
margin: 0;
16+
}
17+
18+
.container {
19+
background-color: #fff;
20+
border: 3px #000 solid;
21+
border-radius: 10px;
22+
padding: 30px;
23+
max-width: 1000px;
24+
text-align: center;
25+
}
26+
27+
.code-container {
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
margin: 40px 0;
32+
}
33+
34+
.code {
35+
caret-color: transparent;
36+
border-radius: 5px;
37+
font-size: 75px;
38+
height: 120px;
39+
width: 100px;
40+
border: 1px solid #eee;
41+
margin: 1%;
42+
text-align: center;
43+
font-weight: 300;
44+
-moz-appearance: textfield;
45+
}
46+
47+
.code::-webkit-outer-spin-button,
48+
.code::-webkit-inner-spin-button {
49+
-webkit-appearance: none;
50+
margin: 0;
51+
}
52+
53+
.code:valid {
54+
border-color: #3498db;
55+
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
56+
}
57+
58+
.info {
59+
background-color: #eaeaea;
60+
display: inline-block;
61+
padding: 10px;
62+
line-height: 20px;
63+
max-width: 400px;
64+
color: #777;
65+
border-radius: 5px;
66+
}
67+
68+
@media (max-width: 600px) {
69+
.code-container {
70+
flex-wrap: wrap;
71+
}
72+
73+
.code {
74+
font-size: 60px;
75+
height: 80px;
76+
max-width: 70px;
77+
}
78+
}

0 commit comments

Comments
 (0)