Проект «Код и магия» интенсивного онлайн-курса «Базовый JavaScript».
- Технологии: HTML5, CSS3, Javascript, Webpack, Git, npm.
- Поддержка: IE11+.
Проект изначально был сверстан и включал в себя функционал игры.
- Страница игры http://birra05.github.io/code-and-magick/
-
Canvas
- Метод drawPauseScreen доработан таким образом, чтобы вместо вывода в консоль сообщения показывались на игровом экране. Каждое сообщение отрисовано на холсте канваса this.ctx на многоугольнике неправильной формы, под сообщением располагается тень — многоугольник такой же формы.
-
Валидация формы отзыва
- Написан сценарий валидации формы отправки отзыва. Ограничения на ввод данных:
«Имя пользователя» — обязательное поле Поле «Описание» становится обязательным, если поле «Оценка» ниже 3
- Справа от кнопки отправки находится блок .review-fields, в котором находятся «ссылки» на незаполненные обязательные поля. «Ссылки» исчезают из блока по мере заполнения полей формы. Если все обязательные поля заполнены, блок .review-fields исчезает целиком.
- Если данные, введённые в форму, невалидны, форму невозможно отправить — кнопка отправки деактивирована (добавлен атрибут disabled).
- Написан сценарий валидации формы отправки отзыва. Ограничения на ввод данных:
-
Cookies
- В файле form.js в cookies сохраняется оценка и имя пользователя. Срок жизни cookie — количество дней, прошедшее с моего ближайшего дня рождения.
- При загрузке страницы имя пользователя и оценка, записанные в cookies, ставятся в форму по умолчанию.
-
Шаблонизация
- Написан модуль инициализации списка отзывов, который:
- использует подготовленные данные, полученные по JSONP;
- генерирует HTML-код списков отзывов и добавляет этот код на страницу.
- Написан модуль инициализации списка отзывов, который:
-
AJAX и фильтры
- Загрузка данных по XMLHttpRequest.
- Фильтрация загруженного списка отзывов:
- Все — показывает список отзывов в таком виде, в котором он был загружен.
- Недавние — показывает список отзывов, оставленных за две недели, отсортированных по убыванию даты (поле date).
- Хорошие — с рейтингом не ниже 3, отсортированные по убыванию рейтинга (поле rating).
- Плохие — с рейтингом не выше 2, отсортированные по возрастанию рейтинга.
- Популярные — отсортированные по убыванию оценки отзыва (поле review_usefulness).
-
Постраничный вывод и делегирование событий
- Каждая страница состоит максимум из 3 отзывов (последняя может содержать меньше).
- Кнопка "Показать еще" показывает следующую страницу отзывов.
- Функция, устанавливающая обработчики событий на клики по фильтрам, переписана с использованием делегирования.
-
Parallax
- В зависимости от положения прокрутки положение блока с облаками смещается.
- Если игра не видна, она ставится на паузу.
-
ООП
- Создан конструктор объекта Review, который принимает на вход аргумент data и сохраняет его в приватном свойстве data. Объект Review имеет метод render, который отрисовывает элемент отзыва в списке. Модуль js/reviews.js отрисовывает отзывы, создавая объекты типа Review, а при фильтрации каждый из элементов списка удаляется через вызов removeChild у их родительского блока.
- Создан конструктор объекта Photo, который работает с данными каждой фотографии.
- Создан конструктор объекта Gallery со следующими методами:
- show и hide для показа и скрытия галереи.
- setPictures, принимающий на вход массив объектов Photo и сохраняющий его.
- setCurrentPicture, который берет фотографию с переданным индексом из массива фотографий и показывает ее в галерее.
-
Оптимизация
- Модули переписаны в стиле CommonJS.