Skip to content

Commit 8ce5ef8

Browse files
committed
[PW-10.6/ret] Add README.md file
Adding functional, structural description for this proj (what/how). Worth noting: - that this is a realization of the "Students Dashboard" app. core: B-3 / JS-BL
1 parent 1b2f42d commit 8ce5ef8

File tree

2 files changed

+91
-0
lines changed

2 files changed

+91
-0
lines changed
Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# Students Dashboard
2+
3+
### Описание проекта
4+
5+
Данный проект представляет собой веб-приложение "Students Dashboard", предназначенное для управления данными о студентах. Основной функционал включает добавление, фильтрацию, сортировку и отображение студентов в таблице. Данные хранятся в массиве и обновляются динамически без перезагрузки страницы.
6+
7+
[🔗 Демо-версия на GitHub Pages](https://matowdev.github.io/fullstack-js-by-skillbox/core-courses/3-js-basic-level/10-type-conversion-non-strict/10-6-pw-10-type-conversion/#formInputCollapse)
8+
9+
---
10+
11+
### Функциональность
12+
13+
- **Добавление студентов** (через форму ввода с валидацией данных).
14+
- **Фильтрация студентов** по Ф.И.О., факультету, году начала и окончания обучения.
15+
- **Сортировка студентов** по различным параметрам (Ф.И.О., факультет, дата рождения, годы обучения).
16+
- **Динамическое обновление таблицы** (при изменениях в данных).
17+
- **Использование Bootstrap 5 и Tippy.js** (для стилизации и удобства работы).
18+
19+
---
20+
21+
### Внешний вид приложения
22+
23+
![Панель управления студентами](/images/final-app-view.jpg)
24+
25+
---
26+
27+
### Используемые технологии и библиотеки
28+
29+
#### Front-end:
30+
31+
- **HTML, CSS, JavaScript** – основные технологии проекта.
32+
- **Bootstrap 5.3.3** – стилизация элементов и адаптивность.
33+
- **jQuery 3.7.1** – вспомогательные манипуляции с DOM.
34+
- **Tippy.js 6.3.7** – всплывающие подсказки для элементов интерфейса.
35+
36+
---
37+
38+
### Структура проекта
39+
40+
#### Основные принципы:
41+
42+
- **Разделение кода на модули** (логика, UI-элементы, валидация).
43+
- **Использование современных технологий** для динамического взаимодействия.
44+
- **Семантическая разметка** и кросс-браузерная совместимость.
45+
46+
**Основные файлы и папки:**
47+
48+
```
49+
project-root/
50+
│── css/ # Стили проекта
51+
│── js/ # Логика приложения
52+
│── libs/ # Подключенные библиотеки
53+
│── fonts/ # Подключенные шрифты
54+
│── images/ # Графические элементы
55+
│── index.html # Основная страница панели управления
56+
│── README.md # Описание проекта
57+
```
58+
59+
---
60+
61+
### Основные файлы и их назначение
62+
63+
#### `index.html`
64+
65+
- Основная страница с панелью управления студентами.
66+
- Включает таблицу данных, форму фильтрации и добавления.
67+
68+
#### `index.js`
69+
70+
- Управляет логикой работы приложения.
71+
- Обрабатывает ввод данных, сортировку, фильтрацию и валидацию.
72+
73+
#### `customTippy.js`
74+
75+
- Реализует всплывающие подсказки (Tippy.js).
76+
77+
---
78+
79+
### Запуск проекта
80+
81+
#### Открытие локально:
82+
83+
```sh
84+
open index.html
85+
```
86+
87+
---
88+
89+
### Заключение
90+
91+
Этот проект демонстрирует работу с динамическими таблицами, обработкой пользовательского ввода и манипуляцией данных в JavaScript. Реализована удобная панель управления студентами с современным UI и интерактивными возможностями.
120 KB
Loading

0 commit comments

Comments
 (0)