5 Homework (RxJS)

[Chebutalio]

Вимоги

1. Назва для папки з домашкою та гілки 5-rxjs;
2. Вся логіка має бути реалізована через інструменти rxjs. в "subscribe" має бути лише логіка додавання або прибирання класів, всі інші обрахунки - через оператори;
3. Для стилів використовуємо БЕМ;
4. Вьорстка має бути резиновою та адаптивною.
5. До пул реквесту має бути доданий коммент з посиланням на гітхаб пейджес.

Основне завдання

1. Додати хедер на сторінку який буде показуватися після скроллу сторінки вверх, а після скроллу вниз - ховатися;
2. Має обов'язково бути анімація ховання\показу хедера;
3. Обов'зково має бути фільтування кількості івентів скролу;
4. Хедер має ховатися\показуватися тільки якщо юзер проскролив більше 50 пікселів;
5. В Хедері має бути навігація (посилання нікуди не ведуть, але мають працювати ховери та ектів ефекти);
6. При зменшенні розміру скріна (на телефонах) Навігація має перетровитися в бургер-меню;
7. Бургер меню має нормально працювати, відкриватися-закриватися.

https://www.dropbox.com/s/ofl8be279o72lix/main-task.mov?dl=0

*Завання з **

1. Посередині контенту сторінки має бути кнопка з текстом BUY NOW і після того як юзер проскролює її то має змінюватися логіка роботи хедера;
2. У випадку коли юзер ще не доскроллив до цієї кнопки то має бути логіка хедера як в основному завданні;
3. Після скролла вверх має показуватися звичайний хедер тільки доданою кнопкою BUY NOW справа (навігація також має лишатися);
4. Після скролла вниз має показуватися хедер з текстом Get an amazing discount та кнопкою BUY NOW.

https://www.dropbox.com/s/5t29uz3yvkqox3a/advanced-task.mov?dl=0

Приклад дизайну для хедера:

[Chebutalio]

Оператори які можуть бути корисні в цьому завданні:

• fromEvent
• map
• filter
• throttleTime
• distinctUntilChanged
• pairwise
• debounceTime
• switchMap

Щоб підключити RxJS потрібно додати на сторінку скріпт з посиланням на CDN бібліотеки

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.3/rxjs.umd.min.js" integrity="sha512-JnZPWAckMDks0CCIeGznqEo7ifmYK7VowHq/NVFlSXGkwxv4OBCJFy7nouOtJZmVldHo7FQLIdeWTI55yyZc4Q==" crossorigin="anonymous"></script> Далі доступ має бути не через import а через використання поля window.rxjs

const { fromEvent } = window.rxjs;
const { map } = window.rxjs.operators;

Корисні посилання: RxJS tutorial: https://www.learnrxjs.io/ RxJS Reference: https://rxjs.dev/api Operator decision tree: https://rxjs.dev/operator-decision-tree