rxjs

Create a drum kit using RxJS and Angular standalone components

by

Loading

Reading Time: 7 minutes Introduction This is day 1 of Wes Bos’s JavaScript 30 challenge where I create a drum kit to play sounds when keys are pressed. In the tutorial, I created the components using RxJS, Angular standalone components and removed the NgModules. In this blog post, I describe how the drum component (parent) uses RxJS fromEvent to … Read more

Hover link and open dropdown using RxJS and Angular

by

Loading

Reading Time: 6 minutes Introduction This is day 26 of Wes Bos’s JavaScript 30 challenge where I hover link and open dropdown below it. I am going to use RxJS and Angular to rewrite the challenge from Vanilla JavaScript. In this blog post, I describe how to use RxJS fromEvent to listen to mouseenter event and emit the event … Read more

Click and slide HTML elements using RxJS and Angular

by

Loading

Reading Time: 5 minutes Introduction This is day 27 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to click and slide a series of div elements. When mouse click occurs, I add a CSS class to the parent <div> element to perform scale transformation. When mouse is up or it exits the … Read more

Sticky navigation bar after scroll using RxJS and Angular

by

Loading

Reading Time: 6 minutes Introduction This is day 23 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to create a sticky navigation bar after window scrolls past the header. When the header is not in the viewport, I use RxJS behaviorSubject to update boolean flag to add CSS class to HTML element … Read more

Follow along link highlighter using RxJS and Angular

by

Loading

Reading Time: 7 minutes Introduction This is day 22 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to create a highlighter that follows a link when cursor hovers it. The follow along link highlighter updates CSS width, height and transform when mouseenter event occurs on the links of Angular components. In this … Read more

Text to speech tutorial using RxJS and Angular

by

Loading

Reading Time: 6 minutes Introduction This is day 23 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to create an English text to speech tutorial. The Web Speech API provides interfaces to make speech request and turn text into speech according to the selected voice. In this blog post, I describe how … Read more

Build video speed controller using RxJS and Angular

by

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

by

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

by

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

by

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