Sample for Bacon.js

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link data-require="bootstrap@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link rel="stylesheet" href="style.css" />
  <script data-require="jquery" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script data-require="bacon.js@*" data-semver="0.7.2" src="http://cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.2/bacon.js"></script>
  <script data-require="underscore.js@*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <!-- Put your html here! -->
  <div class="btn-group" role="group">
    <button id="increase" class="btn btn-default btn-lg">
      increase
    </button>
    <button id="decrease" class="btn btn-default btn-lg">
      decrease
    </button>
  </div>

  <table class="table2" border=1>
    <tr>
      <td>clickカウンタ</td>
      <td id="score"></td>
    </tr>
    <tr>
      <td>clickカウンタ(10の倍数のみ)</td>
      <td id="scoreByTens"></td>
    </tr>
  </table>

</body>

</html>

// Add your javascript here
$(function(){
  
  // クリックイベントに対して1を返すストリーム
  const increase = $("#increase").asEventStream('click')
                                .map(val => 1);
  // クリックイベントに対して-1を返すストリーム               
  const decrease = $("#decrease").asEventStream('click')
                                .map(val => -1);
                                 
  //  increaseとdecreaseを合流させてひとつのストリームにする   
  const merged = increase.merge(decrease);
  
  // ストリームの中で共有される値を保持する
  const score = merged.scan(0, (sum, value) => sum + value);
  
  // フィルタリングして値を抽出する
  const scoreByTens = score.filter(value => value % 10 === 0);
  
  // 出力(消費)。値の変化に反応してストリームから値を受け取る
  score.onValue(val => $("#score").text(val));
  scoreByTens.onValue(val => $("#scoreByTens").text(val));
});

/* Put your css in here */

h1 {
  color: red;
}

body{
  background: #000000;
  color: #ffffff;
}

#score,
#scoreByTens {
  font-size: 50px;
}

.table2,
.btn-group{
  margin:30px 0 0 30px;
}

td{
  font-size: 40px;
  padding:10px;
}