[RxJS] Basic DOM Rendering with Subscribe

While frameworks like Angular 2 and Cyclejs provides great ways to update the DOM and handle subscriptions for your, this L Esson shows how can still does basic subscribe blocks and manually update the DOM on your own.

ConstObservable =rx.observable;ConstStartbutton = Document.queryselector ('#start');ConstHalfbutton = Document.queryselector ('#half');ConstQuarterbutton = Document.queryselector ('#quarter');ConstStopbutton = Document.queryselector ('#stop');ConstResetbutton = Document.queryselector ('#reset');Constinput = Document.queryselector ('#input');Conststart$ = Observable.fromevent (Startbutton,'Click');Consthalf$ = Observable.fromevent (Halfbutton,'Click');Constquarter$ = Observable.fromevent (Quarterbutton,'Click');Conststop$ = Observable.fromevent (Stopbutton,'Click');Constreset$ = Observable.fromevent (Resetbutton,'Click');Constinput$ = observable.fromevent (Input,'input'). Map (Event=Event. Target.value);Constdata = {count:0};Constinc = (ACC) = ({Count:acc.count +1});Constreset = (ACC) = =data;Conststarters$ =Observable.merge (Start$.mapto ( +), Half$.mapto ( -), Quarter$.mapto ( -));ConstIntervalactions = (time) = =Observable.merge (Time) Takeuntil (stop$). Mapto (Observable.interval), reset$.mapto (reset);Consttimer$ =starters$. Switchmap (intervalactions). Startwith (data). Scan (ACC, Curr)=Curr (ACC)) timer$. Do((x) =Console.log (x)). TakeWhile (data)= Data.count <=3). Withlatestfrom (input$. Do((x) =Console.log (x)), (timer, input)=({count:timer.count, text:input})). Filter ((data)= = Data.count = = =parseint (Data.text)). Reduce ((ACC, Curr)= + ACC +1,0). Repeat (). Subscribe ((x)= Document.queryselector ('#score'). InnerHTML =' ${x} ', Err=Console.log (Err), ()= Console.log (' Complete')    );

[RxJS] Basic DOM Rendering with Subscribe