{"id":13601504,"url":"https://github.com/AngularWave/rxjs-challenge","last_synced_at":"2025-04-11T04:31:04.097Z","repository":{"id":49783399,"uuid":"350636089","full_name":"AngularWave/rxjs-challenge","owner":"AngularWave","description":"A set of little RxJS puzzles to practice your Observable skills","archived":false,"fork":false,"pushed_at":"2021-10-19T11:13:46.000Z","size":30,"stargazers_count":584,"open_issues_count":0,"forks_count":61,"subscribers_count":24,"default_branch":"main","last_synced_at":"2024-08-02T18:40:55.815Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AngularWave.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"open_collective":"ng-web-apis","issuehunt":null,"tidelift":null,"github":null,"patreon":null,"ko_fi":null,"community_bridge":null,"liberapay":null,"otechie":null,"custom":null}},"created_at":"2021-03-23T08:33:40.000Z","updated_at":"2024-07-27T09:34:50.000Z","dependencies_parsed_at":"2022-09-24T06:40:20.963Z","dependency_job_id":null,"html_url":"https://github.com/AngularWave/rxjs-challenge","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AngularWave%2Frxjs-challenge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AngularWave%2Frxjs-challenge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AngularWave%2Frxjs-challenge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AngularWave%2Frxjs-challenge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AngularWave","download_url":"https://codeload.github.com/AngularWave/rxjs-challenge/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223458365,"owners_count":17148458,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T18:01:03.717Z","updated_at":"2024-11-07T04:30:58.774Z","avatar_url":"https://github.com/AngularWave.png","language":null,"funding_links":["https://opencollective.com/ng-web-apis"],"categories":["Others","Underlying Technologies"],"sub_categories":["RxJS"],"readme":"# RxJS Challenge\nA set of little RxJS puzzles to practice your Observable skills by [Alex](https://twitter.com/Waterplea) and [Roman](https://twitter.com/marsibarsi).\n\n## Day 01\nCreate an Observable to track focus in a section of the page.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-01)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-01-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-01-tracking-focus-within-page-section-a920bdebe4ef?source=friends_link\u0026sk=b6454a6347b045a4684bef86d218d2f9)\n\n## Day 02\nCreate a page visibility stream.\n\n*Additional Angular task:* make it a global DI injection token.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-2)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-2-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-02-creating-a-page-visibility-stream-adf829324eb1?sk=cf4d27f8a40367d0b1ea2542974ec57f)\n\n## Day 03\nShow error message for 5 seconds if login has failed.\n\n*Bonus task:* show user name instead of button upon successful login and disable button during server request.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-03)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-03-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-03-showing-error-message-for-a-period-of-time-15b428d49315?sk=5c0907b3827fc6270429796ec530ee76)\n\n## Day 04\n\nMake a loading with progress bar until result.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-4)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-4-solution)\n- [Article](https://medium.com/angularwave/lets-make-loading-with-progress-bar-until-result-rxjs-challenge-04-f638d3cfc539?sk=e5ab427bc7fd33d4843185f1686a359b)\n\n## Day 05\n\nCreate a countdown and a button to restart it.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-05)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-05-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-5-making-a-countdown-6cd6171685cb?sk=11f7f0616bae33a270247cf48c9a590c)\n\n## Day 06\n\nWrite a stream of selected seats for users of cinema website.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-6)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-6-solution)\n- [Article](https://medium.com/angularwave/rxjs-ng-challenge-6-picking-cinema-seats-8d73dbaadcea?sk=11eaf62c8ce3faf5392abf4e5d0b3495)\n\n## Day 07\n\nMake a sticky header that disappears when you scroll down and re-appears when you scroll up.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-07)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-07-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-7-disappearing-sticky-header-b7689c23bf66?sk=8d4e3385925b110a207e978d0ed6a190)\n\n## Day 08\n\nMake an operator function to prevent unnecessary backend requests when it is possible to calculate items locally.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-8)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-8-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-8-smart-search-operator-function-e619bee10392?sk=105ce13efe946593d252557164dfb7a8)\n\n## Day 09\n\nMake subtitles appear in pairs for a karaoke game.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-09)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-09-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-09-karaoke-subtitles-39cc5c133746?sk=156ec25cc123491bd299694f7484e12c)\n\n## Day 10\n\nMake a color picker.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-10)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-10-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-10-color-picker-palette-71e99e28b400?sk=1f624b2be951544a2399865c52f9366f)\n\n## Day 11\n\nMake a toast notification disappear in 3 seconds unless user holds cursor over it.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-11)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-11-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-11-auto-close-notification-23910ea53218?sk=d7ad0a1f5dee2297a5d1181c58192e79)\n\n## Day 12\n\nMake a modal close on Esc key and by clicking outside.\n\n*Important*: only clicks that both started and ended outside count! \n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-12)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-12-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-12-modal-closing-4c01884db556?sk=6fe05ac705672468ddd257263224f5e1)\n\n## Day 13\n\nMake a sticky header that shrinks proportionally when you scroll down. \nA common pattern for mobile devices so header takes less screen estate when page is scrolled.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-13)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-13-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-13-shrinking-header-72fc672a5b6a?sk=6501dd68073698c3bb0869a653ad5e57)\n\n## Day 14\n\nYou have an area with folders. Allow user to select several folders dragging their mouse (like on desktop).\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-14)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-14-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-14-select-folders-d1838087ba47?sk=698d4e240f0a186eb20b972ba15827c4)\n\n## Day 15\n\nDetermine whether an element was focused with keyboard, mouse, touch or programmatically.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-15)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-15-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-15-tracking-focus-type-aa8309f52bc1?sk=d9f84ac05cc25d704ad071f8d6c111bf)\n\n## Day 16\n\nThere is a picture in some preview app and logic that handles user events and collect them in three streams: `drag$`, `rotation$` and `zoom$`. \n\nMake an RxJS stream that will transform a picture inside zone according to drag events, rotation and zoom.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-16)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-16-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-16-image-viewer-30cf01d61f0a?sk=59dcb0b698d2ab62f436b7b00b79a612)\n\n## Day 17\n\nCreate a no-flicker loading message (if loading took \u003c 1 sec. do not show it, if loading took \u003e 1 sec. show it for at least 1 sec).\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-17)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-17-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-17-non-flicker-loader-15545d3be525?sk=35996e885123bc2881ec61288a5b47eb)\n\n\n## Day 18\n\nImitate native iOS and Android pull-to-refresh behavior.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-18)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-18-solution)\n- [Article](https://medium.com/angularwave/rxjs-and-angular-pull-to-refresh-that-emulates-native-ios-and-android-rxjs-challenge-18-75408c53f66?sk=a527a38925c1bbb0e623fd6169faa7d0)\n\n\n## Day 19\n\nCreate Observable based on requestAnimationFrame and show FPS meter.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-19)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-19-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-19-fps-meter-a44383e2bd6d?sk=5b25c343f2cb793431a166f5d09e9db9)\n\n\n## Day 20\n\nRecreate classic Material Design ripple effect.\n\n- [Template](https://stackblitz.com/edit/rxjs-challenge-20)\n- [Solution](https://stackblitz.com/edit/rxjs-challenge-20-solution)\n- [Article](https://medium.com/angularwave/rxjs-challenge-20-ripple-68b62a77fba8?sk=f31d29e8d8c5bd3b311dc59d64ac6217)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAngularWave%2Frxjs-challenge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAngularWave%2Frxjs-challenge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAngularWave%2Frxjs-challenge/lists"}