<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.combineLatest(numbers$,letters$)
  
numbers$.subscribe(n => numbersEl.innerHTML = n);
letters$.subscribe(n => lettersEl.innerHTML=n);
result$.subscribe(n => resultEl.innerHTML=n);


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js
  2. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css