Exercise - Pipe Function

Exercise

In this exercise we are going to create a passcode login system. The goal is to validate an entered 4-digit passcode against the known valid passcode.

1. Open exercise on codesandbox. I've already imported the necessary functions, and I have created an Observable on the NodeList of buttons that emits when a button is clicked.
2. Define a new verifyPasscode function that returns the pipe() function.
3. Within the pipe() function use the bufferCount() operator to buffer the source Observable to 4 next notifications.
4. Use the mergeMap() operator to return a new Observable that is a boolean value indicating if the passcodes match. Use the sequenceEqual operator to validate the sequence of the source Observable to an Observable of the known PASSCODE constant.
5. Add the new verifyPasscode operator within the pipe() of the click event listener Observable after the map() operator.

Bonus Exercise

As a bonus, let's take our solution from above and expand the functionality. We would like to have the 4 span.dot elements "filled" as the user enters their passcode, and "cleared" after 1000 milliseconds of entering the last value for the passcode.

Let's create two new operators:

1. fillElements() accepts an elements argument that is a NodeList. Add the bg-black class to the appropriate node based on the index of the next notification in the source Observable.
2. clearElements() accepts an elements argument that is a NodeList. Remove the bg-black class from all elements after a 1000 millisecond delay.

In order to fill, and subsequently clear, a span.dot element toggle the bg-black class on the element.