A set of little RxJS puzzles to practice your Observable skills by Alex and Roman.
Create an Observable to track focus in a section of the page.
Create a page visibility stream.
Additional Angular task: make it a global DI injection token.
Show error message for 5 seconds if login has failed.
Bonus task: show user name instead of button upon successful login and disable button during server request.
Make a loading with progress bar until result.
Create a countdown and a button to restart it.
Write a stream of selected seats for users of cinema website.
Make a sticky header that disappears when you scroll down and re-appears when you scroll up.
Make an operator function to prevent unnecessary backend requests when it is possible to calculate items locally.
Make subtitles appear in pairs for a karaoke game.
Make a color picker.
Make a toast notification disappear in 3 seconds unless user holds cursor over it.
Make a modal close on Esc key and by clicking outside.
Important: only clicks that both started and ended outside count!
Make a sticky header that shrinks proportionally when you scroll down. A common pattern for mobile devices so header takes less screen estate when page is scrolled.
You have an area with folders. Allow user to select several folders dragging their mouse (like on desktop).
Determine whether an element was focused with keyboard, mouse, touch or programmatically.
There is a picture in some preview app and logic that handles user events and collect them in three streams: drag$, rotation$ and zoom$.
Make an RxJS stream that will transform a picture inside zone according to drag events, rotation and zoom.
Create a no-flicker loading message (if loading took < 1 sec. do not show it, if loading took > 1 sec. show it for at least 1 sec).
Imitate native iOS and Android pull-to-refresh behavior.
Create Observable based on requestAnimationFrame and show FPS meter.
Recreate classic Material Design ripple effect.
