Cross-Check Library#3 - Slumrag.

[Slumrag]

1. A link to your deployed project - link

2. A link to the project repository on Github. - link

3. A link to the task - library#3

4. A Link to the checklist for evaluating the task (if it exists) - library-part3

5. A screenshot of cross-checking marks

6. A final score after self-assessment, with comments

Ваша оценка - 199 баллов

Комментарий по оценке

Формы register и login
Основные баллы потеряны из-за того, что проверяющий не смог зарегистрироваться и проверить этап 4 работы. Валидация текстовых полей происходит по регулярному выражению в атрибуте pattern. При такой реализации я не предусмотрел ввод букв не из английского алфавита. Это, скорее всего, привело к невозможности регистрации при вводе кириллицы в поле имя или фамилия. Из-за этого по всем пунктам этапа 4 выставлено 0 баллов.

Форма buy library card
В этой форме кнопка buy активна только если все поля валидны, их валидация также происходит по регулярному выражению в pattern. Поля этой формы также поддерживают ввод только букв английского алфавита.

Форма check library card
Для проверки карты зарегистрированного пользователя требуется ввести не только имя, но и фамилию.

Для всех текстовых полей форм указан атрибут title, который содержит подсказки на ввод для соответствующего текстового поля. Если введённая в поле информация не соответствует регулярному выражению, то поле приобретает красную обводку, а текст в поле становится серого цвета.

При проверке прошу учесть описанные выше особенности валидации форм

Отзыв по пунктам ТЗ:

Частично выполненные пункты:

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

Отзыв: Меню имеет отступ снизу от иконки.

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

Отзыв: Кнопка возвращается в исходное положение через 10 сек, а поля формы сбрасываются сразу после нажатия

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

Отзыв: Меню имеет отступ снизу от иконки.

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

Отзыв: Название книги не соответствует шаблону <название книги>, <автор книги>

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

Отзыв: Кнопка buy активна только когда все поля валидны

Выполненные пункты:

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

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

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

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

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

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

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

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

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

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

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

12. В блоке Favorites все кнопки должны иметь имя Buy, а не Own.

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. Данные сохраняются в хранилище localStorage, в том числе и пароль, хотя в реальной жизни так делать нельзя.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7. A cross-check score of your Score 163

[anthony-th]

Ваша оценка - 197 баллов

Отзыв по пунктам ТЗ:

Не выполненные/не засчитанные пункты:

1. Для того, чтобы кнопка Buy была активна, все поля должны быть не пустыми.
   Отзыв: если все поля заполнить правильно, то кнопка Buy не будет активна, но если в поле с именем указать имя не текущего авторизованного пользователя, то кнопка Buy неактивна. Чуть меняем имя и становится активна, то есть авторизованный пользователь не может купить книгу на свое имя

2. Expiration code содержит 2 поля с ограничением в 2 цифры.
   Отзыв: ограничения в 2 цифры нет, можно сколько угодно. Ограничение не является валидацией. Нужно было реализовать строгое ограничение на ввод только 2 цифр, без возможности ввода третьей цифры

Частично выполненные пункты:

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

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

3. Нажатие на иконку пользователя в хедере открывает меню, которое должно оказаться под иконкой таким образом, что правый верхний угол меню находится в той же точке, что и нижний правый угол контейнера с иконкой в хедере. Меню под иконкой.
   Отзыв: Меню открывается, но ошибка та же, как и при регистрации - открывается не сразу же под контейнером с иконкой, а ниже хедера ((top: calc(100% + 28px) лишнее)

Выполненные пункты:

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

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

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

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

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

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

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

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

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

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

11) В блоке Favorites все кнопки должны иметь имя Buy, а не Own. 

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

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

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

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

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

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

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

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

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

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

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

23) Данные сохраняются в хранилище localStorage, в том числе и пароль, хотя в реальной жизни так делать нельзя. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Slumrag]

@anthony-th спасибо за проверку!

[helenakrasnova]

@Slumrag не стоит закрывать ишью пока баллы не выставлены в скор, есть вероятность что в таком кейсе они не будут выставлены вовсе)

[helenakrasnova]

@anthony-th спасибо!
выставлено