<section class="section">
<div class="container">
<div>Current number: <span id="numbers"></span></div>
<div>Current letter: <span id="letters"></span></div>
<br>
<div>Result stream: <span id="result"></span></div>
</div>
</section>
const numbersEl = document.getElementById('numbers');
const lettersEl = document.getElementById('letters');
const resultEl = document.getElementById('result');
// An array
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
var letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"]
// Let's create streams for our
var numbers$ = Rx.Observable
.interval(750)
.take(12)
.map(i => numbers[i])
var letters$ = Rx.Observable
.interval(1000)
.take(11)
.map(i => letters[i])
var result$ = Rx.Observable.zip(numbers$, letters$)
numbers$.subscribe(n => numbersEl.innerHTML = n);
letters$.subscribe(n => lettersEl.innerHTML = n);
result$.subscribe(n => resultEl.innerHTML = n);
This Pen doesn't use any external CSS resources.