Use fail fast for keydown handler instead of having an additional lev…

…el (#443)

* docs: apply fail fast for keydown function handler

* style: apply fail fast for if condition

content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/App.svelte

@@ -16,10 +16,10 @@
 	<input
 		placeholder="what needs to be done?"
 		on:keydown={(e) => {
-			if (e.key === 'Enter') {
-				todos.add(e.currentTarget.value);
-				e.currentTarget.value = '';
-			}
+			if (e.key !== 'Enter') return;
+
+			todos.add(e.currentTarget.value);
+			e.currentTarget.value = '';
 		}}
 	/>
 

content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/README.md

@@ -12,20 +12,20 @@ Inside the `keydown` event handler of the 'add a todo' `<input>`, let's post som
 	type="text"
 	autocomplete="off"
 	on:keydown={async (e) => {
-		if (e.key === 'Enter') {
-			const input = e.currentTarget;
-			const description = input.value;
-
-+++			const response = await fetch('/todo', {
-				method: 'POST',
-				body: JSON.stringify({ description }),
-				headers: {
-					'Content-Type': 'application/json'
-				}
-			});+++
-
-			input.value = '';
-		}
+		if (e.key !== 'Enter') return;
+
+		const input = e.currentTarget;
+		const description = input.value;
+
++++		const response = await fetch('/todo', {
+			method: 'POST',
+			body: JSON.stringify({ description }),
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});+++
+
+		input.value = '';
 	}}
 />
 ```
@@ -59,27 +59,27 @@ We're returning a response with a [201 Created](https://http.dog/201) status and
 	type="text"
 	autocomplete="off"
 	on:keydown={async (e) => {
-		if (e.key === 'Enter') {
-			const input = e.currentTarget;
-			const description = input.value;
-
-			const response = await fetch('/todo', {
-				method: 'POST',
-				body: JSON.stringify({ description }),
-				headers: {
-					'Content-Type': 'application/json'
-				}
-			});
-
-+++			const { id } = await response.json();
-
-			data.todos = [...data.todos, {
-				id,
-				description
-			}];+++
-
-			input.value = '';
-		}
+		if (e.key !== 'Enter') return;
+
+		const input = e.currentTarget;
+		const description = input.value;
+
+		const response = await fetch('/todo', {
+			method: 'POST',
+			body: JSON.stringify({ description }),
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+
++++		const { id } = await response.json();
+
+		data.todos = [...data.todos, {
+			id,
+			description
+		}];+++
+
+		input.value = '';
 	}}
 />
 ```

content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte

@@ -11,14 +11,14 @@
 			type="text"
 			autocomplete="off"
 			on:keydown={async (e) => {
-				if (e.key === 'Enter') {
-					const input = e.currentTarget;
-					const description = input.value;
-
-					// TODO handle submit
+				if (e.key !== 'Enter') return;
 
-					input.value = '';
-				}
+				const input = e.currentTarget;
+				const description = input.value;
+
+				// TODO handle submit
+
+				input.value = '';
 			}}
 		/>
 	</label>

content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte

@@ -11,27 +11,27 @@
 			type="text"
 			autocomplete="off"
 			on:keydown={async (e) => {
-				if (e.key === 'Enter') {
-					const input = e.currentTarget;
-					const description = input.value;
-
-					const response = await fetch('/todo', {
-						method: 'POST',
-						body: JSON.stringify({ description }),
-						headers: {
-							'Content-Type': 'application/json'
-						}
-					});
+				if (e.key !== 'Enter') return;
 
-					const { id } = await response.json();
+				const input = e.currentTarget;
+				const description = input.value;
+
+				const response = await fetch('/todo', {
+					method: 'POST',
+					body: JSON.stringify({ description }),
+					headers: {
+						'Content-Type': 'application/json'
+					}
+				});
 
-					data.todos = [...data.todos, {
-						id,
-						description
-					}];
+				const { id } = await response.json();
 
-					input.value = '';
-				}
+				data.todos = [...data.todos, {
+					id,
+					description
+				}];
+
+				input.value = '';
 			}}
 		/>
 	</label>

content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte

@@ -11,27 +11,27 @@
 			type="text"
 			autocomplete="off"
 			on:keydown={async (e) => {
-				if (e.key === 'Enter') {
-					const input = e.currentTarget;
-					const description = input.value;
-
-					const response = await fetch('/todo', {
-						method: 'POST',
-						body: JSON.stringify({ description }),
-						headers: {
-							'Content-Type': 'application/json'
-						}
-					});
+				if (e.key !== 'Enter') return;
 
-					const { id } = await response.json();
+				const input = e.currentTarget;
+				const description = input.value;
+
+				const response = await fetch('/todo', {
+					method: 'POST',
+					body: JSON.stringify({ description }),
+					headers: {
+						'Content-Type': 'application/json'
+					}
+				});
 
-					data.todos = [...data.todos, {
-						id,
-						description
-					}];
+				const { id } = await response.json();
 
-					input.value = '';
-				}
+				data.todos = [...data.todos, {
+					id,
+					description
+				}];
+
+				input.value = '';
 			}}
 		/>
 	</label>

src/routes/tutorial/[slug]/Chrome.svelte

@@ -24,10 +24,10 @@
 			dispatch('change', { value: e.currentTarget.value });
 		}}
 		on:keydown={(e) => {
-			if (e.key === 'Enter') {
-				dispatch('change', { value: e.currentTarget.value });
-				e.currentTarget.blur();
-			}
+			if (e.key !== 'Enter') return;
+
+			dispatch('change', { value: e.currentTarget.value });
+			e.currentTarget.blur();
 		}}
 	/>