diff --git a/src/pages/sign-up-index-page/index.hbs b/src/pages/sign-up-index-page/index.hbs index c8b6984..d154808 100644 --- a/src/pages/sign-up-index-page/index.hbs +++ b/src/pages/sign-up-index-page/index.hbs @@ -6,7 +6,64 @@ {{> ../../header/header pageRoute='anketa'}} -
sign up first page
+
+
+

{{ htmlWebpackPlugin.options.content.translations.ff_h }}

+
+ +
+ + +
+ +
+ + +
+
+ + +
+
+ +
+
+
+
{{> ../../footer/footer}} diff --git a/src/pages/sign-up-index-page/index.js b/src/pages/sign-up-index-page/index.js index 67aac61..e8b9e68 100644 --- a/src/pages/sign-up-index-page/index.js +++ b/src/pages/sign-up-index-page/index.js @@ -1 +1,16 @@ import './index.scss'; +import { StudentStorage } from './student-storage'; +import { StudentForm } from './student-form'; +import { PageProxy } from './page-proxy'; + +const minAdultsAge = 17; +const minTeensAge = 12; + +StudentForm.data = StudentStorage.data; +StudentForm.onChange((data) => (StudentStorage.data = data)); +StudentForm.onSubmit(() => { + if (StudentForm.age >= minAdultsAge) return PageProxy.redirectToAdults(); + if (StudentForm.age >= minTeensAge) return PageProxy.redirectToTeens(); + + PageProxy.showWarning(); +}); diff --git a/src/pages/sign-up-index-page/index.scss b/src/pages/sign-up-index-page/index.scss index e69de29..d39de41 100644 --- a/src/pages/sign-up-index-page/index.scss +++ b/src/pages/sign-up-index-page/index.scss @@ -0,0 +1,73 @@ +.first-form { + background-color: white; + border: 2px solid rgba(black, 0.08); + max-width: 550px; + padding: 20px 30px; + margin: 45px auto 50px; + box-sizing: border-box; + + h2 { + text-align: center; + } + + .warning { + background-color: #fafad2; + color: #333; + font-size: 16px; + padding: 10px 15px; + margin-bottom: 16px; + + &.hidden { + display: none; + } + + &.visible { + display: block; + } + } + + .info-input { + margin-bottom: 32px; + + label { + display: block; + width: 100%; + color: rgba(black, 0.87); + text-align: left; + + .important { + color: #e74c3c; + } + } + + input { + display: block; + width: 100%; + border: 2px solid rgba(black, 0.08); + font-family: 'Open Sans', sans-serif; + margin: 10px 0; + min-height: 48px; + appearance: inherit !important; + color: rgba(black, 0.87); + font-size: inherit; + padding: 1px 5px; + + &::placeholder { + color: #ccc; + } + } + } + + .pa { + padding: 35px; + display: flex; + justify-content: center; + flex-direction: row; + + button { + font-size: 18px; + line-height: 20px; + padding: 10px 20px; + } + } +} diff --git a/src/pages/sign-up-index-page/page-proxy.js b/src/pages/sign-up-index-page/page-proxy.js new file mode 100644 index 0000000..1a1af01 --- /dev/null +++ b/src/pages/sign-up-index-page/page-proxy.js @@ -0,0 +1,14 @@ +export const PageProxy = { + redirectToAdults() { + location.href += '/adults'; + }, + + redirectToTeens() { + location.href += '/teens'; + }, + + showWarning() { + document.querySelector('.warning').classList.remove('hidden'); + document.querySelector('.warning').classList.add('visible'); + }, +}; diff --git a/src/pages/sign-up-index-page/student-form.js b/src/pages/sign-up-index-page/student-form.js new file mode 100644 index 0000000..7465c07 --- /dev/null +++ b/src/pages/sign-up-index-page/student-form.js @@ -0,0 +1,51 @@ +const formRef = document.querySelector('form'); +const getInputRef = (name) => formRef.querySelector(`[name="${name}"]`); + +export const StudentForm = { + get formData() { + return new FormData(formRef); + }, + + get data() { + return { + name: this.formData.get('name'), + surname: this.formData.get('surname'), + birthday: this.formData.get('birthday'), + }; + }, + + set data({ name, surname, birthday }) { + getInputRef('name').value = name; + getInputRef('surname').value = surname; + getInputRef('birthday').value = birthday; + }, + + get age() { + const birthDate = this.data.birthday; + const currentDate = new Date(); + const [currentYear, currentMonth, currentDay] = [ + currentDate.getFullYear(), + currentDate.getMonth(), + currentDate.getDate(), + ]; + const [birthYear, birthMonth, birthDay] = birthDate.split('-').map((item) => +item); + let calculatedAge = currentYear - birthYear; + + if (currentMonth < birthMonth - 1) calculatedAge--; + + if (birthMonth - 1 === currentMonth && currentDay < birthDay) calculatedAge--; + + return calculatedAge; + }, + + onChange(action) { + formRef.addEventListener('input', () => action(this.data)); + }, + + onSubmit(action) { + formRef.addEventListener('submit', (event) => { + event.preventDefault(); + action(); + }); + }, +}; diff --git a/src/pages/sign-up-index-page/student-storage.js b/src/pages/sign-up-index-page/student-storage.js new file mode 100644 index 0000000..054b861 --- /dev/null +++ b/src/pages/sign-up-index-page/student-storage.js @@ -0,0 +1,21 @@ +const key = 'anketa.student'; +const storage = localStorage; +const initialData = { name: '', surname: '', birthday: '' }; + +export const StudentStorage = { + get data() { + const savedData = storage.getItem(key); + + return JSON.parse(savedData) ?? initialData; + }, + + set data(data) { + const serializedData = JSON.stringify(data); + + storage.setItem(key, serializedData); + }, + + reset() { + this.data = initialData; + }, +}; diff --git a/src/pages/sign-up-success-page/index.js b/src/pages/sign-up-success-page/index.js index e066544..a22e793 100644 --- a/src/pages/sign-up-success-page/index.js +++ b/src/pages/sign-up-success-page/index.js @@ -1,4 +1,5 @@ import './index.scss'; +import { StudentStorage } from '../sign-up-index-page/student-storage'; const pageLocalStorageKey = 'anketa/last'; const pageVisitedKey = `${pageLocalStorageKey}.isVisited`; @@ -15,6 +16,7 @@ function handleRedirects() { } document.querySelector('.content .email').innerHTML = `(${studentEmail})`; + StudentStorage.reset(); if (!localStorage.getItem(pageVisitedKey)) { localStorage.setItem(pageVisitedKey, 'true');