Async with Rx.js Exercise

[00:00:00]
>> Kyle Simpson: Let's do an exercise on extending our functional principles, our functional programming principles, over asynchronous, over time, using what we just learned about observables. In this exercise, you're going to be wiring up an observable and making it do essentially a countdown timer in the console. I think it's probably best to just run this in a browser so that you can see what it's supposed to do.

[00:00:24]
So I'm just gonna switch over to a browser here and run the unfixed version of the exercise. And you'll notice that it prints out once per second these numbers, negative one, zero, one, two, three, four, and then does complete. But if I run the fixed solution file, you'll notice that it prints out a nicely formatted countdown timer, zero five, zero four, zero three, two, one, zero and complete.

[00:00:51]
So your task is to make a change to the exercise file so that it is properly formatting those numbers that are coming through into a countdown timer. Most of the scaffolding is already set up for you. I've got RxJS already loaded in there for you so you don't need to learn about how RxJS works.

[00:01:14]
And I've already given you, in the comments here, how with the latest version, this is version 6 of Rx, by the way, how with the latest version, you can take an observable and call other operators on it. It involves using the .pipe method, so that's here. And you need to list out an Rx operator to be used.

[00:01:34]
And the job that you want is to take a value that's coming in, like that negative one or that value three, and turn that value into a nicely formatted string like zero colon zero five, or zero colon zero one, the nice countdown timer string. The function that you're going to be doing that with is formatCountdown, so it's going to be receiving that value.

[00:02:00]
You need to wire formatCountdown up to this observable. And then take that number and convert it into the formatted string. So that's the substance of this exercise. Remember try it in your browser, try to see how it works. And then you can, if you need to, you can look and get a hint from the fixed file.

[00:02:25]
You shouldn't need to mess around with any of the mechanics of the setup of the reactive observable. Just simply adapting the format countdown to be added on to the end of this observable.