diff --git a/homework/content.js b/homework/content.js
index 710be28..34f39ac 100644
--- a/homework/content.js
+++ b/homework/content.js
@@ -1,37 +1,39 @@
-'use strict';
-
-(function() {
-  var _wrapper = document.querySelector('#note-content-wrapper');
-
-  function start() {
-    window.addEventListener('note-open', function(event) {
-      var note = event.detail;
-      resetWrapper();
-      drawNote(note);
-    });
-  }
-
-  function resetWrapper() {
-    _wrapper.innerHTML = '';
-  }
-
-  function drawNote(note) {
-    var title = note.title;
-    var h = document.createElement('h2');
-    h.textContent = title;
-    var passages = note.passages;
-    var buff = document.createDocumentFragment();
-    passages.forEach(function(passage) {
-      var p = document.createElement('p');
-      p.classList.add('note-passage');
-      p.textContent = passage;
-      buff.appendChild(p);
-    });
-    _wrapper.appendChild(h);
-    _wrapper.appendChild(buff);
-  }
-
-  document.addEventListener('DOMContentLoaded', function(event) {
-    start();
-  });
-})();
+'use strict';
+
+function Content() {
+	this._wrapper = document.querySelector('#note-content-wrapper');
+}
+
+Content.prototype = {
+
+	start : function () {
+		window.addEventListener('note-open', (function(event) {
+		var note = event.detail;
+		this.resetWrapper();
+		this.drawNote(note);
+		}).bind(this));
+	},
+	resetWrapper : function () {
+		this._wrapper.innerHTML = '';
+	},
+
+	drawNote : function (note) {
+		var title = note.title;
+		var h = document.createElement('h2');
+		h.textContent = title;
+		var passages = note.passages;
+		var buff = document.createDocumentFragment();
+		passages.forEach(function(passage) {
+			  var p = document.createElement('p');
+			  p.classList.add('note-passage');
+			  p.textContent = passage;
+			  buff.appendChild(p);
+		});
+		this._wrapper.appendChild(h);
+		this._wrapper.appendChild(buff);
+	  }
+};
+var content = new Content();
+document.addEventListener('DOMContentLoaded', function(event) {
+    content.start();
+});
diff --git a/homework/list.js b/homework/list.js
index 21eddbc..757e978 100644
--- a/homework/list.js
+++ b/homework/list.js
@@ -1,79 +1,86 @@
-'use strict';
-
-(function() {
-
-  var _listNoteContent = [];
-  var _wrapper = document.querySelector('#note-list-wrapper');
-
-  function start() {
-    fetchList(function(data) {
-      updateList(data);
-      drawList();
-      preloadFirstNote();
-    });
-    window.addEventListener('click', function(event) {
-      onNoteOpen(event);
-    });
-  }
-
-  function onNoteOpen(event) {
-    if (event.target.classList.contains('note-title')) {
-      var id = event.target.dataset.noteId;
-      var content = _listNoteContent[id];
-      window.dispatchEvent(new CustomEvent('note-open',
-        { detail: content }));
-    };
-  }
-
-  function preloadFirstNote() {
-    if (_listNoteContent.length !== 0) {
-      var content = _listNoteContent[0];
-      window.dispatchEvent(new CustomEvent('note-open',
-        { detail: content }));
-    }
-  }
-
-  function updateList(list) {
-    _listNoteContent = list;
-  }
-
-  function drawList() {
-    var list = _listNoteContent;
-    var ul = document.createElement('ul');
-    ul.id = 'note-title-list';
-    var buff = document.createDocumentFragment();
-    list.forEach(function(note, i) {
-      var li = document.createElement('li');
-      li.dataset.noteId = i;
-      li.classList.add('note-title');
-      li.textContent = note.title;
-      // Note: buff is captured, so we now have a
-      // little closure naturally.
-      buff.appendChild(li);
-    });
-    ul.appendChild(buff);
-    _wrapper.appendChild(ul);
-  }
-
-  function fetchList(afterFetch) {
-    var xhr = new XMLHttpRequest();
-    xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true);
-    xhr.responseType = 'json';
-    xhr.onreadystatechange = function(e) {
-      // Watch out: we have a mysterious unknown 'this'.
-      if (this.readyState === 4 && this.status === 200) {
-        var listData = this.response;
-        // The flow ends here.
-        afterFetch(listData);
-      } else if (this.status !== 200 ){
-        // Ignore error in this case.
-      }
-    };
-    xhr.send();
-  }
-
-  document.addEventListener('DOMContentLoaded', function(event) {
-    start();
-  });
-
-})();
+'use strict';
+
+function List() {
+	this._listNoteContent = [];
+	this._wrapper = document.querySelector('#note-list-wrapper');
+}
+
+List.prototype = {
+	start : function () {
+		this.fetchList().then(function (data){
+			console.log(this);
+			this.updateList(data);
+		}.bind(this)).then(
+			this.drawList.bind(this)
+		).then(
+			this.preloadFirstNote.bind(this)
+		);
+		window.addEventListener('click', function(event) {
+			this.onNoteOpen(event).bind(this);
+		});
+	},
+
+	onNoteOpen : function (event) {
+		if (event.target.classList.contains('note-title')) {
+			var id = event.target.dataset.noteId;
+			var content = this._listNoteContent[id];
+			window.dispatchEvent(new CustomEvent('note-open',
+			{ detail: content }));
+		};
+	},
+
+	preloadFirstNote : function () {
+		if (this._listNoteContent.length !== 0) {
+		  var content = this._listNoteContent[0];
+		  window.dispatchEvent(new CustomEvent('note-open',
+			{ detail: content }));
+		}
+	},
+
+	updateList : function (list) {
+		this._listNoteContent = list;
+	},
+
+	drawList : function () {
+		var list = this._listNoteContent;
+		var ul = document.createElement('ul');
+		ul.id = 'note-title-list';
+		var buff = document.createDocumentFragment();
+		list.forEach(function(note, i) {
+			var li = document.createElement('li');
+			li.dataset.noteId = i;
+			li.classList.add('note-title');
+			li.textContent = note.title;
+		  // Note: buff is captured, so we now have a
+		  // little closure naturally.
+			buff.appendChild(li);
+		});
+		ul.appendChild(buff);
+		this._wrapper.appendChild(ul);
+	},
+
+	fetchList : function () {
+		return new Promise(function (resolve, reject) {
+			var xhr = new XMLHttpRequest();
+			xhr.open('GET', 'http://127.0.0.1:8000/homework/demo-list-notes.json', true);
+			xhr.responseType = 'json';
+			xhr.onreadystatechange = function(e) {
+		  // Watch out: we have a mysterious unknown 'this'.
+				if (this.readyState === 4 && this.status === 200) {
+					
+					var listData = this.response;
+			// The flow ends here.
+					resolve(listData);
+				} else if (this.status !== 200 ){
+			// Ignore error in this case.
+				}
+			};
+			xhr.send();
+		});
+	}
+};
+	var list = new List();
+	document.addEventListener('DOMContentLoaded', function(event) {
+		list.start();
+	});
+