more coherent if block examples

Author: Rich Harris

content/tutorial/01-svelte/04-logic/01-if-blocks/README.md

@@ -4,21 +4,18 @@ title: If blocks
 
 HTML doesn't have a way of expressing _logic_, like conditionals and loops. Svelte does.
 
-To conditionally render some markup, we wrap it in an `if` block:
+To conditionally render some markup, we wrap it in an `if` block. Let's add some text that appears when `count` is greater than `10`:
 
 ```svelte
 /// file: App.svelte
-+++{#if user.loggedIn}+++
-	<button on:click={toggle}>
-		Log out
-	</button>
-+++{/if}+++
+<button on:click={increment}>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
+</button>
 
-+++{#if !user.loggedIn}+++
-	<button on:click={toggle}>
-		Log in
-	</button>
-+++{/if}+++
++++{#if count > 10}
+	<p>{count} is greater than 10</p>
+{/if}+++
 ```
 
 Try it — update the component, and click on the buttons.

content/tutorial/01-svelte/04-logic/01-if-blocks/app-a/src/lib/App.svelte

@@ -1,15 +1,12 @@
 <script>
-	let user = { loggedIn: false };
+	let count = 0;
 
-	function toggle() {
-		user.loggedIn = !user.loggedIn;
+	function increment() {
+		count += 1;
 	}
 </script>
 
-<button on:click={toggle}>
-	Log out
-</button>
-
-<button on:click={toggle}>
-	Log in
+<button on:click={increment}>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
 </button>

content/tutorial/01-svelte/04-logic/01-if-blocks/app-b/src/lib/App.svelte

@@ -1,19 +1,16 @@
 <script>
-	let user = { loggedIn: false };
+	let count = 0;
 
-	function toggle() {
-		user.loggedIn = !user.loggedIn;
+	function increment() {
+		count += 1;
 	}
 </script>
 
-{#if user.loggedIn}
-	<button on:click={toggle}>
-		Log out
-	</button>
-{/if}
+<button on:click={increment}>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
+</button>
 
-{#if !user.loggedIn}
-	<button on:click={toggle}>
-		Log in
-	</button>
-{/if}
+{#if count > 10}
+	<p>{count} is greater than 10</p>
+{/if}

content/tutorial/01-svelte/04-logic/02-else-blocks/README.md

@@ -2,18 +2,14 @@
 title: Else blocks
 ---
 
-Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are mutually exclusive, we can simplify this component slightly by using an `else` block:
+Just like in JavaScript, an `if` block can have an `else` block:
 
 ```svelte
 /// file: App.svelte
-{#if user.loggedIn}
-	<button on:click={toggle}>
-		Log out
-	</button>
-+++{:else}+++
-	<button on:click={toggle}>
-		Log in
-	</button>
+{#if count > 10}
+	<p>{count} is greater than 10</p>
++++{:else}
+	<p>{count} is between 0 and 10</p>+++
 {/if}
 ```
 

content/tutorial/01-svelte/04-logic/02-else-blocks/app-a/src/lib/App.svelte

@@ -1,17 +1,18 @@
 <script>
-	let user = { loggedIn: false };
+	let count = 0;
 
-	function toggle() {
-		user.loggedIn = !user.loggedIn;
+	function increment() {
+		count += 1;
 	}
 </script>
 
-{#if user.loggedIn}
-	<button on:click={toggle}>
-		Log out
-	</button>
+<button on:click={increment}>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
+</button>
+
+{#if count > 10}
+	<p>{count} is greater than 10</p>
 {:else}
-	<button on:click={toggle}>
-		Log in
-	</button>
-{/if}
+	<p>{count} is between 0 and 10</p>
+{/if}

content/tutorial/01-svelte/04-logic/02-else-blocks/app-b/src/lib/App.svelte

@@ -6,11 +6,11 @@ Multiple conditions can be 'chained' together with `else if`:
 
 ```svelte
 /// file: App.svelte
-{#if x > 10}
-	<p>{x} is greater than 10</p>
-{:+++else if+++ x < 5}
-	<p>{x} is less than 5</p>
+{#if count > 10}
+	<p>{count} is greater than 10</p>
++++{:else if count < 5}
+	<p>{count} is less than 5</p>+++
 {:else}
-	<p>{x} is between 5 and 10</p>
+	<p>{count} is between +++5+++ and 10</p>
 {/if}
 ```

content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md

@@ -1,13 +1,20 @@
 <script>
-	let x = 0;
+	let count = 0;
+
+	function increment() {
+		count += 1;
+	}
 </script>
 
-<button on:click={() => x += 1}>+1</button>
+<button on:click={increment}>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
+</button>
 
-{#if x > 10}
-	<p>{x} is greater than 10</p>
-{:else if x < 5}
-	<p>{x} is less than 5</p>
+{#if count > 10}
+	<p>{count} is greater than 10</p>
+{:else if count < 5}
+	<p>{count} is less than 5</p>
 {:else}
-	<p>{x} is between 5 and 10</p>
+	<p>{count} is between 5 and 10</p>
 {/if}