jegius / igor-edu Goto Github PK

material-ripple - эфект который срабатывает на клик на компоненте
https://m2.material.io/develop/ios/supporting/ripple

1. нужно обернуть компонент компонентом ripple-component
2. нужно добавлять eventListner на событие mousedown и mouseup на обернутый элемент
3. если событие mousedown произошло - необходимо добавить элемент round и добавить на него анимацию scale и opacity
4. если произошло событие mouseup нужно удалить класс отвечающий за scale и opacity, чтобы анимация отменилась, а затем удалить элемент round
5. позиция элемента round должна определяться координатой x и y клика пользователя на обернутом элементе

• У секции должен быть якорь к котором можно было бы подскроллится при нажатии на ссылку
• секция должна растягиваться на весь экран
• контент секции должен быть спозиционирован относительно главной линии ширины (квадрат на скриншоте)
• цвет фона в секции должен зависеть от параметра secondary. Если seconday=true - то секция должны иметь серый цвет, по умолчанию белый
• Контент внутри секции должен выставляться в соответствии со стилем justufy-content: space-beween

• по умолчанию заголовок должен иметь тег h1

• заголовок должен иметь атрибут level (от 1 до 4) и в соответствии с отправленной цифрой рендерить заголовок от h1 до h4

• заголовок должен иметь атрибут text значение которого должно отображаться в теге h1

• строка прокинутая в атрибут text должна иметь возможность содержать строчные html теги (span b) и заголовок должен
  уметь парить их и подставлять им класс title__secondary

• заголовок должен иметь атрибут pimary-color значение которого должен подставлять как цвет текста в заголовке

• заголовок должен иметь атрибут secondary-color значение должно подставляться в цвет элементов с классом title__secondary

• В заголовок можно прокинуть контент между тегами, если этот контент имеется он должен отобразится в линию после заголовка.

• у загловка должен быть атрибут addisional-conntent-postion со значениями left и right, в случае если этот атрибут указан контент заголовка должен отразится слева или справа от текста заголовка

• у заголовка должен быть опциональный параметр title size и content-size, значение которого должно быть в %, которые отвечают за размер текста заголовка и размер его контент соответсвенно

• компонент должен иметь атрибут title отвечающий за заголовок карточки
• компонент должен иметь атрибут content который должен отвечать за текст в карточке
• контент карточки должен быть scrollable, т.е. если он находится за приделами видимости то пользователь должен иметь возможность проскоблить его вниз
• при hover событии контент должен иметь анимацию которая закроет картинку только зоной с текстом
• карточка должна иметь атрибут group-id которая отвечает за ее индентификионный номер группы
• компонент должен иметь атрибут event, который строкой должен прикидывать event-name - string и event-body - string
• при клики на компонент он должен эмитить эвент в в котором должен содержать имя эвента из event-name и контент из even-body и group-id в случае если есть только group-id в event-body отправлять только id

Макет - https://www.figma.com/file/Zx8FND0h2tYBdVniHbBpyJ/Plants-(Copy)?type=design&mode=design&t=N6cmwshaCN8TxTlL-1

создать компонент logo

• компонент должен иметь атрибут image-url который устанавливает image качестве бекграунда
• Компонент должен иметь атрибут href который должен вести по указанной ссылке
• В случае если указан атрибут href при наведении на компонент должен срабатывать coursor-pointer
• В случае если атрибут href не указан курсор не должен изменяться при наведении
• Компонент должен иметь атрибут text которой в случае если он отправлен в компонент должен в нем рисоваться
• В компонент должна быть возможность отправить кастомные стили в виде строки, для дополнительной стилизации.

https://vitejs.dev/guide/

Пример проекта с подключенным vite

как ее можно реализовать, смотри тут

Это будет составной компонент со своей логикой. и будет состоять из двух компонентов

1. header
   
   в котором будет фильтр.

• фильтры получаются из объекта projectService и представляют собой список объектов

{projectId: number, projectName: string, isActive: boolean} 

подсвечивается активная категория и вызывается метод projectService setActiveGroup которая будет устанавливать агривную группу для проектов

• Нужно продумать прокрутку фильтров когда их много и они не влезают по ширине (будем делать overflow-scroll-x)

2. блок с карточками - он получает спискок карточек из projectService через метод getActiveGropus, метод должен возвращать подписку, нужно незабывать отписываться от подписки в методе disconnectCallback
3. родительский компонент, отвечает только за отображение этих двух блоков

• компонент должен иметь атрибут src в который можно прокинуть url к картинки которая отобразится как background-image
• компонент должен иметь атрибут img-height отвечающий за min-height
• компонент должен иметь атрибут img-width отвечающий за min-width

Этот компонент должен заменять стандартный скролл браузера и будет использоваться в приложении для скролла. Компонент должен иметь overflow: scroll и занимать все пространство браузера (width: 100vw, height: 100vh), у него должен быть класс _scrollable, так же этот компонент должен переопределять scrollbars чтобы они одинаково выглядели на всех браузерах и платформах

• отображаемый текст должен отображаться в соответствии с атрибутом text Баттона
• Баттон должен иметь атрибут acitve который при значении true будет становится постоянно выделенным как при холере
• при наведении на active button нужно придумать анимацию которая будет показывать что мы на него навались
• Баттон должен иметь атрибут event, который строкой должен прикидывать event-name - string и event-body - string
• при клики на Баттон он должен эмитить эвент в в котором должен содержать имя эвента из event-name и контент из even-body

Создать javascript приложение которое будет отвечать за получение данных и их рендеринг с использованием созданных компонентов

header должен уметь становиться sticky и держаться сверху при скролле сайта. Хедер должен уметь вмещать в себя любые вложенные элементы. Элементы должны распологаться в хедере в соответствии с правилами стилей justify-content: space-beween.

show case в стори бук должен отображать все способности хедера