From 84ba13d1d91dfc72090dea78de79b4fa44c10440 Mon Sep 17 00:00:00 2001
From: CrashedBboy <crashedbboy@gmail.com>
Date: Mon, 12 Oct 2015 21:15:27 +0800
Subject: [PATCH 1/8] Assert lots of comment for figuring out HOW IT WORK

---
 homework/content.js |  4 ++++
 homework/list.js    | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/homework/content.js b/homework/content.js
index 710be28..bccdc61 100644
--- a/homework/content.js
+++ b/homework/content.js
@@ -4,6 +4,7 @@
   var _wrapper = document.querySelector('#note-content-wrapper');
 
   function start() {
+		// 'note-open' will be triggered at list.js
     window.addEventListener('note-open', function(event) {
       var note = event.detail;
       resetWrapper();
@@ -11,10 +12,12 @@
     });
   }
 
+	/** Clear content container for the new one */
   function resetWrapper() {
     _wrapper.innerHTML = '';
   }
 
+	/** Append the new one */
   function drawNote(note) {
     var title = note.title;
     var h = document.createElement('h2');
@@ -31,6 +34,7 @@
     _wrapper.appendChild(buff);
   }
 
+	/** which start() will be executed first? */
   document.addEventListener('DOMContentLoaded', function(event) {
     start();
   });
diff --git a/homework/list.js b/homework/list.js
index 21eddbc..186b5c8 100644
--- a/homework/list.js
+++ b/homework/list.js
@@ -3,6 +3,7 @@
 (function() {
 
   var _listNoteContent = [];
+	// _wrapper : list container
   var _wrapper = document.querySelector('#note-list-wrapper');
 
   function start() {
@@ -11,11 +12,14 @@
       drawList();
       preloadFirstNote();
     });
+
+		// Register for each list by listening "click" event
     window.addEventListener('click', function(event) {
       onNoteOpen(event);
     });
   }
 
+	/** get elem's data and trigger "note-open" event to show it*/
   function onNoteOpen(event) {
     if (event.target.classList.contains('note-title')) {
       var id = event.target.dataset.noteId;
@@ -25,6 +29,7 @@
     };
   }
 
+	/** Show first note before any item been clicked */
   function preloadFirstNote() {
     if (_listNoteContent.length !== 0) {
       var content = _listNoteContent[0];
@@ -33,10 +38,12 @@
     }
   }
 
+	/** Hmm... */
   function updateList(list) {
     _listNoteContent = list;
   }
 
+	/** Append list into DOM */
   function drawList() {
     var list = _listNoteContent;
     var ul = document.createElement('ul');
@@ -55,6 +62,8 @@
     _wrapper.appendChild(ul);
   }
 
+	/** Send XHR to get demo-list.json,
+			and pass list into three functions called in start() */
   function fetchList(afterFetch) {
     var xhr = new XMLHttpRequest();
     xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true);
@@ -72,6 +81,7 @@
     xhr.send();
   }
 
+	/** Triggered while document has been load and parse without stylesheets and images */
   document.addEventListener('DOMContentLoaded', function(event) {
     start();
   });

From 15a880287b1a37b1de4521955c535337be3699b4 Mon Sep 17 00:00:00 2001
From: CrashedBboy <crashedbboy@gmail.com>
Date: Wed, 14 Oct 2015 11:45:15 +0800
Subject: [PATCH 2/8] refactor code into OOP

---
 homework/content.js |  68 ++++++++++-----------
 homework/list.js    | 146 ++++++++++++++++++++------------------------
 2 files changed, 99 insertions(+), 115 deletions(-)

diff --git a/homework/content.js b/homework/content.js
index bccdc61..72cb1a7 100644
--- a/homework/content.js
+++ b/homework/content.js
@@ -1,41 +1,39 @@
 'use strict';
 
-(function() {
-  var _wrapper = document.querySelector('#note-content-wrapper');
+function Note() {
+  this._wrapper = document.querySelector('#note-content-wrapper');
+  document.addEventListener('DOMContentLoaded', this.start.bind(this));
+}
 
-  function start() {
-		// 'note-open' will be triggered at list.js
-    window.addEventListener('note-open', function(event) {
-      var note = event.detail;
-      resetWrapper();
-      drawNote(note);
-    });
-  }
+Note.prototype.start = function() {
+	// 'note-open' will be triggered at list.js
+	window.addEventListener('note-open', this.updateContent.bind(this));
+}
 
-	/** Clear content container for the new one */
-  function resetWrapper() {
-    _wrapper.innerHTML = '';
-  }
+Note.prototype.updateContent = function(event) {
+	var note = event.detail;
+	this.resetWrapper();
+	this.drawNote(note);
+}
 
-	/** Append the new one */
-  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);
-  }
+Note.prototype.resetWrapper = function() {
+	this._wrapper.innerHTML = '';
+}
 
-	/** which start() will be executed first? */
-  document.addEventListener('DOMContentLoaded', function(event) {
-    start();
-  });
-})();
+Note.prototype.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 note = new Note();
diff --git a/homework/list.js b/homework/list.js
index 186b5c8..70282ce 100644
--- a/homework/list.js
+++ b/homework/list.js
@@ -1,89 +1,75 @@
 'use strict';
 
-(function() {
+function List() {
+  this._listNoteContent = [];
+  this._wrapper = document.querySelector('#note-list-wrapper');
+	document.addEventListener('DOMContentLoaded', this.start.bind(this));
+}
 
-  var _listNoteContent = [];
-	// _wrapper : list container
-  var _wrapper = document.querySelector('#note-list-wrapper');
+List.prototype.start = function() {
+	this.fetchList(this.afterFetch.bind(this));
+	window.addEventListener('click', this.onNoteOpen.bind(this));
+}
 
-  function start() {
-    fetchList(function(data) {
-      updateList(data);
-      drawList();
-      preloadFirstNote();
-    });
+List.prototype.fetchList = function(afterFetch) {
+	var xhr = new XMLHttpRequest();
+	xhr.open('GET', 'http://140.115.50.54:8000/demo-list-notes.json', true); // Note: use public IP
+	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();
+}
 
-		// Register for each list by listening "click" event
-    window.addEventListener('click', function(event) {
-      onNoteOpen(event);
-    });
-  }
+List.prototype.afterFetch = function(data) {
+	this.updateList(data);
+	this.drawList();
+	this.preloadFirstNote();
+}
 
-	/** get elem's data and trigger "note-open" event to show it*/
-  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 }));
-    };
-  }
+List.prototype.updateList = function(list) {
+	this._listNoteContent = list;
+}
 
-	/** Show first note before any item been clicked */
-  function preloadFirstNote() {
-    if (_listNoteContent.length !== 0) {
-      var content = _listNoteContent[0];
-      window.dispatchEvent(new CustomEvent('note-open',
-        { detail: content }));
-    }
-  }
+List.prototype.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);
+}
 
-	/** Hmm... */
-  function updateList(list) {
-    _listNoteContent = list;
-  }
+List.prototype.preloadFirstNote = function() {
+	if (this._listNoteContent.length !== 0) {
+		var content = this._listNoteContent[0];
+		window.dispatchEvent(new CustomEvent('note-open',
+			{ detail: content }));
+	}
+}
 
-	/** Append list into DOM */
-  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);
-  }
-
-	/** Send XHR to get demo-list.json,
-			and pass list into three functions called in start() */
-  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();
-  }
-
-	/** Triggered while document has been load and parse without stylesheets and images */
-  document.addEventListener('DOMContentLoaded', function(event) {
-    start();
-  });
-
-})();
+List.prototype.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 }));
+	};
+}
+var list = new List();

From 6cfeec22ca5cbe3d0a1576ad503cd59e7fb827ba Mon Sep 17 00:00:00 2001
From: CrashedBboy <crashedbboy@gmail.com>
Date: Thu, 15 Oct 2015 14:22:50 +0800
Subject: [PATCH 3/8] bind this and refactor by Promise

---
 homework/list.js | 56 ++++++++++++++++++++++++++++--------------------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/homework/list.js b/homework/list.js
index 70282ce..8983148 100644
--- a/homework/list.js
+++ b/homework/list.js
@@ -11,21 +11,30 @@ List.prototype.start = function() {
 	window.addEventListener('click', this.onNoteOpen.bind(this));
 }
 
+/** Need to use Promise*/
 List.prototype.fetchList = function(afterFetch) {
-	var xhr = new XMLHttpRequest();
-	xhr.open('GET', 'http://140.115.50.54:8000/demo-list-notes.json', true); // Note: use public IP
-	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();
+	var url = 'http://140.115.50.54:8000/demo-list-notes.json';
+	sendXHR(url).then( function onFulfilled(value) {
+		afterFetch(value);
+	}).catch( function onRejected(error) {
+		console.error(error);
+	})
+}
+
+function sendXHR(url) {
+	return  new Promise(function(resolve, reject) {
+		var req = new XMLHttpRequest();
+		req.open('GET', url, true);
+		req.responseType = 'json';
+		req.onload = function () {
+			if (req.status === 200 )
+				resolve(req.response);
+		};
+		req.onerror = function () {
+			reject( new Error(req.statusText));
+		};
+		req.send();
+	});
 }
 
 List.prototype.afterFetch = function(data) {
@@ -43,15 +52,7 @@ List.prototype.drawList = function() {
 	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);
-	});
+	list.forEach(insertItem.bind(buff));
 	ul.appendChild(buff);
 	this._wrapper.appendChild(ul);
 }
@@ -72,4 +73,13 @@ List.prototype.onNoteOpen = function(event) {
 			{ detail: content }));
 	};
 }
+
+function insertItem(element, index) {
+	var li = document.createElement('li');
+	li.dataset.noteId = index;
+	li.classList.add('note-title');
+	li.textContent = element.title;
+	this.appendChild(li);
+}
+
 var list = new List();

From 19e64effa6f12d10b92409a747e80a65ae07f771 Mon Sep 17 00:00:00 2001
From: CrashedBboy <crashedbboy@gmail.com>
Date: Fri, 16 Oct 2015 12:27:58 +0800
Subject: [PATCH 4/8] Karma config

---
 homework/content.js        | 1 +
 homework/karma.conf.js     | 2 +-
 homework/test/test-list.js | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/homework/content.js b/homework/content.js
index 72cb1a7..26016b0 100644
--- a/homework/content.js
+++ b/homework/content.js
@@ -37,3 +37,4 @@ Note.prototype.drawNote = function(note) {
 }
 
 var note = new Note();
+module.exports = Note;
diff --git a/homework/karma.conf.js b/homework/karma.conf.js
index f669cd0..11759e1 100644
--- a/homework/karma.conf.js
+++ b/homework/karma.conf.js
@@ -56,7 +56,7 @@ module.exports = function(config) {
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['Firefox'],
+    browsers: ['Firefox', 'FirefoxDeveloper'],
 
 
     // Continuous Integration mode
diff --git a/homework/test/test-list.js b/homework/test/test-list.js
index 441fc45..897ea0f 100644
--- a/homework/test/test-list.js
+++ b/homework/test/test-list.js
@@ -1,8 +1,8 @@
+var Note = require("../content.js");
 describe('Test > ', function() {
   beforeEach(function() {
   });
 
   it('will test some pure functions', function() {
-    // Write any pure function assertion here.
   });
 });

From 2a523389feb81a6b1085d635428bd2619d435ec9 Mon Sep 17 00:00:00 2001
From: CrashedBboy <crashedbboy@gmail.com>
Date: Fri, 16 Oct 2015 12:42:41 +0800
Subject: [PATCH 5/8] karma first test case

---
 homework/content.js        | 1 -
 homework/karma.conf.js     | 2 +-
 homework/test/test-list.js | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/homework/content.js b/homework/content.js
index 26016b0..72cb1a7 100644
--- a/homework/content.js
+++ b/homework/content.js
@@ -37,4 +37,3 @@ Note.prototype.drawNote = function(note) {
 }
 
 var note = new Note();
-module.exports = Note;
diff --git a/homework/karma.conf.js b/homework/karma.conf.js
index 11759e1..d54986e 100644
--- a/homework/karma.conf.js
+++ b/homework/karma.conf.js
@@ -56,7 +56,7 @@ module.exports = function(config) {
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['Firefox', 'FirefoxDeveloper'],
+    browsers: ['FirefoxDeveloper'],
 
 
     // Continuous Integration mode
diff --git a/homework/test/test-list.js b/homework/test/test-list.js
index 897ea0f..5cfd8cb 100644
--- a/homework/test/test-list.js
+++ b/homework/test/test-list.js
@@ -1,8 +1,8 @@
-var Note = require("../content.js");
 describe('Test > ', function() {
   beforeEach(function() {
   });
 
   it('will test some pure functions', function() {
+		expect(true).to.be.true;
   });
 });

From 8725f4c57eff28ad64730ff8057d4e11b65db81a Mon Sep 17 00:00:00 2001
From: CrashedBboy <crashedbboy@gmail.com>
Date: Sun, 25 Oct 2015 21:12:58 +0800
Subject: [PATCH 6/8] Using closure for class

---
 homework/content.js |  68 +++++++++++++-------------
 homework/index.html |   1 +
 homework/list.js    | 113 ++++++++++++++++++++++----------------------
 homework/main.js    |   7 +++
 4 files changed, 99 insertions(+), 90 deletions(-)
 create mode 100644 homework/main.js

diff --git a/homework/content.js b/homework/content.js
index 72cb1a7..92d93d5 100644
--- a/homework/content.js
+++ b/homework/content.js
@@ -1,39 +1,41 @@
 'use strict';
+(function(exports){
+	var ContentManager = function() {
+		this._wrapper = document.querySelector('#note-content-wrapper');
+		document.addEventListener('DOMContentLoaded', this.start.bind(this));
+	}
 
-function Note() {
-  this._wrapper = document.querySelector('#note-content-wrapper');
-  document.addEventListener('DOMContentLoaded', this.start.bind(this));
-}
+	ContentManager.prototype = {
+		start() {
+			window.addEventListener('note-open', this.updateContent.bind(this));
+		},
 
-Note.prototype.start = function() {
-	// 'note-open' will be triggered at list.js
-	window.addEventListener('note-open', this.updateContent.bind(this));
-}
+		updateContent(event) {
+			var note = event.detail;
+			this.resetWrapper();
+			this.drawNote(note);
+		},
 
-Note.prototype.updateContent = function(event) {
-	var note = event.detail;
-	this.resetWrapper();
-	this.drawNote(note);
-}
+		resetWrapper() {
+			this._wrapper.innerHTML = '';
+		},
 
-Note.prototype.resetWrapper = function() {
-	this._wrapper.innerHTML = '';
-}
+		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);
+			});
+			this._wrapper.appendChild(h);
+			this._wrapper.appendChild(buff);
+		}
+	}
 
-Note.prototype.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 note = new Note();
+	window.ContentManager = ContentManager;
+})(window);
diff --git a/homework/index.html b/homework/index.html
index e387963..f4a467e 100644
--- a/homework/index.html
+++ b/homework/index.html
@@ -5,6 +5,7 @@
   <title> Homework - Note List </title>
   <script defer src="list.js"></script>
   <script defer src="content.js"></script>
+	<script defer src="main.js"></script>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>
 <body>
diff --git a/homework/list.js b/homework/list.js
index 8983148..7d00bd7 100644
--- a/homework/list.js
+++ b/homework/list.js
@@ -1,25 +1,63 @@
 'use strict';
+(function(exports) {
+	var ListManager = function() {
+		this._listNoteContent = [];
+		this._wrapper = document.querySelector('#note-list-wrapper');
+		document.addEventListener('DOMContentLoaded', this.start.bind(this));
+	}
 
-function List() {
-  this._listNoteContent = [];
-  this._wrapper = document.querySelector('#note-list-wrapper');
-	document.addEventListener('DOMContentLoaded', this.start.bind(this));
-}
+	ListManager.prototype = {
+		start() {
+			this.fetchList(this.afterFetch.bind(this));
+			window.addEventListener('click', this.onNoteOpen.bind(this));
+		},
+		fetchList(afterFetch) {
+			var url = 'http://127.0.0.1:8000/demo-list-notes.json';
+			sendXHR(url).then( function onFulfilled(value) {
+				afterFetch(value);
+			}).catch( function onRejected(error) {
+				console.error(error);
+			})
+		},
+		afterFetch(data) {
+			this.updateList(data);
+			this.drawList();
+			this.preloadFirstNote();
+		},
 
-List.prototype.start = function() {
-	this.fetchList(this.afterFetch.bind(this));
-	window.addEventListener('click', this.onNoteOpen.bind(this));
-}
+		updateList(list) {
+			this._listNoteContent = list;
+		},
 
-/** Need to use Promise*/
-List.prototype.fetchList = function(afterFetch) {
-	var url = 'http://140.115.50.54:8000/demo-list-notes.json';
-	sendXHR(url).then( function onFulfilled(value) {
-		afterFetch(value);
-	}).catch( function onRejected(error) {
-		console.error(error);
-	})
-}
+		drawList() {
+			var list = this._listNoteContent;
+			var ul = document.createElement('ul');
+			ul.id = 'note-title-list';
+			var buff = document.createDocumentFragment();
+			list.forEach(insertItem.bind(buff));
+			ul.appendChild(buff);
+			this._wrapper.appendChild(ul);
+		},
+
+		preloadFirstNote() {
+			if (this._listNoteContent.length !== 0) {
+				var content = this._listNoteContent[0];
+				window.dispatchEvent(new CustomEvent('note-open',
+					{ detail: content }));
+			}
+		},
+
+		onNoteOpen(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 }));
+			};
+		}
+	}
+	exports.ListManager = ListManager;
+})(window);
 
 function sendXHR(url) {
 	return  new Promise(function(resolve, reject) {
@@ -37,43 +75,6 @@ function sendXHR(url) {
 	});
 }
 
-List.prototype.afterFetch = function(data) {
-	this.updateList(data);
-	this.drawList();
-	this.preloadFirstNote();
-}
-
-List.prototype.updateList = function(list) {
-	this._listNoteContent = list;
-}
-
-List.prototype.drawList = function() {
-	var list = this._listNoteContent;
-	var ul = document.createElement('ul');
-	ul.id = 'note-title-list';
-	var buff = document.createDocumentFragment();
-	list.forEach(insertItem.bind(buff));
-	ul.appendChild(buff);
-	this._wrapper.appendChild(ul);
-}
-
-List.prototype.preloadFirstNote = function() {
-	if (this._listNoteContent.length !== 0) {
-		var content = this._listNoteContent[0];
-		window.dispatchEvent(new CustomEvent('note-open',
-			{ detail: content }));
-	}
-}
-
-List.prototype.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 }));
-	};
-}
-
 function insertItem(element, index) {
 	var li = document.createElement('li');
 	li.dataset.noteId = index;
@@ -81,5 +82,3 @@ function insertItem(element, index) {
 	li.textContent = element.title;
 	this.appendChild(li);
 }
-
-var list = new List();
diff --git a/homework/main.js b/homework/main.js
new file mode 100644
index 0000000..5785fb4
--- /dev/null
+++ b/homework/main.js
@@ -0,0 +1,7 @@
+'use strict';
+document.addEventListener('DOMContentLoaded', function(event) {
+	var contentManger = new ContentManager();
+	var listManager = new ListManager();
+	contentManger.start();
+	listManager.start();
+});

From 084b1de8869192c61794ccf0c7357ae63eda1284 Mon Sep 17 00:00:00 2001
From: CrashedBboy <crashedbboy@gmail.com>
Date: Sun, 25 Oct 2015 22:33:20 +0800
Subject: [PATCH 7/8] modify promise flow

---
 homework/list.js | 46 +++++++++++++++++++++-------------------------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/homework/list.js b/homework/list.js
index 7d00bd7..1d1a76e 100644
--- a/homework/list.js
+++ b/homework/list.js
@@ -8,21 +8,30 @@
 
 	ListManager.prototype = {
 		start() {
-			this.fetchList(this.afterFetch.bind(this));
+			this.fetchList()
+				.then(this.updateList.bind(this))
+				.then(this.drawList.bind(this))
+				.then(this.preloadFirstNote.bind(this))
+				.catch(function(error) {
+					console.error(error);
+				});
 			window.addEventListener('click', this.onNoteOpen.bind(this));
 		},
+
 		fetchList(afterFetch) {
-			var url = 'http://127.0.0.1:8000/demo-list-notes.json';
-			sendXHR(url).then( function onFulfilled(value) {
-				afterFetch(value);
-			}).catch( function onRejected(error) {
-				console.error(error);
-			})
-		},
-		afterFetch(data) {
-			this.updateList(data);
-			this.drawList();
-			this.preloadFirstNote();
+			return  new Promise(function(resolve, reject) {
+				var req = new XMLHttpRequest();
+				req.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true);
+				req.responseType = 'json';
+				req.onload = function () {
+					if (req.status === 200 )
+						resolve(req.response);
+				};
+				req.onerror = function () {
+					reject( new Error(req.statusText));
+				};
+				req.send();
+			});
 		},
 
 		updateList(list) {
@@ -60,19 +69,6 @@
 })(window);
 
 function sendXHR(url) {
-	return  new Promise(function(resolve, reject) {
-		var req = new XMLHttpRequest();
-		req.open('GET', url, true);
-		req.responseType = 'json';
-		req.onload = function () {
-			if (req.status === 200 )
-				resolve(req.response);
-		};
-		req.onerror = function () {
-			reject( new Error(req.statusText));
-		};
-		req.send();
-	});
 }
 
 function insertItem(element, index) {

From 45d19166648eea07a8035c2442a4f43196a7032c Mon Sep 17 00:00:00 2001
From: CrashedBboy <crashedbboy@gmail.com>
Date: Sun, 25 Oct 2015 23:05:08 +0800
Subject: [PATCH 8/8] Try JSDoc

---
 homework/content.js | 14 +++++++++++++-
 homework/list.js    | 29 ++++++++++++++++++++++++-----
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/homework/content.js b/homework/content.js
index 92d93d5..4666d54 100644
--- a/homework/content.js
+++ b/homework/content.js
@@ -1,25 +1,37 @@
 'use strict';
 (function(exports){
+
+
+  /**
+  * Create a instance of contentManager.
+  *
+  * @constructor
+  */
 	var ContentManager = function() {
-		this._wrapper = document.querySelector('#note-content-wrapper');
+		/** @private */ this._wrapper = document.querySelector('#note-content-wrapper');
 		document.addEventListener('DOMContentLoaded', this.start.bind(this));
 	}
 
 	ContentManager.prototype = {
+
+    /** Initialization */
 		start() {
 			window.addEventListener('note-open', this.updateContent.bind(this));
 		},
 
+		/** Update note wrapper's content */
 		updateContent(event) {
 			var note = event.detail;
 			this.resetWrapper();
 			this.drawNote(note);
 		},
 
+		/** Clear the note wrapper */
 		resetWrapper() {
 			this._wrapper.innerHTML = '';
 		},
 
+		/** set content on wrapper */
 		drawNote(note) {
 			var title = note.title;
 			var h = document.createElement('h2');
diff --git a/homework/list.js b/homework/list.js
index 1d1a76e..f65aa16 100644
--- a/homework/list.js
+++ b/homework/list.js
@@ -1,12 +1,20 @@
 'use strict';
 (function(exports) {
+
+  /**
+  * Create a instance of the ListManager.
+  *
+  * @constructor
+  */
 	var ListManager = function() {
-		this._listNoteContent = [];
-		this._wrapper = document.querySelector('#note-list-wrapper');
+		/** @private */ this._listNoteContent = [];
+		/** @private */ this._wrapper = document.querySelector('#note-list-wrapper');
 		document.addEventListener('DOMContentLoaded', this.start.bind(this));
 	}
 
 	ListManager.prototype = {
+
+		/** Initialize the listManager. */
 		start() {
 			this.fetchList()
 				.then(this.updateList.bind(this))
@@ -18,6 +26,11 @@
 			window.addEventListener('click', this.onNoteOpen.bind(this));
 		},
 
+		/**
+    * Get List form localhost
+    *
+    * @return {Promise} A start point of the work flow.
+    */
 		fetchList(afterFetch) {
 			return  new Promise(function(resolve, reject) {
 				var req = new XMLHttpRequest();
@@ -34,10 +47,12 @@
 			});
 		},
 
+    /** Update the list */
 		updateList(list) {
 			this._listNoteContent = list;
 		},
 
+		/** Append all list title */
 		drawList() {
 			var list = this._listNoteContent;
 			var ul = document.createElement('ul');
@@ -48,6 +63,7 @@
 			this._wrapper.appendChild(ul);
 		},
 
+		/** Show first note before user do anything. */
 		preloadFirstNote() {
 			if (this._listNoteContent.length !== 0) {
 				var content = this._listNoteContent[0];
@@ -56,6 +72,12 @@
 			}
 		},
 
+    /**
+    * Trigger 'note-open' event while note opened
+    *
+    * @this {ListManager}
+    * @param {object} event The information such as event source, which is about event.
+    */
 		onNoteOpen(event) {
 			if (event.target.classList.contains('note-title')) {
 				var id = event.target.dataset.noteId;
@@ -68,9 +90,6 @@
 	exports.ListManager = ListManager;
 })(window);
 
-function sendXHR(url) {
-}
-
 function insertItem(element, index) {
 	var li = document.createElement('li');
 	li.dataset.noteId = index;