/rxjs-challenge

A set of little RxJS puzzles to practice your Observable skills

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.