Вы должны реализовать UI компонент notifications с описаной функциональностью, js файл и css файл должны лежать в папке notifications. Как только вы реализовали одну из функций, вы коммитает файл. Далее реализовываете следующую функциональность и коммитаете и т.д. Можно рефакторить и коммитать исправления до дедлайна.
Необходимо реализовать компонент, который будет показываться пользователю через 5 секунд после загрузки страницы в правом верхнем углу экрана и будет отображать заданную "полезную информацию". Компонент сохраняет свою позицию при скролинге страницы. "Полезная информация" задается компоненту при его инициализации в виде массива строк.
Компонент должен содержать следующие элементы:
- (1) Иконка закрытия. При клике на нее - компонент закрывается
- (2) Чекбокс отключения нотификации, выставляет флаг в локал сторадж. В данном случае компонент не будет показан при перезагрузке страницы.
- Стрелки (3) и (4), которые переключают содержимое элемента (6) на предыдущую нотификацию или следующую нотификацию
- (5) Номер нотификации - отображает текущую позицию нотификации.
- Поддержка клавиатуры. Компонент поддерживает управление с клавиатуры. Переключение вперед/назад, закрытие по крестику.
- Должно работать в Chrome
- Нельзя использовать jQuery и другие библиотеки
- Нельзя использовать Bootstrap и другие css фреймворки
- Нельзя использовать Angular/React/Vue и другие фреймворки
- Можно использовать CSS препроцессоры
- Можно гуглить,общаться между собой и пользоваться stackoverflow
- Создать пустую html страницу (Например, index.html).
- Добавить туда текст-"рыба" (Например, https://en.wikipedia.org/wiki/Lorem_ipsum)
- Приступить к реализации компонента "Нотификация"
- Сверстать статический компонент
- Реализовать необходимую функциональность
- Комитать ваш код по ходу разработки.
1. пустая страница
2. верстка компонента
3. функциональность
4. и т.д.
- Рефакторить и коммитать исправления до дедлайна.
- Вам необходимо работать с ранее выданным приватным репозиторием.
- Весь код должен находиться в бранче
codejam-dom, папкаcodejam-dom. - После выполнения задания вам необходимо открыть Pull Request
codejam-dom->master.
- PR name should contains the task name and probably additional info.
- Changes must not contain commented code, unnecessary files, changes from other branches and generated files like *.bundle.js. Please review your changes before contributing. .editorconfig, .gitignore, etc. can be included.
- Comments in the PR are good practice.
- How to write the perfect Pull Request
- Минимум 3 коммита
- Названия коммитов должны быть согласно гайдлайна - https://www.conventionalcommits.org/en/v1.0.0-beta.2/ Основные требования:
* Allowed Types:
* docs: - *documentation only changes*
* feat: - *a new feature*
* fix: - *a bug fix*
* perf: - *a code change that improves performance*
* refactor: - *a code change that neither fixes a bug nor adds a feature*
* style: - *сhanges that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)*
* ...
* Use the present tense ("add feature" not "added feature")
* Use the imperative mood ("move cursor to..." not "moves cursor to...")
* Limit the first line to 72 characters or less
* Reference issues and pull requests liberally after the first line
- Максимальный бал за задание - 100
- Реализована верстка компонента (расположение в правом верхнем углу) +15
- Реализовано закрытие по клику на крестик +5
- Реализовано сохранение состояния в window.localStorage. Компонет не показывается при перезагрузке страницы, если пользователь его задизейблил +20
- Реализовано переключение по стрелке вперед и назад +10
- Реализован бесконечный цикл перемотки нотификаций (после последнего начинает с начала) +15
- Реализовано управление с клавиатуры +15
- Требования к репозиторию, коммитам и PR выполены +10 баллов
- В проекте создан файл
package.json, подключен пакетeslintиeslint-config-airbnb-base, код написан согласно требованийeslint-config-airbnb-base+10 баллов
Ваш ментор.