From 5eb2da0898314c31c746b64e7cebab2001909a19 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Tue, 26 Feb 2019 21:27:09 -0500
Subject: [PATCH] add some logic chapters

---
 .../03-logic/01-if-blocks/app-a/App.svelte    | 15 ++++++++++++
 .../03-logic/01-if-blocks/app-b/App.svelte    | 19 +++++++++++++++
 .../tutorial/03-logic/01-if-blocks/text.md    | 23 +++++++++++++++++++
 .../03-logic/02-else-blocks/app-a/App.svelte  | 19 +++++++++++++++
 .../03-logic/02-else-blocks/app-b/App.svelte  | 17 ++++++++++++++
 .../tutorial/03-logic/02-else-blocks/text.md  | 19 +++++++++++++++
 site/content/tutorial/03-logic/meta.json      |  3 +++
 site/content/tutorial/99-todo/99-todo/text.md |  2 +-
 8 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 site/content/tutorial/03-logic/01-if-blocks/app-a/App.svelte
 create mode 100644 site/content/tutorial/03-logic/01-if-blocks/app-b/App.svelte
 create mode 100644 site/content/tutorial/03-logic/01-if-blocks/text.md
 create mode 100644 site/content/tutorial/03-logic/02-else-blocks/app-a/App.svelte
 create mode 100644 site/content/tutorial/03-logic/02-else-blocks/app-b/App.svelte
 create mode 100644 site/content/tutorial/03-logic/02-else-blocks/text.md
 create mode 100644 site/content/tutorial/03-logic/meta.json

diff --git a/site/content/tutorial/03-logic/01-if-blocks/app-a/App.svelte b/site/content/tutorial/03-logic/01-if-blocks/app-a/App.svelte
new file mode 100644
index 0000000000..38efdc9ddd
--- /dev/null
+++ b/site/content/tutorial/03-logic/01-if-blocks/app-a/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+<button on:click={toggle}>
+	Log out
+</button>
+
+<button on:click={toggle}>
+	Log in
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/03-logic/01-if-blocks/app-b/App.svelte b/site/content/tutorial/03-logic/01-if-blocks/app-b/App.svelte
new file mode 100644
index 0000000000..01b8867ade
--- /dev/null
+++ b/site/content/tutorial/03-logic/01-if-blocks/app-b/App.svelte
@@ -0,0 +1,19 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{/if}
+
+{#if !user.loggedIn}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/03-logic/01-if-blocks/text.md b/site/content/tutorial/03-logic/01-if-blocks/text.md
new file mode 100644
index 0000000000..33915070cb
--- /dev/null
+++ b/site/content/tutorial/03-logic/01-if-blocks/text.md
@@ -0,0 +1,23 @@
+---
+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:
+
+```html
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{/if}
+
+{#if !user.loggedIn}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
+```
+
+Try it — update the component, and click on the buttons.
\ No newline at end of file
diff --git a/site/content/tutorial/03-logic/02-else-blocks/app-a/App.svelte b/site/content/tutorial/03-logic/02-else-blocks/app-a/App.svelte
new file mode 100644
index 0000000000..01b8867ade
--- /dev/null
+++ b/site/content/tutorial/03-logic/02-else-blocks/app-a/App.svelte
@@ -0,0 +1,19 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{/if}
+
+{#if !user.loggedIn}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/03-logic/02-else-blocks/app-b/App.svelte b/site/content/tutorial/03-logic/02-else-blocks/app-b/App.svelte
new file mode 100644
index 0000000000..c82565c2f7
--- /dev/null
+++ b/site/content/tutorial/03-logic/02-else-blocks/app-b/App.svelte
@@ -0,0 +1,17 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{:else}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/03-logic/02-else-blocks/text.md b/site/content/tutorial/03-logic/02-else-blocks/text.md
new file mode 100644
index 0000000000..d25a7d3897
--- /dev/null
+++ b/site/content/tutorial/03-logic/02-else-blocks/text.md
@@ -0,0 +1,19 @@
+---
+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:
+
+```html
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{:else}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
+```
+
+> A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.
\ No newline at end of file
diff --git a/site/content/tutorial/03-logic/meta.json b/site/content/tutorial/03-logic/meta.json
new file mode 100644
index 0000000000..3ecf1ccee2
--- /dev/null
+++ b/site/content/tutorial/03-logic/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Logic"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/99-todo/99-todo/text.md b/site/content/tutorial/99-todo/99-todo/text.md
index 63188e6a26..7ae616b80f 100644
--- a/site/content/tutorial/99-todo/99-todo/text.md
+++ b/site/content/tutorial/99-todo/99-todo/text.md
@@ -37,7 +37,7 @@ Side-quest: create a 'Svelte for new developers' blog post that assumes no knowl
 
 ## Logic
 
-* [ ] If blocks
+* [x] If blocks
 * [ ] Else/elseif blocks
 * [ ] Each blocks
 * [ ] Keyed each blocks (maybe? kind of need to cover transitions before we can make this obvious)