[2] Random color sequence

Creates and shows a sequence of color boxes

by Jaume Vinyes

HTML

<script src="bootstrap.min.css "></script>
<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">
      <ul id="sequence">  
      </ul>
  </div>
</div>

CSS

ul
{
    list-style-type: none;
}

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

JavaScript

var source = Rx.Observable.interval(1000).map(x => randomIntFromInterval(1,4)).map(y => numberToColor(y)).take(4);

var subscription = source.subscribe(
  o => $("#sequence").append(o));

function randomIntFromInterval(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}

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;
}

// Note: JQuery 3.0.0 is added