felixroos/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Baloo+Chettan" rel="stylesheet">
  <title>note</title>
  <style>
    body {
      font-family: 'Baloo Chettan', cursive;
    }

    .randomizer {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      display: inline-block;
      margin: 5px;
      background-color: #ffaa00;
    }

    .randomizer.paused h2 {
      color: #ddd;
      text-decoration: line-through;
    }

    .randomizer h1 {
      cursor: pointer;
    }

    .randomizer input {
      width: 25%;
      height: 25%;
      font-family: 'Baloo Chettan', cursive;
      font-size: 1.5em;
      text-align: center;
      border: 0;
      border-radius: 50%;

    }
  </style>
</head>
<body ng-app="trainer">
<div ng-controller="NoteCtrl" style="text-align:center;width:100%">
  <randomizer items="notes" size="300"></randomizer>
  <randomizer items="chords" interval="20"></randomizer>
  <!--<randomizer items="scales" interval="20"></randomizer>-->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script type="text/ng-template" id="randomizer.tpl.html">
  <div class="randomizer" ng-class="{'paused':paused}"
       ng-style="{'backgroundColor':bgColor,'width':size+'px','height':size+'px','fontSize':size/2+'%'}">
    <h2 ng-click="paused=!paused">{{clock}}</h2>
    <h1 ng-click="randomItem()">{{item}}</h1>
    <input ng-model="interval" ng-model-options="{debounce:500}">
  </div>
</script>
<script>
  angular.module('trainer', []).directive('randomizer', function($interval) {
    return {
      scope:       {
        items:    '=',
        interval: '@?',
        size:     '@?'
      },
      replace:     true,
      templateUrl: 'randomizer.tpl.html',
      link:        function(scope) {
        scope.size = scope.size || 200;
        var randomN = function(n) {
          return Math.floor(Math.random() * n);
        };
        var progressN = function(n, f) {
          return Math.floor(f * n);
        };
        var randomColor = function() {
          return 'rgb(' + randomN(255) + ',' + randomN(255) + ',' + randomN(255) + ')';
        };
        var progressColor = function(index, len) {
          var p = (index + 1) / len;
          console.debug('p', progressN(255, p));
          return 'rgb(' + progressN(255, p) + ',' + progressN(255, p) + ',' + progressN(255, p) + ')';
        };
        scope.interval = scope.interval || 10;
        var interval;
        var countdown = function() {
          if (interval) {
            $interval.cancel(interval);
          }
          interval = $interval(function() {
            if (scope.paused) {
              return false;
            }
            if (--scope.clock <= 0) {
              scope.randomItem();
            }
          }, 1000);
        };
        var index;
        scope.randomItem = function() {
          scope.bgColor = randomColor();
          index = Math.floor(Math.random() * scope.items.length);
          //          scope.bgColor = progressColor(index, scope.items.length);
          scope.clock = scope.interval;
          scope.item = scope.items[index];
          countdown();
        };
        scope.randomItem();
      }
    }
  }).controller('NoteCtrl', function($scope, $interval) {
    $scope.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
    $scope.notes = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'F#', 'G', 'Ab', 'A', 'Bb', 'B'];
    $scope.scales = ['ionisch', 'dorisch', 'phrygisch', 'lydisch', 'mixolydisch', 'äolisch', 'lokrisch'];
    $scope.chords = ['dur', 'moll', '7'];
  })
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan" rel="stylesheet">
	<title>note</title>
	<style>
	body {
	font-family: 'Baloo Chettan', cursive;
	}

	.randomizer {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	display: inline-block;
	margin: 5px;
	background-color: #ffaa00;
	}

	.randomizer.paused h2 {
	color: #ddd;
	text-decoration: line-through;
	}

	.randomizer h1 {
	cursor: pointer;
	}

	.randomizer input {
	width: 25%;
	height: 25%;
	font-family: 'Baloo Chettan', cursive;
	font-size: 1.5em;
	text-align: center;
	border: 0;
	border-radius: 50%;

	}
	</style>
	</head>
	<body ng-app="trainer">
	<div ng-controller="NoteCtrl" style="text-align:center;width:100%">
	<randomizer items="notes" size="300"></randomizer>
	<randomizer items="chords" interval="20"></randomizer>
	<!--<randomizer items="scales" interval="20"></randomizer>-->
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
	<script type="text/ng-template" id="randomizer.tpl.html">
	<div class="randomizer" ng-class="{'paused':paused}"
	ng-style="{'backgroundColor':bgColor,'width':size+'px','height':size+'px','fontSize':size/2+'%'}">
	<h2 ng-click="paused=!paused">{{clock}}</h2>
	<h1 ng-click="randomItem()">{{item}}</h1>
	<input ng-model="interval" ng-model-options="{debounce:500}">
	</div>
	</script>
	<script>
	angular.module('trainer', []).directive('randomizer', function($interval) {
	return {
	scope: {
	items: '=',
	interval: '@?',
	size: '@?'
	},
	replace: true,
	templateUrl: 'randomizer.tpl.html',
	link: function(scope) {
	scope.size = scope.size \|\| 200;
	var randomN = function(n) {
	return Math.floor(Math.random() * n);
	};
	var progressN = function(n, f) {
	return Math.floor(f * n);
	};
	var randomColor = function() {
	return 'rgb(' + randomN(255) + ',' + randomN(255) + ',' + randomN(255) + ')';
	};
	var progressColor = function(index, len) {
	var p = (index + 1) / len;
	console.debug('p', progressN(255, p));
	return 'rgb(' + progressN(255, p) + ',' + progressN(255, p) + ',' + progressN(255, p) + ')';
	};
	scope.interval = scope.interval \|\| 10;
	var interval;
	var countdown = function() {
	if (interval) {
	$interval.cancel(interval);
	}
	interval = $interval(function() {
	if (scope.paused) {
	return false;
	}
	if (--scope.clock <= 0) {
	scope.randomItem();
	}
	}, 1000);
	};
	var index;
	scope.randomItem = function() {
	scope.bgColor = randomColor();
	index = Math.floor(Math.random() * scope.items.length);
	// scope.bgColor = progressColor(index, scope.items.length);
	scope.clock = scope.interval;
	scope.item = scope.items[index];
	countdown();
	};
	scope.randomItem();
	}
	}
	}).controller('NoteCtrl', function($scope, $interval) {
	$scope.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
	$scope.notes = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'F#', 'G', 'Ab', 'A', 'Bb', 'B'];
	$scope.scales = ['ionisch', 'dorisch', 'phrygisch', 'lydisch', 'mixolydisch', 'äolisch', 'lokrisch'];
	$scope.chords = ['dur', 'moll', '7'];
	})
	</script>
	</body>
	</html>