Skip to content

Instantly share code, notes, and snippets.

@s-chand

s-chand/index.html

Created May 1, 2018 21:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save s-chand/22860c65b76a981b935b8e7d873a33de to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save s-chand/22860c65b76a981b935b8e7d873a33de to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. s-chand created this gist May 1, 2018.
    121 changes: 121 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,121 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    </head>
    <body>
    <div class="jumbotron">
    <div>
    <button id="start" class="btn btn-primary">Start</button>
    <button id="stop" class="btn btn-danger">Stop</button>
    <div class="panel">
    <div id="clock" class="panel-body text-center">
    <span class="h1" id="minutes"></span><b class="h1">:</b><span class="h1" id="seconds"></span><b class="h1">:</b><span class="h1" id="millisecond"></span>
    </div>
    </div>
    <button id="reset" class="btn btn-warning">Reset</button>
    </div>
    </div>
    <script src="https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.js"></script>

    <script id="jsbin-javascript">
    "use strict";

    var startButton = document.querySelector("#start");
    var stopButton = document.querySelector("#stop");
    var resetButton = document.querySelector("#reset");

    var start$ = Rx.Observable.fromEvent(startButton, "click");
    var stop$ = Rx.Observable.fromEvent(stopButton, "click");
    var reset$ = Rx.Observable.fromEvent(resetButton, "click");

    var milliseconds = document.querySelector("#millisecond");
    var seconds = document.querySelector("#seconds");
    var minutes = document.querySelector("#minutes");

    var interval$ = Rx.Observable.interval(10);
    var stopOrReset$ = Rx.Observable.merge(stop$, reset$);

    var toTime = function toTime(time) {
    return {
    milliseconds: Math.floor(time % 100),
    seconds: Math.floor(time / 100 % 60),
    minutes: Math.floor(time / 6000)
    };
    };
    var render = function render(time) {
    minutes.innerHTML = time.minutes;
    seconds.innerHTML = time.seconds;
    milliseconds.innerHTML = time.milliseconds;
    };

    var init = 0;
    var inc = function inc(acc) {
    return acc + 1;
    };
    var reset = function reset(acc) {
    return init;
    };
    var pausible$ = interval$.takeUntil(stopOrReset$);

    var incOrReset$ = Rx.Observable.merge(pausible$.mapTo(inc), reset$.mapTo(reset));

    app$ = start$.switchMapTo(incOrReset$).startWith(init).scan(function (acc, currentFunc) {
    return currentFunc(acc);
    }).map(toTime).subscribe(function (val) {
    return render(val);
    });
    </script>



    <script id="jsbin-source-javascript" type="text/javascript">const startButton = document.querySelector("#start")
    const stopButton = document.querySelector("#stop")
    const resetButton = document.querySelector("#reset")

    const start$ = Rx.Observable.fromEvent(startButton, "click")
    const stop$ = Rx.Observable.fromEvent(stopButton, "click")
    const reset$ = Rx.Observable.fromEvent(resetButton, "click")

    const milliseconds = document.querySelector("#millisecond")
    const seconds = document.querySelector("#seconds")
    const minutes = document.querySelector("#minutes")

    const interval$ = Rx.Observable.interval(10)
    const stopOrReset$ = Rx.Observable.merge(stop$, reset$)


    const toTime = (time) => ({
    milliseconds: Math.floor(time%100),
    seconds: Math.floor((time/100)%60),
    minutes: Math.floor(time / 6000)
    })
    const render = (time) => {
    minutes.innerHTML = time.minutes
    seconds.innerHTML = time.seconds
    milliseconds.innerHTML = time.milliseconds
    }

    const init = 0
    const inc = acc => acc +1
    const reset = acc => init
    const pausible$ = interval$.takeUntil(stopOrReset$)

    const incOrReset$ = Rx.Observable.merge(
    pausible$.mapTo(inc),
    reset$.mapTo(reset)
    )

    app$ = start$.switchMapTo(incOrReset$)
    .startWith(init)
    .scan((acc, currentFunc)=> currentFunc(acc))
    .map(toTime)
    .subscribe(val => render(val))

    </script></body>
    </html>
    46 changes: 46 additions & 0 deletions jsbin.vileqevubu.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    "use strict";

    var startButton = document.querySelector("#start");
    var stopButton = document.querySelector("#stop");
    var resetButton = document.querySelector("#reset");

    var start$ = Rx.Observable.fromEvent(startButton, "click");
    var stop$ = Rx.Observable.fromEvent(stopButton, "click");
    var reset$ = Rx.Observable.fromEvent(resetButton, "click");

    var milliseconds = document.querySelector("#millisecond");
    var seconds = document.querySelector("#seconds");
    var minutes = document.querySelector("#minutes");

    var interval$ = Rx.Observable.interval(10);
    var stopOrReset$ = Rx.Observable.merge(stop$, reset$);

    var toTime = function toTime(time) {
    return {
    milliseconds: Math.floor(time % 100),
    seconds: Math.floor(time / 100 % 60),
    minutes: Math.floor(time / 6000)
    };
    };
    var render = function render(time) {
    minutes.innerHTML = time.minutes;
    seconds.innerHTML = time.seconds;
    milliseconds.innerHTML = time.milliseconds;
    };

    var init = 0;
    var inc = function inc(acc) {
    return acc + 1;
    };
    var reset = function reset(acc) {
    return init;
    };
    var pausible$ = interval$.takeUntil(stopOrReset$);

    var incOrReset$ = Rx.Observable.merge(pausible$.mapTo(inc), reset$.mapTo(reset));

    app$ = start$.switchMapTo(incOrReset$).startWith(init).scan(function (acc, currentFunc) {
    return currentFunc(acc);
    }).map(toTime).subscribe(function (val) {
    return render(val);
    });