5 Homework (RxJS)

[TArch64]

Вимоги

1. Назва для папки з домашкою та гілки 5-rxjs

2. Вся логіка має бути реалізована через інструменти rxjs. в "subscribe" має бути лише логіка додавання або прибирання класів -- всі інші обрахунки через оператори

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

1. Додати хедер на сторінку який буде показуватися після скроллу сторінки вверх та після скроллу вниз -- ховатися

   • Має обов'язково бути анімація ховання\показу хедера
   • Обов'зково має бути фільтування кількості івентів скролу

2. Хедер має ховатися\показуватися тільки якщо юзер проскролив більше 50 пікселів

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

Завання з *

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

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

[TArch64]

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

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

[TArch64]

Щоб підключити 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;