People module with PubSub pattern 2

index.html

<div class="hero-unit jdb-light-gray" id="statsModule"></div>
<script id="stats-template" type="text/template">
	<h2 class="jdb-center">Stats</h2><hr class="jdb-border-dark-gray"/>
	<strong>N<sup><u>bre</u></sup> de pers.: {{people}}</strong>
</script>
<div id="peopleModule">
	<h1 class="jdb-light-gray no-btm-marge">Membres</h1>
	<div class="jdb-whith jdb-padding jdb-border-bottom">
		<input class="jdb-border jdb-center jdb-hover-light-gray" id="addPersonIn" placeholder="Prénom Nom" type="text"/>
		<button class="jdb-btn jdb-hover-green" id="addPerson"><i class="fa fa-user"></i> Ajouté</button>
	</div>
	<ul id="people" class="jdb-ul">
		<script id="people-template" type="text/template">
			{{#people}}
			<li class="jdb-dark-gray jdb-inline-block jdb-tag">
				<span>{{.}}</span>
				<i class="fa fa-times jdb-hover-text-red del"></i>
			</li>
			{{/people}}
		</script>
	</ul>
</div>

script.js

if ($(window).width() < 700) {
	$("#addPerson").removeClass("jdb-btn").addClass("jdb-btn-block");
	$("#addPersonIn").addClass("jdb-input")
} else {
	$("#addPerson").addClass("jdb-btn").removeClass("jdb-btn-block")
	$("#addPersonIn").removeClass("jdb-input")
}
// Events (publish subscribe) pattern
var events = {
	events: {},
	on: function(eventName, fn) {
		this.events[eventName] = this.events[eventName] || [];
		this.events[eventName].push(fn);
	},
	off: function(eventName, fn) {
		if (this.events[eventName]) {
			for (var i = 0; i < this.events[eventName].length; i++) {
				if (this.events[eventName][i] === fn) {
					this.events[eventName].splice(i, 1);
					break;
				}
			};
		}
	},
	emit: function(eventName, data) {
		if (this.events[eventName]) {
			this.events[eventName].forEach(function(fn) {
				fn(data);
			});
		}
	}
};

// Stats module
(function() {
	var people = 0;

	//cache DOM
	var $stats = $('#statsModule');
	var template = $('#stats-template').html();

	//bind events
	events.on('peopleChanged', setPeople);
	_render();

	function _render() {
		$stats.html(Mustache.render(template, {
			people: people
		}));
	}

	function setPeople(newPeople) {
		people = newPeople.length;
		_render();
	}

})();

// People module
(function() {
	var people = ['José N.', 'Elior Sivan'];

	// Cache Dom
	var $el = $('#peopleModule');
	var $button = $el.find('button');
	var $input = $el.find('input');
	var $ul = $el.find('ul');
	var template = $el.find('#people-template').html();

	$input.on('keydown', function(e) {
		if(e.which === 13) {
			$button.click();
		}
	});
	
	//bind events
	$button.on('click', addPerson);
	$ul.delegate().on('click', '.del', deletePerson);

	_render();

	function _render() {
		$ul.html(Mustache.render(template, {
			people: people
		}));
		events.emit('peopleChanged', people);
	}

	function addPerson(value) {
		var name = (typeof value === "string") ? value : $input.val();
		if(name !== '') {
			name = name.charAt(1).toUpperCase() + name.slice(1);
			people.push(name);
			_render();	
			$input.val('');
		} else { return }
	}

	function deletePerson(event) {
		var i;
		if (typeof event === "number") {
			i = event;
		} else {
			var $remove = $(event.target).closest('li');
			i = $ul.find('li').index($remove);
		}
		people.splice(i, 1);
		_render();
	}

})();

style.css

* { outline: none } body {
	margin: 0 !important;
	background: #fafafa;
	font-family: Roboto, 
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;
	color: #333;
}
.hero-unit {
	margin: 20px auto 0 auto;
	width: 300px;
	font-size: 17px;
	font-weight: 200;
	line-height: 20px;
	border-radius: 6px;
	padding: 10px 20px;
}
.hero-unit h1 {
	font-size: 60px;
	line-height: 1;
	letter-spacing: -1px;
}
.browsehappy {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}
button.active { background-color: #a5e39e }
#peopleModule { text-align: center }
input { padding: 5.4px }
#peopleModule ul { padding: 0 }
#peopleModule li {
	padding: 6px 5px 2px 5px;
	margin: 5px 0;
	width: auto;
	opacity: 0.8;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
#peopleModule li:hover { opacity: 1 }
#peopleModule li span {
	display: inline-block;
	min-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
}
#peopleModule li i {
	cursor: pointer;
	font-weight: bold;
	float: right;
	font-style: normal;
	background: #666;
	padding: 2px 4px;
	font-size: 60%;
	color: white;
	border-radius: 20px;
	opacity: 0.7;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	margin-top: 3px;
}
#peopleModule li i:hover { opacity: 1 }
.no-btm-marge { margin-bottom: 0 !important }