https://github.com/yuriyvyatkin/ahj-hw-5.1-popovers
ДЗ №1 к лекции «Работа с HTML-формами» курса «Продвинутый JavaScript в браузере» Нетологии
https://github.com/yuriyvyatkin/ahj-hw-5.1-popovers
js jsdom popover
Last synced: about 2 months ago
JSON representation
ДЗ №1 к лекции «Работа с HTML-формами» курса «Продвинутый JavaScript в браузере» Нетологии
- Host: GitHub
- URL: https://github.com/yuriyvyatkin/ahj-hw-5.1-popovers
- Owner: yuriyvyatkin
- Created: 2021-09-05T00:07:04.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-09-05T00:16:16.000Z (about 4 years ago)
- Last Synced: 2025-02-23T00:44:27.380Z (9 months ago)
- Topics: js, jsdom, popover
- Language: JavaScript
- Homepage: https://yuriyvyatkin.github.io/ahj-hw-5.1-popovers/
- Size: 157 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Домашнее задание №1 к лекции «Работа с HTML-формами»
[](https://ci.appveyor.com/project/yuriyvyatkin/ahj-hw-5-1-popovers)
## Popovers
#### Легенда
Есть замечательный фреймворк Bootstrap, в котором реализовано достаточно много интересных виджетов с использованием jQuery. Но, как говорят современные и модные программисты, "jQuery не нужен", поэтому вам нужно реализовать такой же виджет на чистом JS.
#### Описание
Вот так должен выглядеть виджет в целом, для упрощения будем считать, что виджет всегда должен показываться сверху.
У popover'а обязательно должно быть название и текст. Центрироваться он обязательно должен по горизонтали относительно элемента, который вызвал popover'а.
Не забудьте написать авто-тест на взаимодействие с DOM на базе Puppeteer или JSDOM (на ваш выбор).
**Подсказка**: страница, на которой можно "подглядеть" реализацию: https://getbootstrap.com/docs/4.3/components/popovers/. Но мы пока не проходили `translate`, `translate3d`, поэтому делайте позиционирование в px.