Awesome
RxJS Challenge
A set of little RxJS puzzles to practice your Observable skills by Alex and Roman.
Day 01
Create an Observable to track focus in a section of the page.
Day 02
Create a page visibility stream.
Additional Angular task: make it a global DI injection token.
Day 03
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.
Day 04
Make a loading with progress bar until result.
Day 05
Create a countdown and a button to restart it.
Day 06
Write a stream of selected seats for users of cinema website.
Day 07
Make a sticky header that disappears when you scroll down and re-appears when you scroll up.
Day 08
Make an operator function to prevent unnecessary backend requests when it is possible to calculate items locally.
Day 09
Make subtitles appear in pairs for a karaoke game.
Day 10
Make a color picker.
Day 11
Make a toast notification disappear in 3 seconds unless user holds cursor over it.
Day 12
Make a modal close on Esc key and by clicking outside.
Important: only clicks that both started and ended outside count!
Day 13
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.
Day 14
You have an area with folders. Allow user to select several folders dragging their mouse (like on desktop).
Day 15
Determine whether an element was focused with keyboard, mouse, touch or programmatically.
Day 16
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.
Day 17
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).
Day 18
Imitate native iOS and Android pull-to-refresh behavior.
Day 19
Create Observable based on requestAnimationFrame and show FPS meter.
Day 20
Recreate classic Material Design ripple effect.