Build an Event Combo Observable with RxJS

RxJS>=6.5.3

Share this video with your friends

After another pat on the back from our manager, we get a notification that a new task has been assigned to us: “While most users find it useful, some have asked if they can disable the spinner. Add a feature that turns off the spinner functionality once a certain combination of keys has been pressed within a time period”. So in this lesson, we will look at building an observable factory, that can be initialized with a certain list of key codes, and will fire whenever that key combo gets pressed quickly, within a 5 second window. We will be introducing the fromEvent, concat and takeWhile operators.

Stephen James

~ 5 years ago

Was wondering what will happen if you press the A key twice? It should start the combo again.

Rares Matei(instructor)

~ 5 years ago

Was wondering what will happen if you press the A key twice? It should start the combo again.

Very good point - I guess you've seen the next lesson by now - where we'll answer this!

Colin Principe

~ 5 years ago

Hi I was following along and I got to the point where I am supposed to watch the console log (5:15) and I am not getting any log output in my console, either on the interval or the keypresses. I've tried this in both Firefox and Chrome, incognito mode, disabled all extensions, still no luck. I cloned lesson 12 branch to my machine and added the logging code, still no luck. If it matters I am using WebStorm as my IDE on a Macbook running OSX Catalina.

EDIT: I was able to get this working by exporting the keyCombo() function from EventCombo.js and importing it into TaskProgressService.js. I will admit that I am not the greatest user of the console, so if there's a way to directly monitor only EventCombo.js I'd appreciate some feedback on how.

Rares Matei(instructor)

~ 5 years ago

Hi Colin! The reason I suspect it didn't work for you initially is because the EventCombo.js file is not imported by anything. So whenever you compile your app, the combo code doesn't even make it into the final product that runs in the browser.

So if you add this line to TaskProgressService.js it should start working:

import './EventCombo';

Which is why it probably started working when you imported keyCombo in TaskProgressService.js.

If you want to practice on the EventCombo.js in isolation, I prepared this stackblitz for you: https://stackblitz.com/edit/rxjs-xtlhz7

Colin Principe

~ 5 years ago

Thanks Rares. I've really enjoyed your course - I think you do a great job explaining things and you have an enjoyable speaking style. I also have admired your animations - can you share what you're using to create them?

Rares Matei(instructor)

~ 5 years ago

Thanks for the really nice words, Colin! They made me smile in real life. I'm happy you found this useful. The animations are made by a really talented Egghead.io crew member using After Effects - see this tweet: https://twitter.com/vjthlk/status/1250319028830097411