Cross-Check Library#3 - Ingslam

A link to your deployed project
- link
A link to the project repository on Github.
- link
A link to the task
- link
A Link to the checklist for evaluating the task (if it exists)
- link
A screenshot of cross-checking marks
A final score after self-assessment, with comments 100/200: Выполненные пункты:

-Карусель реагирует на нажатие кнопок (кнопки под каруселью и стрелочки слева и справа в мобильной версии) и происходит анимация перелистывания. -На экране шириной 1440px проверяем, чтобы было доступно 2 других скрытых картинки. При каждом нажатии выезжает следующая, и так до границ справа и слева. -Выделенная кнопка под каруселью (имеется ввиду кнопка соответствующая активному слайду и которая имеет коричневый цвет) - неактивная. -Если анимация карусели не успела завершиться, при этом нажата была следующая кнопка, то картинка не должна зависнуть в промежуточном состоянии. -На экране шириной 768px проверяем, чтобы было доступно 4 других скрытых картинки. Для этого меняем разрешение и перезагружаем страницу. Теперь доступных перемещений становится 5. -Неактивными становятся не только выделенные кнопки, но и стрелочки на границах карусели. -"Слайдер" реагирует на нажатие кнопок панели навигации и происходит анимация затухания и проявления. -На любой ширине экрана все 4 карточки с книгами одновременно будут плавно затухать, а затем плавно проявляться следующие. -Анимация может быть прервана следующим нажатием на кнопку выбора поры года, но при этом анимация не должна застывать в промежуточном состоянии. Если анимация не была прервана следующим нажатием кнопки, то она должна отрабатывать до конца. -Во время анимаций высота блока Favorites не должна меняться. -Панель навигации "слайдера" сделана по технологии "sticky" для разрешений с одним рядом книг (768px и меньше), т.е. опускается вниз вместе со скроллом страницы, прилипая к верхней части экрана, в рамках блока Favorites. -В блоке Favorites все кнопки должны иметь имя Buy, а не Own. -Нажатие на иконку пользователя в хедере открывает меню, которое должно оказаться под иконкой таким образом, что правый верхний угол меню находится в той же точке, что и нижний правый угол контейнера с иконкой в хедере. Меню под иконкой. -На разрешении 768px, при открытом бургер-меню, оно закрывается и открывается меню авторизации. То же верно и в обратную сторону, кнопка бургер-меню должна быть доступна при открытом меню авторизации. -Нажатие на любую область или элемент вне меню приводят к закрытию меню авторизации. -Дизайн модального окна соответствует макету. -При нажатии на кнопку Register в открытом меню авторизации появляется модальное окно REGISTER, где есть поля First name, Last name, E-mail и Password. -При нажатии кнопки Sign Up в блоке Digital Library Cards также появляется модальное окно REGISTER. -Окно центрировано, а область вокруг затемнена (насколько затемнена - не имеет значения). -При нажатии на крестик в углу окна, или на затемнённую область вне этого окна, оно закрывается. В данном случае, ограничения по полям - все поля должны быть не пустыми. -Пароль должен быть не короче 8 символов. -В поле E-mail должна быть валидация типа email. -Дизайн модального окна соответствует макету. -При нажатии на кнопку Log In появляется модальное окно LOGIN, где есть поля E-mail or readers card и Password. -При нажатии кнопки Log In в блоке Digital Library Cards также появляется модальное окно LOGIN. -Окно центрировано, а область вокруг затемнена (насколько затемнена - не имеет значения). -При нажатии на крестик в углу окна, или на затемнённую область вне этого окна, оно закрывается. -Для авторизации все поля должны быть не пустыми. -Пароль должен быть не короче 8 символов.

A cross-check score of your Score 0

Ваша оценка - 112 балла Отзыв по пунктам ТЗ: Не выполненные/не засчитанные пункты: 1) В блоке Favorites все кнопки должны иметь имя Buy, а не Own. Отзыв: Проскакивают кнопки Own вместо Buy, в блоке Favourites 2) Данные сохраняются в хранилище localStorage, в том числе и пароль, хотя в реальной жизни так делать нельзя.

3) Иконка пользователя меняется на заглавные буквы имени.

4) Отображение страницы приходит в состояние после авторизации (этап 4).

5) Будет сгенерирован девятизначный Card Number случайным образом в формате 16-ричного числа.

6) Блок Digital Library Cards. Если введённые имя и номер карты совпадают с данными пользователя, то отображается панель с информацией, вместо кнопки Check the card на 10 секунд.

7) Там же после отображения информации, кнопка возвращается в прежнее состояние, а поля в форме сбрасываются.

8) Если пользователь ещё не вошёл в учётную запись, то при нажатии на любую кнопку Buy открывается модальное окно LOGIN.

9) При наведении курсором на иконку пользователя должно отображаться полное имя пользователя (атрибут title).

10) Нажатие на иконку пользователя в хедере открывает меню, которое должно оказаться под иконкой таким образом, что правый верхний угол меню находится в той же точке, что и нижний правый угол контейнера с иконкой в хедере. Меню под иконкой.

11) На разрешении 768px при открытом бургер-меню, оно закрывается и открывается меню авторизации.

12) То же верно и в обратную сторону, кнопка бургер-меню должна быть доступна.

13) Нажатие на любую область или элемент вне меню приводят к закрытию меню профиля.

14) ❗Вместо надписи Profile отображается девятизначный Card Number. Для Card Number можно использовать меньший шрифт чтобы надпись вместилась в контейнер.

15) Нажатие на кнопку My Profile открывает модальное окно MY PROFILE.

16) Нажатие на кнопку Log Out приводит к выходу пользователю из состояния авторизации, возвращаемся к этапу #1.

17) Дизайн модального окна соответствует макету.

18) Счетчик для Visits отображает, сколько раз пользователь проходил процесс авторизации, включая самый первый - регистрацию.

19) Счетчик для Books отображает, сколько у пользователя книг находятся в состоянии Own. Значение варьируется 0-16.

20) Рядом с Card Number есть кнопка, нажатие на которую копирует код карты клиента в буфер обмена.

21) Окно центрировано, а область вокруг затемнена (насколько затемнена - не имеет значения).

22) При нажатии на крестик в углу окна, или на затемненную область вне этого окна, оно закрывается.

23) При нажатии на любую кнопку Buy, еще до покупки абонемента, открывается модальное окно BUY A LIBRARY CARD.

24) При нажатии на любую кнопку Buy, после покупки абонемента, меняет вид кнопки на неактивную Own, добавляя единицу к счетчику книг в профиле.

25) Кроме того после нажатия обновляется не только счетчик, но и название книги должно отобразится в разделе Rented Books. Название формируется по принципу <название книги>, <автор книги>. В случае если название книги слишком длинное или список стал слишком большой список книг в блоке Rented Books становится скроллируемым (по необходимости горизонтально/ вертикально или оба скролла сразу) Тайтл Rented Books скроллироваться не должен

26) ❗Модальное окно нужно сделать шириной 640px. Будет это обрезка по 5px по бокам, или просто уменьшение длины с сохранением сетки - значения не имеет, хотя при правильной сеточной структуре, сделать это будет намного проще.

27) Дизайн модального окна соответствует макету.

28) При нажатии на крестик в углу окна, или на затемнённую область вне этого окна, оно закрывается.

29) Для того, чтобы кнопка Buy была активна, все поля должны быть не пустыми.

30) Bank card number должен содержать 16 цифр. С пробелами каждые 4 символа или нет - значения не имеет.

31) Expiration code содержит 2 поля с ограничением в 2 цифры.

32) CVC должен содержать 3 цифры.

33) При наличии авторизации вместо кнопки Check the Card будут отображаться данные пользователя и бейджи, как на дизайне LibraryCard after login in account.

Выполненные пункты: 1) Карусель реагирует на нажатие кнопок (кнопки под каруселью и стрелочки слева и справа в мобильной версии) и происходит анимация перелистывания.

2) На экране шириной 1440px проверяем, чтобы было доступно 2 других скрытых картинки. При каждом нажатии выезжает следующая, и так до границ справа и слева.

3) Выделенная кнопка под каруселью (имеется ввиду кнопка соответствующая активному слайду и которая имеет коричневый цвет) - неактивная.

4) Если анимация карусели не успела завершиться, при этом нажата была следующая кнопка, то картинка не должна зависнуть в промежуточном состоянии.

5) На экране шириной 768px проверяем, чтобы было доступно 4 других скрытых картинки. Для этого меняем разрешение и перезагружаем страницу. Теперь доступных перемещений становится 5.

6) Неактивными становятся не только выделенные кнопки, но и стрелочки на границах карусели.

7) "Слайдер" реагирует на нажатие кнопок панели навигации и происходит анимация затухания и проявления.

8) На любой ширине экрана все 4 карточки с книгами одновременно будут плавно затухать, а затем плавно проявляться следующие.

9) Анимация может быть прервана следующим нажатием на кнопку выбора поры года, но при этом анимация не должна застывать в промежуточном состоянии. Если анимация не была прервана следующим нажатием кнопки, то она должна отрабатывать до конца.

10) Во время анимаций высота блока Favorites не должна меняться.

11) ❗Панель навигации "слайдера" сделана по технологии "sticky" для разрешений с одним рядом книг (768px и меньше), т.е. опускается вниз вместе со скроллом страницы, прилипая к верхней части экрана, в рамках блока Favorites.

12) Нажатие на иконку пользователя в хедере открывает меню, которое должно оказаться под иконкой таким образом, что правый верхний угол меню находится в той же точке, что и нижний правый угол контейнера с иконкой в хедере. Меню под иконкой.

13) На разрешении 768px, при открытом бургер-меню, оно закрывается и открывается меню авторизации.

14) То же верно и в обратную сторону, кнопка бургер-меню должна быть доступна при открытом меню авторизации.

15) Нажатие на любую область или элемент вне меню приводят к закрытию меню авторизации.

16) Дизайн модального окна соответствует макету.

17) При нажатии на кнопку Register в открытом меню авторизации появляется модальное окно REGISTER, где есть поля First name, Last name, E-mail и Password.

18) При нажатии кнопки Sign Up в блоке Digital Library Cards также появляется модальное окно REGISTER.

19) Окно центрировано, а область вокруг затемнена (насколько затемнена - не имеет значения).

20) При нажатии на крестик в углу окна, или на затемнённую область вне этого окна, оно закрывается.

21) В данном случае, ограничения по полям - все поля должны быть не пустыми.

22) Пароль должен быть не короче 8 символов.

23) В поле E-mail должна быть валидация типа email.

24) Дизайн модального окна соответствует макету.

25) При нажатии на кнопку Log In появляется модальное окно LOGIN, где есть поля E-mail or readers card и Password.

26) При нажатии кнопки Log In в блоке Digital Library Cards также появляется модальное окно LOGIN.

27) Окно центрировано, а область вокруг затемнена (насколько затемнена - не имеет значения).

28) При нажатии на крестик в углу окна, или на затемнённую область вне этого окна, оно закрывается.

29) Для авторизации все поля должны быть не пустыми.

30) Пароль должен быть не короче 8 символов.

Хорошая работа - видно, что не доделана. Весь 4 этап пропущен - нет регистрации и авторизации. Слайдер сделан на библиотеке Swiper. но не нашел запрета на него в ТЗ.

Студенту хочется пожелать успешной дальнейшей учебы, не опускать руки и стремиться только вверх - все получится!

rolling-scopes-school / support

Cross-Check Library#3 - Ingslam #919