Two weeks ago, I showed you the interval card and challenged you to create a countdown to celebrate the new year.
We begin with ❚ interval
and set period of 1000
milliseconds. It creates a stream that emits incremental numbers, periodically. Remember: this card will emit 0
only 1000
ms after the stream has started.
We would like to create a countdown from 5 to 0 that:
❚ interval
never stops emitting event values. But we only need the first ones.
“We only need X” guides you to the filtering category. Then, “the first ones” helps finding the appropriate filtering card: ❚ take
.
Instead of a 0 1 2 3 4 5
stream, we are looking for 5 4 3 2 1 0
. We need to transform each value: 0
into 5
, 1
into 4
, etc.
“We need to transform each value” guides you to the transformation category and the card ❚ map
.
The first value is emitted only 1000ms after the stream has started. Naturally, the ❚ startWith
card comes to our mind when we need to “start immediatelly with a value”.
This constraint means the stream should emit the ◉ complete
notification immediately after the end value of the countdown (learn more about “completion” in Episode 9). It turns out that
❚ take
(we picked for contraint 1) does exactly that after having filtered the first N event values.
We now have picked 3 cards: ❚ take
, ❚ map
and ❚ startWith
. As we learned in Episode 3, we can put cards one after another, in a chain. Each card in this chain operates on the stream generated by the previous card. In which order do you put the cards? There are 6 chains possible:
In the case of this challenge, any of this chain could work! But you have to choose the right arguments in each scenario.
Can you write six solutions using only ❚ take
, ❚ map
and ❚ startWith
?
With the chain 3) interval ⇢ map ⇢ take ⇢ startWith
, you have to set those arguments:
More generally, here are the six chains with the proper arguments (replace count
with 5
to get a countdown from 5
to 0
):
Obviously, one could argue that some of those solutions are inelegant. Which one do you prefer?
PS. There are even more solutions to this challenge. But we need to see new categories and new cards before. I’ll update this article over the course of 2018 as we learn new things!
Freelance Developer Advocate. Motion graphics with code. JavaScript and Elm. cedricsoulas.com
Receive my latest news, product updates and programming visualizations. You can unsubscribe at any time.