[3] Detect user clicked element

Creates a sequence of the user clicked elements

by Jaume Vinyes

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://libraries.cdnhttps.com/ajax/libs/rxjs/4.0.7/rx.all.js"></script>
<div class="container">
  <div class="row">
    <div id="redBox" class="col-sm-3 color-box" style="background-color:red"></div>
    <div id="blueBox" class="col-sm-3 color-box" style="background-color:blue"></div>
    <div id="greenBox" class="col-sm-3 color-box" style="background-color:green"></div>
    <div id="yellowBox" class="col-sm-3 color-box" style="background-color:yellow"></div>
  </div>
  <div class="row">
      <ul id="userSequence">  
      </ul>
  </div>
</div>

<!-- Reference -->
<!--
http://reactivex.io/documentation/operators/merge.html
-->

CSS

ul
{
    list-style-type: none;
}

.color-box {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: #ccc;
    position: relative;
}

JavaScript

var redSource = Rx.Observable.fromEvent($('#redBox'), 'click').map(1);
var blueSource = Rx.Observable.fromEvent($('#blueBox'), 'click').map(2);
var greenSource = Rx.Observable.fromEvent($('#greenBox'), 'click').map(3);
var yellowSource = Rx.Observable.fromEvent($('#yellowBox'), 'click').map(4);

var source = Rx.Observable.merge(redSource, blueSource, greenSource, yellowSource).map(y => numberToColor(y));
 
var subscription = source.subscribe(
  o => $("#userSequence").append(o));
  
function numberToColor(number) {
	var html;
  switch(number) {
      case 1:
          html = $.parseHTML('<li><div class="color-box" style="background-color:red"></div></li>')
          break;
      case 2:
          html = $.parseHTML('<li><div class="color-box" style="background-color:blue;"></div></li>')
          break;
      case 3:
          html = $.parseHTML('<li><div class="color-box" style="background-color:green;"></div></li>')
          break;
      case 4:
          html = $.parseHTML('<li><div class="color-box" style="background-color:yellow;"></div></li>')
          break;
  }
  return html;
}