kotaroito/jsbin.hozom.html

## jsbin.hozom.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <form>

      <input id="odd-switch" type="checkbox" />
      <label for="odd-switch">odd</label>
      <input id="multiple-of-7-switch" type="checkbox" />
      <label for="multiple-of-7-switch">multiple of 7</label>
    </form>
    <div id="number-container">

    </div>
  </div>
</body>
</html>

## jsbin.hozom.js
// Singleton works as Mediator
var NumberMarker = (function(config) {
  var singleton;
  return {
    instance: function() {
      if (!singleton) {
        singleton = Object.create(NumberMarker.prototype);
        for (var key in config) {
          singleton[key] = config[key];
        }
        singleton.oddOn = false;
        singleton.multipleSevenOn = false;
      }

      return singleton;
    }
  };
})({container: "number-container", oddSwitch: "odd-switch", multipleSevenSwitch: "multiple-of-7-switch", max: 100});

NumberMarker.prototype = {
  say: function() {
    console.log("hi");
  },
  toggleOdd: function() {
    this.oddOn = !this.oddOn;
    for (var i = 1; i <= this.max; i = i + 2 ) {
      var elm = document.getElementById("number" + i);
      elm.style.backgroundColor = this.oddOn ? "red" : "";
    }
  },
  toggleMultipleSeven: function() {
    this.multipleSevenOn = !this.multipleSevenOn;
    for (var i = 7; i <= this.max; i = i + 7 ) {
      var elm = document.getElementById("number" + i);
      elm.style.color = this.multipleSevenOn ? "yellow" : "";
    }
  },
  render: function() {
    var that = this;

    // container
    for (var i = 1; i <= this.max; i++) {
      var p = document.createElement("p");
      p.id = "number" + i;
      p.innerHTML = i;
      document.getElementById(this.container).appendChild(p);
    }

    // odd
    document.getElementById(this.oddSwitch).addEventListener("click", function(){
       that.toggleOdd();
    },false);

    // multiple7
    document.getElementById(this.multipleSevenSwitch).addEventListener("click", function(){
       that.toggleMultipleSeven();
    },false);

  }
};

var marker = NumberMarker.instance();
marker.say();
marker.render();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div>
	<form>

	<input id="odd-switch" type="checkbox" />
	<label for="odd-switch">odd</label>
	<input id="multiple-of-7-switch" type="checkbox" />
	<label for="multiple-of-7-switch">multiple of 7</label>
	</form>
	<div id="number-container">

	</div>
	</div>
	</body>
	</html>
	// Singleton works as Mediator
	var NumberMarker = (function(config) {
	var singleton;
	return {
	instance: function() {
	if (!singleton) {
	singleton = Object.create(NumberMarker.prototype);
	for (var key in config) {
	singleton[key] = config[key];
	}
	singleton.oddOn = false;
	singleton.multipleSevenOn = false;
	}

	return singleton;
	}
	};
	})({container: "number-container", oddSwitch: "odd-switch", multipleSevenSwitch: "multiple-of-7-switch", max: 100});

	NumberMarker.prototype = {
	say: function() {
	console.log("hi");
	},
	toggleOdd: function() {
	this.oddOn = !this.oddOn;
	for (var i = 1; i <= this.max; i = i + 2 ) {
	var elm = document.getElementById("number" + i);
	elm.style.backgroundColor = this.oddOn ? "red" : "";
	}
	},
	toggleMultipleSeven: function() {
	this.multipleSevenOn = !this.multipleSevenOn;
	for (var i = 7; i <= this.max; i = i + 7 ) {
	var elm = document.getElementById("number" + i);
	elm.style.color = this.multipleSevenOn ? "yellow" : "";
	}
	},
	render: function() {
	var that = this;

	// container
	for (var i = 1; i <= this.max; i++) {
	var p = document.createElement("p");
	p.id = "number" + i;
	p.innerHTML = i;
	document.getElementById(this.container).appendChild(p);
	}

	// odd
	document.getElementById(this.oddSwitch).addEventListener("click", function(){
	that.toggleOdd();
	},false);

	// multiple7
	document.getElementById(this.multipleSevenSwitch).addEventListener("click", function(){
	that.toggleMultipleSeven();
	},false);

	}
	};

	var marker = NumberMarker.instance();
	marker.say();
	marker.render();