Hover link and open dropdown using RxJS and Angular

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

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

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

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

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

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