339598u5uut / PanelControl-

Таблица со списком студентов, с фильтрами, сортировкой и формой добавления нового студента

Панель управления студентами

Таблица со студентами с фильтрами и сортировкой и формой добавления нового студента.

Технологии

• Верстка компонентами Bootstrap

• Javascript
  

• LocalStorage

Функциональность

• Форма проходит валидацию после нажатия на кнопку "добавить студента" по следующим правилам:

• все поля обязательны для заполнения,
• дата рождения находится в диапазоне от 01.01.1900 до текущей даты,
• год начала обучения находится в диапазоне от 2000-го до текущего года, Если валидация прошла успешно, то все поля очищаются, а новый студент добавляется в таблицу, в противном случае всплывают подсказки;

• Клик по ФИО сортирует по соединённой строке из фамилии, имени и отчества по алфавиту по возрастанию;
• Клик по Факультету сортирует по факультету по алфавиту по возрастанию;
• Клик по ДР и возрасту сортирует по дате рождения по возрастанию;
• Клик по Годы обучения сортирует по году начала обучения;
• Перед таблицей имеются фильтры, состоящие из полей:

• ФИО для поиска подстроки в фамилии, имени или отчестве,
• Факультет для поиска подстроки в названии факультета,
• Год начала обучения (точное совпадение),
• Год окончания обучения (точное совпадение);

• Если указано несколько фильтров, то все они применяются к массиву студентов по очереди;
• При любых изменениях в полях для фильтрации содержимое таблицы изменяется в соответствии с указанными фильтрами;

Установка

1. Создаем рабочую директорию с произвольным именем (например dev): mkdir <имя рабочей директории>;

2. Клонируем репозиторий в рабочую директорию, переходим в неё: cd <имя рабочей директории>;

3. Клонируем репозиторий: git clone https://github.com/339598u5uut/PanelControl-.git; В рабочей директории должна появиться папка проекта PanelControl-;

4. Переходим в папку с проектом: cd PanelControl-, устанавливаем зависимости: npm install;

5. Запускаем проект при помощи Live Server.

Перейти в проект: GitHubPages

---