HugoLnx · October 11, 2016 13:09
diff --git a/classroom-groups-configuring-prototype.html b/classroom-groups-configuring-prototype.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8"/>
    <style>
      body {
        padding: 10px;
      }

      ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .members,
      .member,
      .group > .name {
        display: inline-block;
        vertical-align: middle;
      }

      .member {
        border: #999 1px solid;
        border-radius: 3px;
        width: 30px;
        height: 30px;
      }

      .group > .name {
        font-size: 1.3em;
        color: #999;
        margin-right: 5px;
      }

      /* Group selection */
      .groups .group.selected .member:first-child {
        background: url(https://avatars3.githubusercontent.com/u/127893?v=3&s=88);
        background-size: 30px 30px;
        opacity: 1;
      }

      .group:hover .member:first-child {
        background: url(https://avatars3.githubusercontent.com/u/127893?v=3&s=88);
        background-size: 30px 30px;
        opacity: 0.5;
      }

      .group  {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <script id="groups-template" type="text/x-handlebars-template">
      <ul class="groups">
        {{#each .}}
        <li class="group">
          <p class="name">{{name}}</p>
          <ul class="members">
            {{#each members}}
            <li class="member"></li>
            {{/each}}
          </ul>
        </li>
        {{/each}}
      </ul>
    </script>
    <p>
      <label>Amount of students</label>
      <input id="students-input" type="number" value="31" />
    </p>
    <p>
      <label>Amount of groups</label>
      <input id="groups-input" type="number" value="6" />
    </p>
    <div id="groups-container"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
    <script>
      // Wait for input change and update group sizes
      (function() {
        (function() {
          var studentsInput = document.getElementById("students-input");
          var groupsInput = document.getElementById("groups-input");

          setup();

          function setup() {
            studentsInput.addEventListener("keyup", debounce(300, onInput));
            groupsInput.addEventListener("keyup", debounce(300, onInput));
            onInput();
          }

          function onInput() {
            var groupsSizes = calculateGroups(parseFloat(studentsInput.value), parseFloat(groupsInput.value));
            updateGroups(groupsSizes);
          }

          function debounce(millis, callback) {
            var timeout = null;
            return function() {
              clearTimeout(timeout);
              timeout = setTimeout(function() {
                callback();
              }, millis);
            }
          }
        }());

        function updateGroups(groupsSizes) {
          var groups = [];
          for(var i = 0; i<groupsSizes.length; i++) {
            var groupSize = groupsSizes[i];
            var members = [];
            for(var j = 0; j < groupSize; j++) {
              members.push(null);
            }
            groups.push({name: "Group " + (i+1), members: members});
          }
          var source = document.getElementById("groups-template").innerHTML;
          var template = Handlebars.compile(source);
          var html = template(groups);
          document.getElementById("groups-container").innerHTML = html;
        }

        function calculateGroups(amountStudents, amountGroups) {
          var baseSize = Math.floor(amountStudents / amountGroups);
          var groupsSizes = [];
          for(var i = 0; i < amountGroups; i++) {
            groupsSizes.push(baseSize);
          }
          for(var j = 0; j < amountStudents - baseSize*amountGroups; j++) {
            groupsSizes[j]++;
          }
          return groupsSizes;
        }
      }());

      // Select group on click
      (function() {
        var groupsContainer = document.getElementById("groups-container");

        groupsContainer.addEventListener("click", function(event) {
          for(var i = 0; i<event.path.length; i++) {
            var element = event.path[i];
            if(element.classList && element.classList.contains('group')) {
              selectGroup(element);
            }
          }
        });

        function selectGroup(groupElement) {
          var groups = document.querySelectorAll(".group");
          for(var i = 0; i<groups.length; i++) {
            var group = groups[i];
            group.classList.remove("selected");
          }
          groupElement.classList.add("selected");
        };

      }());
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<style>
	body {
	padding: 10px;
	}

	ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
	}

	.members,
	.member,
	.group > .name {
	display: inline-block;
	vertical-align: middle;
	}

	.member {
	border: #999 1px solid;
	border-radius: 3px;
	width: 30px;
	height: 30px;
	}

	.group > .name {
	font-size: 1.3em;
	color: #999;
	margin-right: 5px;
	}

	/* Group selection */
	.groups .group.selected .member:first-child {
	background: url(https://avatars3.githubusercontent.com/u/127893?v=3&s=88);
	background-size: 30px 30px;
	opacity: 1;
	}

	.group:hover .member:first-child {
	background: url(https://avatars3.githubusercontent.com/u/127893?v=3&s=88);
	background-size: 30px 30px;
	opacity: 0.5;
	}

	.group {
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<script id="groups-template" type="text/x-handlebars-template">
	<ul class="groups">
	{{#each .}}
	<li class="group">
	<p class="name">{{name}}</p>
	<ul class="members">
	{{#each members}}
	<li class="member"></li>
	{{/each}}
	</ul>
	</li>
	{{/each}}
	</ul>
	</script>
	<p>
	<label>Amount of students</label>
	<input id="students-input" type="number" value="31" />
	</p>
	<p>
	<label>Amount of groups</label>
	<input id="groups-input" type="number" value="6" />
	</p>
	<div id="groups-container"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
	<script>
	// Wait for input change and update group sizes
	(function() {
	(function() {
	var studentsInput = document.getElementById("students-input");
	var groupsInput = document.getElementById("groups-input");

	setup();

	function setup() {
	studentsInput.addEventListener("keyup", debounce(300, onInput));
	groupsInput.addEventListener("keyup", debounce(300, onInput));
	onInput();
	}

	function onInput() {
	var groupsSizes = calculateGroups(parseFloat(studentsInput.value), parseFloat(groupsInput.value));
	updateGroups(groupsSizes);
	}

	function debounce(millis, callback) {
	var timeout = null;
	return function() {
	clearTimeout(timeout);
	timeout = setTimeout(function() {
	callback();
	}, millis);
	}
	}
	}());

	function updateGroups(groupsSizes) {
	var groups = [];
	for(var i = 0; i<groupsSizes.length; i++) {
	var groupSize = groupsSizes[i];
	var members = [];
	for(var j = 0; j < groupSize; j++) {
	members.push(null);
	}
	groups.push({name: "Group " + (i+1), members: members});
	}
	var source = document.getElementById("groups-template").innerHTML;
	var template = Handlebars.compile(source);
	var html = template(groups);
	document.getElementById("groups-container").innerHTML = html;
	}

	function calculateGroups(amountStudents, amountGroups) {
	var baseSize = Math.floor(amountStudents / amountGroups);
	var groupsSizes = [];
	for(var i = 0; i < amountGroups; i++) {
	groupsSizes.push(baseSize);
	}
	for(var j = 0; j < amountStudents - baseSize*amountGroups; j++) {
	groupsSizes[j]++;
	}
	return groupsSizes;
	}
	}());

	// Select group on click
	(function() {
	var groupsContainer = document.getElementById("groups-container");

	groupsContainer.addEventListener("click", function(event) {
	for(var i = 0; i<event.path.length; i++) {
	var element = event.path[i];
	if(element.classList && element.classList.contains('group')) {
	selectGroup(element);
	}
	}
	});

	function selectGroup(groupElement) {
	var groups = document.querySelectorAll(".group");
	for(var i = 0; i<groups.length; i++) {
	var group = groups[i];
	group.classList.remove("selected");
	}
	groupElement.classList.add("selected");
	};

	}());
	</script>
	</body>
	</html>