make each block binding example clearer

site/content/examples/05-bindings/07-each-block-bindings/App.svelte

@@ -12,12 +12,20 @@
 	function clear() {
 		todos = todos.filter(t => !t.done);
 	}
+
+	$: remaining = todos.filter(t => !t.done).length;
 </script>
 
+<style>
+	.done {
+		opacity: 0.4;
+	}
+</style>
+
 <h1>Todos</h1>
 
 {#each todos as todo}
-	<div>
+	<div class:done={todo.done}>
 		<input
 			type=checkbox
 			bind:checked={todo.done}
@@ -30,6 +38,8 @@
 	</div>
 {/each}
 
+<p>{remaining} remaining</p>
+
 <button on:click={add}>
 	Add new
 </button>

site/content/tutorial/06-bindings/08-each-block-bindings/app-a/App.svelte

@@ -12,12 +12,20 @@
 	function clear() {
 		todos = todos.filter(t => !t.done);
 	}
+
+	$: remaining = todos.filter(t => !t.done).length;
 </script>
 
+<style>
+	.done {
+		opacity: 0.4;
+	}
+</style>
+
 <h1>Todos</h1>
 
 {#each todos as todo}
-	<div>
+	<div class:done={todo.done}>
 		<input
 			type=checkbox
 			checked={todo.done}
@@ -30,6 +38,8 @@
 	</div>
 {/each}
 
+<p>{remaining} remaining</p>
+
 <button on:click={add}>
 	Add new
 </button>

site/content/tutorial/06-bindings/08-each-block-bindings/app-b/App.svelte

@@ -12,12 +12,20 @@
 	function clear() {
 		todos = todos.filter(t => !t.done);
 	}
+
+	$: remaining = todos.filter(t => !t.done).length;
 </script>
 
+<style>
+	.done {
+		opacity: 0.4;
+	}
+</style>
+
 <h1>Todos</h1>
 
 {#each todos as todo}
-	<div>
+	<div class:done={todo.done}>
 		<input
 			type=checkbox
 			bind:checked={todo.done}
@@ -30,6 +38,8 @@
 	</div>
 {/each}
 
+<p>{remaining} remaining</p>
+
 <button on:click={add}>
 	Add new
 </button>