Build video speed controller using RxJS and Angular

Loading

Reading Time: 4 minutes Introduction This is day 28 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to build a video speed controller. In this blog post, I describe how to compose a RxJS stream to listen to mousemove event of video speed bar and emit value to two other streams to … Read more

Create whack a mole game using RxJS and Angular

Loading

Reading Time: 8 minutes Introduction This is day 30 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to create whack a mole game. The whack a mole game defines multiple streams to perform many UI tasks at the same time: In this blog post, I describe how to create RXJS streams to … Read more

Build a reactive countdown timer using RxJS and Angular

Loading

Reading Time: 6 minutes Introduction This is day 29 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to build a reactive countdown timer. The reactive countdown timer has the following functionalities: In this blog post, I describe how to merge button click and form submit streams to create a new stream to … Read more

See RxJS counterparts of array methods in action

Loading

Reading Time: 4 minutes Introduction This is day 7 of Wes Bos’s JavaScript 30 challenge where I am going to apply some RxJS counterparts of array methods to streams to obtain results. In this blog post, I create observables from arrays and use some, every, filter, find and findIndex operators on RxJS streams to get some answers to some … Read more

Create custom operators to sum and sort RxJS streams

Loading

Reading Time: 5 minutes Introduction This is day 4 of Wes Bos’s JavaScript 30 challenge where I am going to create RxJS custom decorators to sum and sort streams. In this blog post, I describe the steps to create RxJS custom decorators, sum and sort to manipulate streams. First, I apply sort() to sort RxJS streams by a comparison … Read more

Take photos with web camera using RxJS and Angular

Loading

Reading Time: 7 minutes Introduction This is day 19 of Wes Bos’s JavaScript 30 challenge where I am going to use RxJS operators and Angular to take photos, add them to photo section for me to download to my local hard drive. In this blog post, I inject native Navigator to component such that I can load web camera … Read more

Manipulate video times using RxJS and Angular

Loading

Reading Time: 6 minutes Introduction This is day 18 of Wes Bos’s JavaScript 30 challenge where I am going to use RxJS operators and Angular to manipulate video times to calculate total, longest, shortest and average video time. In this blog post, I make a http request to obtain an array of video times from an external source. Then, … Read more

Sort data without articles using RxJS and Angular

Loading

Reading Time: 4 minutes Introduction This is day 17 of Wes Bos’s JavaScript 30 challenge and I am going to sort data without articles RxJS and Angular. In this blog post, I describe how to use RxJS operators to covert array to Observable, use function to remove articles temporarily, compare texts to determine sort order and finally map the … Read more

Animate text shadow using RxJS and Angular

Loading

Reading Time: 4 minutes Introduction This is day 16 of Wes Bos’s JavaScript 30 challenge and I am going to add CSS animation to text using RxJS and Angular. Through RxJS, I can update text shadow style of text element during mouse moves to produce the effect of CSS animation. In this blog post, I describe how to use … Read more

Synchronize data with local storage using RxJS and Angular

Loading

Reading Time: 8 minutes Introduction This is day 15 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to add, delete and check items in a list, and synchronize data with local storage. In this blog post, I describe how to use Subject and RxJS operators to listen to form submit and JavaScript … Read more