Skip to content

Commit 17c24a5

Browse files
ihor-bobyrihor-bobyr
committed
implement sign-up page
1 parent 217925a commit 17c24a5

7 files changed

Lines changed: 234 additions & 1 deletion

File tree

‎src/pages/sign-up-index-page/index.hbs‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,64 @@
66
</head>
77
<body>
88
{{> ../../header/header pageRoute='anketa'}}
9-
<main>sign up first page</main>
9+
<main>
10+
<div class="first-form">
11+
<h2>{{ htmlWebpackPlugin.options.content.translations.ff_h }}</h2>
12+
<form>
13+
<div class="warning hidden">
14+
{{ htmlWebpackPlugin.options.content.translations.ff_you_are_too_young }}
15+
</div>
16+
<div class="info-input">
17+
<label for="name" class="question">
18+
{{ htmlWebpackPlugin.options.content.translations.ff_name
19+
}}<span class="important">*</span>
20+
</label>
21+
<input
22+
type="text"
23+
name="name"
24+
id="name"
25+
placeholder="{{ htmlWebpackPlugin.options.content.translations.ff_name_pl }}"
26+
pattern="^[\w'&quot;а-яА-ЯёЁіІїЇєЄґҐ\-.,:]+"
27+
required
28+
/>
29+
</div>
30+
31+
<div class="info-input">
32+
<label for="surname" class="question">
33+
{{ htmlWebpackPlugin.options.content.translations.ff_surname
34+
}}<span class="important">*</span>
35+
</label>
36+
<input
37+
type="text"
38+
name="surname"
39+
id="surname"
40+
placeholder="{{ htmlWebpackPlugin.options.content.translations.ff_surname_pl }}"
41+
pattern="^[\w'&quot;а-яА-ЯёЁіІїЇєЄґҐ\-.,:]+"
42+
required
43+
/>
44+
</div>
45+
<div class="info-input">
46+
<label for="date" class="question"
47+
>{{ htmlWebpackPlugin.options.content.translations.ff_birthday
48+
}}<span class="important">*</span></label
49+
>
50+
<input
51+
type="date"
52+
id="date"
53+
name="birthday"
54+
min="1920-12-31"
55+
value="2000-01-31"
56+
required
57+
/>
58+
</div>
59+
<div class="row pa center">
60+
<button class="button-primary">
61+
{{ htmlWebpackPlugin.options.content.translations.ff_submit }}
62+
</button>
63+
</div>
64+
</form>
65+
</div>
66+
</main>
1067
{{> ../../footer/footer}}
1168
</body>
1269
</html>

‎src/pages/sign-up-index-page/index.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,16 @@
11
import './index.scss';
2+
import { StudentStorage } from './student-storage';
3+
import { StudentForm } from './student-form';
4+
import { PageProxy } from './page-proxy';
5+
6+
const minAdultsAge = 17;
7+
const minTeensAge = 12;
8+
9+
StudentForm.data = StudentStorage.data;
10+
StudentForm.onChange((data) => (StudentStorage.data = data));
11+
StudentForm.onSubmit(() => {
12+
if (StudentForm.age >= minAdultsAge) return PageProxy.redirectToAdults();
13+
if (StudentForm.age >= minTeensAge) return PageProxy.redirectToTeens();
14+
15+
PageProxy.showWarning();
16+
});

‎src/pages/sign-up-index-page/index.scss‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.first-form {
2+
background-color: white;
3+
border: 2px solid rgba(black, 0.08);
4+
max-width: 550px;
5+
padding: 20px 30px;
6+
margin: 45px auto 50px;
7+
box-sizing: border-box;
8+
9+
h2 {
10+
text-align: center;
11+
}
12+
13+
.warning {
14+
background-color: #fafad2;
15+
color: #333;
16+
font-size: 16px;
17+
padding: 10px 15px;
18+
margin-bottom: 16px;
19+
20+
&.hidden {
21+
display: none;
22+
}
23+
24+
&.visible {
25+
display: block;
26+
}
27+
}
28+
29+
.info-input {
30+
margin-bottom: 32px;
31+
32+
label {
33+
display: block;
34+
width: 100%;
35+
color: rgba(black, 0.87);
36+
text-align: left;
37+
38+
.important {
39+
color: #e74c3c;
40+
}
41+
}
42+
43+
input {
44+
display: block;
45+
width: 100%;
46+
border: 2px solid rgba(black, 0.08);
47+
font-family: 'Open Sans', sans-serif;
48+
margin: 10px 0;
49+
min-height: 48px;
50+
appearance: inherit !important;
51+
color: rgba(black, 0.87);
52+
font-size: inherit;
53+
padding: 1px 5px;
54+
55+
&::placeholder {
56+
color: #ccc;
57+
}
58+
}
59+
}
60+
61+
.pa {
62+
padding: 35px;
63+
display: flex;
64+
justify-content: center;
65+
flex-direction: row;
66+
67+
button {
68+
font-size: 18px;
69+
line-height: 20px;
70+
padding: 10px 20px;
71+
}
72+
}
73+
}

‎src/pages/sign-up-index-page/page-proxy.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export const PageProxy = {
2+
redirectToAdults() {
3+
location.href += '/adults';
4+
},
5+
6+
redirectToTeens() {
7+
location.href += '/teens';
8+
},
9+
10+
showWarning() {
11+
document.querySelector('.warning').classList.remove('hidden');
12+
document.querySelector('.warning').classList.add('visible');
13+
},
14+
};

‎src/pages/sign-up-index-page/student-form.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
const formRef = document.querySelector('form');
2+
const getInputRef = (name) => formRef.querySelector(`[name="${name}"]`);
3+
4+
export const StudentForm = {
5+
get formData() {
6+
return new FormData(formRef);
7+
},
8+
9+
get data() {
10+
return {
11+
name: this.formData.get('name'),
12+
surname: this.formData.get('surname'),
13+
birthday: this.formData.get('birthday'),
14+
};
15+
},
16+
17+
set data({ name, surname, birthday }) {
18+
getInputRef('name').value = name;
19+
getInputRef('surname').value = surname;
20+
getInputRef('birthday').value = birthday;
21+
},
22+
23+
get age() {
24+
const birthDate = this.data.birthday;
25+
const currentDate = new Date();
26+
const [currentYear, currentMonth, currentDay] = [
27+
currentDate.getFullYear(),
28+
currentDate.getMonth(),
29+
currentDate.getDate(),
30+
];
31+
const [birthYear, birthMonth, birthDay] = birthDate.split('-').map((item) => +item);
32+
let calculatedAge = currentYear - birthYear;
33+
34+
if (currentMonth < birthMonth - 1) calculatedAge--;
35+
36+
if (birthMonth - 1 === currentMonth && currentDay < birthDay) calculatedAge--;
37+
38+
return calculatedAge;
39+
},
40+
41+
onChange(action) {
42+
formRef.addEventListener('input', () => action(this.data));
43+
},
44+
45+
onSubmit(action) {
46+
formRef.addEventListener('submit', (event) => {
47+
event.preventDefault();
48+
action();
49+
});
50+
},
51+
};

‎src/pages/sign-up-index-page/student-storage.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const key = 'anketa.student';
2+
const storage = localStorage;
3+
const initialData = { name: '', surname: '', birthday: '' };
4+
5+
export const StudentStorage = {
6+
get data() {
7+
const savedData = storage.getItem(key);
8+
9+
return JSON.parse(savedData) ?? initialData;
10+
},
11+
12+
set data(data) {
13+
const serializedData = JSON.stringify(data);
14+
15+
storage.setItem(key, serializedData);
16+
},
17+
18+
reset() {
19+
this.data = initialData;
20+
},
21+
};

‎src/pages/sign-up-success-page/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import './index.scss';
2+
import { StudentStorage } from '../sign-up-index-page/student-storage';
23

34
const pageLocalStorageKey = 'anketa/last';
45
const pageVisitedKey = `${pageLocalStorageKey}.isVisited`;
@@ -15,6 +16,7 @@ function handleRedirects() {
1516
}
1617

1718
document.querySelector('.content .email').innerHTML = `(${studentEmail})`;
19+
StudentStorage.reset();
1820

1921
if (!localStorage.getItem(pageVisitedKey)) {
2022
localStorage.setItem(pageVisitedKey, 'true');

0 commit comments

Comments
 (0)