JSFiddle - React, Tailwind, and code Playground

by infous

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button>Get BTC Price</button>
<p></p>

JavaScript

const { fromEvent, from } = rxjs;
const { fromFetch } = rxjs.fetch;
const { map, filter, switchMap, mergeMap, tap } = rxjs.operators;

const button = document.querySelector('button');
const p = document.querySelector('p');

const source = fromEvent(button, 'click');
const example = source.pipe(
  switchMap(event => {
    const rnd = Math.round(Math.random() * 1000);
    const url = `https://api.coinbase.com/v2/prices/spot?currency=USD&r=${rnd}`;
  	return fromFetch(url);
  }),
  mergeMap(event => from(event.json())),
  tap(event => console.log('Response data', event)),
	map(response => response.data)
 );

const subscribe = example.subscribe(
	val => p.innerHTML =	`1 ${val.base} is $${Math.round(val.amount)}`
 );