Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>RxJS</title>
    <style>
​
    </style>
</head>
<body>
​
    <div class="container">
        <h1 contenteditable="true">TEXT</h1>
​
        <p class="text">
            <input type="text" placeholder="Text" value="TEXT"/>
        </p>
​
        <p class="size">
            <input type="number" placeholder="Size" step="10" value="40"/>
        </p>
​
        <p class="color">
            <input title="color" type="color" placeholder="Color" value="#ffffff"/>
        </p>
​
        <p id="combined"></p>
    </div>
​
​
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenMax.min.js"></script>
</body>
</html>
 
body {
    font-family: sans-serif;
    background-color: #F3F3F3;
}
​
input {
    font-size: 80%;
    padding: 1em;
    border-radius: 0.5em;
    border: 1px solid #CACACA;
}
​
input:focus {
    outline: 0;
}
​
.color input {
    border: none !important;
    background: transparent;
    padding: 0;
    width: 70px;
    height: 70px;
}
​
p.color {
    display: table-row;
}
​
h1 {
    -webkit-transition: all 500ms cubic-bezier(0.790, 0.000, 0.265, 1); /* older webkit */
    -webkit-transition: all 500ms cubic-bezier(0.790, 0.000, 0.265, 1.550);
    -moz-transition: all 500ms cubic-bezier(0.790, 0.000, 0.265, 1.550);
    -o-transition: all 500ms cubic-bezier(0.790, 0.000, 0.265, 1.550);
    transition: all 500ms cubic-bezier(0.790, 0.000, 0.265, 1.550); /* custom */
​
    -webkit-transition-timing-function: cubic-bezier(0.790, 0.000, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.790, 0.000, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.790, 0.000, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.790, 0.000, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.790, 0.000, 0.265, 1.550); /* custom */
​
    color: white;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0, 0, 0, .1),
    0 0 5px rgba(0, 0, 0, .1),
    0 1px 3px rgba(0, 0, 0, .3),
    0 3px 5px rgba(0, 0, 0, .2),
    0 5px 10px rgba(0, 0, 0, .25),
    0 10px 10px rgba(0, 0, 0, .2),
    0 20px 20px rgba(0, 0, 0, .15);
}
​
.container {
    display: table;
    margin: 0 auto;
    text-align: center;
}
​
h1 {
    font-size: 40px;
}
​
h1:focus {
    outline: none;
}
​
#combined {
    color: gray;
    line-height: 1.8;
}
 
$h1 = $('h1')
$text = $('.text>input')
$size = $('.size>input')
$color = $('.color>input')
$combined = $('#combined')
​
text = new Rx.BehaviorSubject($text.val())
size = new Rx.BehaviorSubject($size.val())
color = new Rx.BehaviorSubject($color.val())
​
​
text.subscribe (val)->
    $h1.text(val)
​
size.subscribe (val)->
    $h1.css('font-size', val + 'px')
​
color.subscribe (val)->
    $h1.css('color', val)
​
bind = (eType, elem, subject)->
    Rx.Observable.fromEvent(elem, eType).subscribe (e)->
        subject.onNext(e.target.value)
​
text.combineLatest size, color, (text, size, color)->
    return "text: #{text}<br>Size: #{size}px<br>Color: #{color}"
.subscribe (val)->
    $combined.html(val)
​
bind('keyup', $text, text)
bind('keyup change', $size, size)
bind('change', $color, color)
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x