Задание 1
Задача:
сверстать раписание лекций проекта «Мобилизация» 2016 года для трех школ.
Реализация:
-
Готовый результат можно по смотреть здесь.
-
Первоначально был написан парсер, чтобы получить все необходимые данные о лекция с разных страниц, код для сбора данных можно посмотреть в файле
js/data/getSchoolsData.js
, в настоящий момент этот файл не используется. -
Верстка реализована на
flexbox
, так как в задаче были указаны только "зеленые браузеры", в которых данный метод полностью поддерживается(ссылка на canIuse). -
В расписании отображены данные для всех трех школ, в компактном виде пользователю доступна основная информация: дата и время проведения лекции, название лекции, а также цветными иконками отмечено для какой школы проводится лекций(легенда по цвету школы доступна при детальном просмотре).
-
Сначала на странице отображаются еще предстоящие лекции, отсортированные по дате от меньшей к большей, после блока с будущими лекциями в отдельном списке расположены уже прошедшие лекции, у них доступа ссылка на материалы.
-
При клике на название лекции разворачивается детальный вид, в котором доступны: описание лекции, название аудитории, фотография лектора, при клике на которую открывается модально окно с детальной информацией, перечень школ, для которых читается лекция, а также ссылка на материалы, если лекция уже прошла.
-
Реализована фильтрация по датам, школам, аудиториям.
-
Страница адаптирована под устройства различного разрешения.
-
Страница работает во всех версияях соверемнных браузеров.
-
В разработке не было использовано сторонних библиотек, только для отображения календаря в фильтре стало необходимостью использование плагина, так как
type='date'
у тегаinput
на данный момент поддерживается не всеми перечисленными для поддержки браузерами(ссылка на canIuse). Был выбран плагин Flatpickr.
Задание 2
Задача:
Написать библиотеку, предоставляющую API для работы с расписанием лекций из первого задания.
Реализация:
-
Написана библиотека
Shedule Library
для работы с раписание из первого задания. Документация к библиотеке и пример использования. -
Реализован веб-интерфейс для библиотеки. Доступен просмотр расписания для школы в заданный промежуток дат, для аудитории в заданном диапазоне даты, а так же просмотр лекции для выбранной школы в конкретной аудитории в указанном диапазоне дат.
Есть возможность посмотреть список школ в модальном окне, а так же добавить новую школу и отредактирвоать уже имеющуюся, аналогично со списком аудиторий.
Так же при можно создать новую лекцию и отредактировать уже существующую. Кнопка редактировать "карандаш" появляется при наведении на элемент списка, редактирование достпуно только для предстоящих лекций.
-
Для удобства тестирования веб-интерфеса библиотеки данные по спискам лекций, школ, лекторов и аудитории хранятся в
localStorage
. -
В разработке не было использовано сторонних библиотек.