Skip to content

Commit 775247e

Browse files
NaeuCodeNaeuCode
committed
Adding Day #15
1 parent 6b00e3b commit 775247e

File tree

7 files changed

+231
-0
lines changed

7 files changed

+231
-0
lines changed

‎Day #15 - Multi Step Form/#15.mp4

6.41 MB
Binary file not shown.

‎Day #15 - Multi Step Form/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Day #8
2+
3+
### Multi Step Form
4+
In this tutorial ([Open in Youtube](https://youtu.be/byAC5fQhTrE)), I am gonna showing to you how to code a simple multiStep form with javascript. you can use this form in your site to get user data❗️
5+
this form also is responsive!
6+
7+
# Screenshot
8+
Here we have project screenshot :
9+
10+
![screenshot](#15.mp4)

‎Day #15 - Multi Step Form/index.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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>Day #15 - Multi Step Form | NaeuCode</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<form id="form1">
12+
<h3>Create Account</h3>
13+
<input type="text" placeholder="Email" required>
14+
<input type="password" placeholder="Password" required>
15+
<input type="password" placeholder="Confirm Password" required>
16+
17+
<div class="btn-box">
18+
<button type="button" id="next1">Next</button>
19+
</div>
20+
</form>
21+
22+
<form id="form2">
23+
<h3>Social Links</h3>
24+
<input type="text" placeholder="Instagram">
25+
<input type="text" placeholder="Github">
26+
<input type="text" placeholder="SnapChat">
27+
28+
<div class="btn-box">
29+
<button type="button" id="back1">Back</button>
30+
<button type="button" id="next2">Next</button>
31+
</div>
32+
</form>
33+
34+
<form id="form3">
35+
<h3>Personal Info</h3>
36+
<input type="text" placeholder="First Name" required>
37+
<input type="text" placeholder="Last Name" required>
38+
<input type="text" placeholder="Phon Number" required>
39+
40+
<div class="btn-box">
41+
<button type="button" id="back2">Back</button>
42+
<button type="button" id="submit">Submit</button>
43+
</div>
44+
</form>
45+
46+
<div class="step-row">
47+
<div id="progress"></div>
48+
<div class="step-col"><small>Step 1</small></div>
49+
<div class="step-col"><small>Step 2</small></div>
50+
<div class="step-col"><small>Step 3</small></div>
51+
</div>
52+
53+
</div>
54+
55+
56+
<script src="index.js"></script>
57+
</body>
58+
</html>

‎Day #15 - Multi Step Form/index.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const form1 = document.getElementById("form1");
2+
const form2 = document.getElementById("form2");
3+
const form3 = document.getElementById("form3");
4+
const next1 = document.getElementById("next1");
5+
const next2 = document.getElementById("next2");
6+
const back1 = document.getElementById("back1");
7+
const back2 = document.getElementById("back2");
8+
const progress = document.getElementById("progress");
9+
10+
11+
next1.onclick = function () {
12+
form1.style.left = "-450px";
13+
form2.style.left = "40px";
14+
progress.style.width = "240px";
15+
}
16+
17+
back1.onclick = function () {
18+
form1.style.left = "40px";
19+
form2.style.left = "450px";
20+
progress.style.width = "120px";
21+
}
22+
23+
next2.onclick = function () {
24+
form2.style.left = "-450px";
25+
form3.style.left = "40px";
26+
progress.style.width = "360px";
27+
}
28+
29+
back2.onclick = function () {
30+
form2.style.left = "40px";
31+
form3.style.left = "450px";
32+
progress.style.width = "240px";
33+
}

‎Day #15 - Multi Step Form/screen.png

339 KB
Loading

‎Day #15 - Multi Step Form/style.css

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
font-family: 'Poppins', sans-serif;
7+
}
8+
9+
body {
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
min-height: 100vh;
14+
background: linear-gradient(245deg, #e3001a, #000119);
15+
}
16+
17+
.container {
18+
width: 360px;
19+
height: 400px;
20+
margin: 8% auto;
21+
background: #fff;
22+
border-radius: 8px;
23+
position: relative;
24+
overflow: hidden;
25+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
26+
}
27+
28+
h3{
29+
text-align: center;
30+
margin-bottom: 40px;
31+
color: #101010;
32+
}
33+
34+
.container form {
35+
width: 280px;
36+
position: absolute;
37+
top: 100px;
38+
left: 40px;
39+
transition: .5s;
40+
}
41+
42+
form input{
43+
width: 100%;
44+
padding: 10px 5px;
45+
margin: 5px 0;
46+
border: 0;
47+
border-bottom: 1px solid #999;
48+
outline: none;
49+
background: transparent;
50+
}
51+
52+
::placeholder{
53+
color: #777;
54+
}
55+
56+
.btn-box {
57+
width: 100%;
58+
margin: 30px auto;
59+
text-align: center;
60+
}
61+
62+
form button {
63+
width: 110px;
64+
height: 35px;
65+
margin: 0 10px;
66+
background: #000119;
67+
border-radius: 30px;
68+
border: 0;
69+
outline: none;
70+
color: #fff;
71+
cursor: pointer;
72+
font-weight: 600;
73+
font-size: .8rem;
74+
}
75+
76+
form button:hover{
77+
background: #e3001a;
78+
transition: all .3s ease-out;
79+
}
80+
81+
#form2 {
82+
left: 450px;
83+
}
84+
85+
#form3 {
86+
left: 450px;
87+
}
88+
89+
.step-row {
90+
width: 360px;
91+
height: 40px;
92+
margin: 0 auto;
93+
display: flex;
94+
align-items: center;
95+
box-shadow: 0 -1px 5px -1px #000;
96+
position: relative;
97+
}
98+
99+
.step-col{
100+
width: 120px;
101+
text-align: center;
102+
color: #333;
103+
position: relative;
104+
}
105+
106+
#progress{
107+
position: absolute;
108+
height: 100%;
109+
width: 120px;
110+
background: linear-gradient(to right, #000119, #e3001a);
111+
}
112+
113+
small{
114+
color: #fff;
115+
font-weight: 600;
116+
font-size: .8rem;
117+
}
118+
119+
#progress::after{
120+
content: '';
121+
height: 0;
122+
width: 0;
123+
border-top: 20px solid transparent;
124+
border-bottom: 20px solid transparent;
125+
position: absolute;
126+
right: -20px;
127+
top: 0;
128+
border-left: 20px solid #e3001a;
129+
}

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,4 @@ Here we have list of projects:
2525
12. Digital Clock
2626
13. Snake Game
2727
14. Text To Speech
28+
15. Multi Step Form

0 commit comments

Comments
 (0)