https://github.com/itmtm/project_bringitup
Project: Bringitup
https://github.com/itmtm/project_bringitup
accordion ajax animated animation-css api async-await constructor es6 es6-classes es6-modules fetch-api gulp gulp-webpack javascript mask oop sliders video-player
Last synced: 3 months ago
JSON representation
Project: Bringitup
- Host: GitHub
- URL: https://github.com/itmtm/project_bringitup
- Owner: ITmTm
- Created: 2023-10-02T09:59:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-05T07:04:32.000Z (over 1 year ago)
- Last Synced: 2025-01-12T17:30:35.841Z (4 months ago)
- Topics: accordion, ajax, animated, animation-css, api, async-await, constructor, es6, es6-classes, es6-modules, fetch-api, gulp, gulp-webpack, javascript, mask, oop, sliders, video-player
- Language: HTML
- Homepage: https://itmtm.github.io/Project_bringitup/
- Size: 5.17 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
PROJECT: Bringitup
Многостраничный сайт и скрипты полностью в ООП стиле
❶ Работа с классами es6 стандарта;
❷ Весь функционал прописан при помощи классов с использованием обертки функции конструктора, которые есть в JS;
❸ Работа с конструированием классов:
• со свойствами;
• c наследованием;
• с контекстом вызова this, bind(this);
• со сторонним youTube API.
➥ Реализация слайдера:
- переключение по стрелке слайдера(кнопка вверх отсутствует);
- анимация, с помощью animated.css;
- возврат на первый слайд, осуществляется кликом на лого.
➥ Реализация воспроизведение видео используя YouTube API:
- после закрытия видео останавливается, после повторного открытия, видео начинается заного(сбрасывается).
➥ Реализация вторичных слайдеров:
- на первом большом слайде, переключение маленьких слайдов, с добавлением активности;
- на 3-ем большом слайде, автопереключение маленьких слайдов с интервалом 5сек;
- при наведений курсора, автопереключение останавливается;
- на 5-ом большом слайде, показ маленьких слайдов с возможностью просмотра видео и с текстовым описанием.
➥ Реализация блока с различиями на 2-ом большом слайде:
- при клике на плючик, анимированное и интерактивное появление блока;
- на последнем клике по плюсику, блок исчезает и заменяется на информационный.
➥ Реализация форм отправки данных:
- fetch api c async / await поcредством AJAX;
- валидация email, запрет на ввод латинских букв;
- маска ввода +1 (США);
- отключение кнопки отправки с помощью disabled;
- при отправке данных, форма анамированно уходит со страницы и аналогично возвращается;
- оповещение пользователя при отправке (loading, success, failure);
- очистка инпутов после отправки.
➥ Реализация динамического видеоплеера в Modules.html:
- на большом слайдере, располошаются два видео плеера, при клике и просмотре(до конца) первого видео, разблокируется(откроется) доступ ко второму;
- переключение модулей слайдера next, prev.
➥ Реализация небольшого аккордеона;
➥ При клике Download PDF - реализуется скачивание файла.