Merge pull request #1 from MSoup/MSoup-list-group-item

Fix class="list-group-item}" to "list-group-item"

Author: MSoup

manuscript/02.ECMAScript2015.md

@@ -100,7 +100,7 @@ If you take a look at the ES5 that this gets compiled down to, it makes a whole
 
 Looking at this compiled code with such a simple example also makes this syntax seems a little silly, but it gets a whole lot more interesting when you consider a more real-world example.  For instance, let's assume we want to use this chunk of HTML as a template to render the details of a Todo:
 
-    <div todo='[[Todo ID]]' class="list-group-item}">
+    <div todo='[[Todo ID]]' class="list-group-item">
         <i class="[[ If Todo is complete, then "hidden" ]] text-success glyphicon glyphicon-ok"></i>
         <span class="name">[[Name]]</span>
     </div>
@@ -112,7 +112,7 @@ So, let's avoid all of that by converting this into a string template instead.
 The first thing to do is wrap the HTML in backticks.
 
 	container.innerHTML =  `
-        <div todo='[[Todo ID]]' class="list-group-item}">
+        <div todo='[[Todo ID]]' class="list-group-item">
             <i class="[[ If Todo is complete, then "hidden" ]] text-success glyphicon glyphicon-ok"></i>
             <span class="name">[[Name]]</span>
         </div>
@@ -132,7 +132,7 @@ Then, rather than doing those search-and-replace operations, we can insert the v
 	}
 
 	container.innerHTML = `
-	    <div todo='${todo.id}' class="list-group-item}">
+	    <div todo='${todo.id}' class="list-group-item">
 	        <i class="[[ If Todo is complete, then "hidden" ]] text-success glyphicon glyphicon-ok"></i>
 	        <span class="name">${todo.name}</span>
 	    </div>
@@ -143,7 +143,7 @@ One of the cool things about string templates is that you don't have to restrict
 For example, I can figure out whether or not to render the "hidden" class on the icon element dynamically by introducing a conditional statement right there in the expression, like this:
 
 	container.innerHTML = `
-	    <div todo='${todo.id}' class="list-group-item}">
+	    <div todo='${todo.id}' class="list-group-item">
 	        <i class="${ todo.completed ? "" : "hidden" } text-success glyphicon glyphicon-ok"></i>
 	        <span class="name">${todo.name}</span>
 	    </div>
@@ -153,7 +153,7 @@ When the value of todo.completed is true, the expression will evaluate to an emp
 
 {title="app.js"}
 ~~~
-container.innerHTML = "\n\t    <div todo='" + todo.id + "' class=\"list-group-item}\">\n\t        <i class=\"[[ If Todo is complete, then \"hidden\" ]] text-success glyphicon glyphicon-ok\"></i>\n\t        <span class=\"name\">" + todo.name + "</span>\n\t    </div>\n\t";
+container.innerHTML = "\n\t    <div todo='" + todo.id + "' class=\"list-group-item\">\n\t        <i class=\"[[ If Todo is complete, then \"hidden\" ]] text-success glyphicon glyphicon-ok\"></i>\n\t        <span class=\"name\">" + todo.name + "</span>\n\t    </div>\n\t";
 ~~~
 
 Once again, inspecting the compiled JavaScript reveals that - even with inline conditional statements and everything - this syntax eventually just ends up as a series of concatenated strings and expressions.