https://github.com/black-evil-dragon/interval-slider-task
Тестовое задание | UI idea
https://github.com/black-evil-dragon/interval-slider-task
gsap react scss swiper typescript webpack
Last synced: 5 months ago
JSON representation
Тестовое задание | UI idea
- Host: GitHub
- URL: https://github.com/black-evil-dragon/interval-slider-task
- Owner: black-evil-dragon
- Created: 2024-12-09T16:45:49.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-17T17:01:07.000Z (over 1 year ago)
- Last Synced: 2025-08-18T16:54:23.776Z (11 months ago)
- Topics: gsap, react, scss, swiper, typescript, webpack
- Language: TypeScript
- Homepage: https://dist-theta-orcin.vercel.app
- Size: 1.13 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Компонент IntervalSlider
Пример использования интервального слайдера в проекте React.ts+Webpack
> Увидел возможность использовать его не только для дат, но и для любых других числовых промежутков. Здесь также можно добавить возможность использовать пре/пост-фиксы, например для отображения выделенного бюджета на что-либо: "$500-100 тыс. "
В проекте тренировал Feature-Sliced Design
> Кажется сейчас излишним, и часть логики все еще можно вынести в model. Компоненты Spinner и SpinnerPoint не имеют свои css классы и стили, что надо исправить (наверное)
## Инструкция по запуску проекта
##### Клонирование
```
git clone https://github.com/black-evil-dragon/onlydigital-task.git
cd onlydigital-task
```
##### Запуск
```
cd ./app
```
```
npm install
```
```
npm run start
```
##### Запуск с помощью Docker compose (в папке onlydigital-task)
```
docker-compose -f docker-compose.dev.yml up --build
```
или для production
```
docker-compose -f docker-compose.prod.yml up --build
```
## Описание тестового задания
Реализовать следующий блок в соответствии с макетом
> https://novokuznetsk.hh.ru/vacancy/106883136?hhtmFrom=employer_vacancies
Блок содержит информацию о временных отрезках, в каждом из которых существует несколько событий.
При переключении временных отрезков изменяются соответствующие числа и под ними показывается новый слайдер, который содержит подробную информацию по ключевым событиям на активном временном отрезке.
Возможно существование от 2 до 6 временных отрезков. Все интерактивные точки на окружности располагаются на одинаковом расстоянии друг от друга
Весь блок стоит сделать независимым от другой логики на странице.
Например, если добавить на страницу ещё один такой же блок, верстка и логика работы этих блоков не будет нарушена
Демонстрация работы блока - пример с максимальным количеством временных отрезков
> https://disk.yandex.ru/d/um6QeDGxLT8wnQ
Все существующие в макете линии — это не разметочная сетка, а часть верстки
## Требования к реализации
- Необходимо использовать Typescript
- Можно использовать React.js или нативный JS на Ваш выбор
- В случае использования нативного JS, можно воспользоваться любым удобным для Вас HTML-шаблонизатором или обычным HTML
- Стилизация с использованием SASS/SCSS (В случае работы с React.js, возможно использование styled-components)
- Сборка проекта с помощью Webpack
- Для работы со слайдерами необходимо использовать библиотеку Swiper
- Для реализации js-анимаций можно использовать библиотеку gsap
- Не использовать JQuery
- Не использовать Bootstrap, Tailwind и т.п.
- Не использовать библиотеки с готовыми UI-компонентами такие, как MaterialUI, AntDesign и т.п.
Выполненное задание необходимо прислать в виде ссылки на git-репозиторий. Актуальная версия кода должна находится в основной ветке.
Файл README.md должен содержать инструкцию по запуску проекта