update select multiple exercise

Author: Rich Harris

content/tutorial/01-svelte/06-bindings/06-multiple-select-bindings/README.md

@@ -2,21 +2,21 @@
 title: Select multiple
 ---
 
-A select can have a `multiple` attribute, in which case it will populate an array rather than selecting a single value.
+A `<select>` element can have a `multiple` attribute, in which case it will populate an array rather than selecting a single value.
 
-Returning to our [earlier ice cream example](/tutorial/group-inputs), we can replace the checkboxes with a `<select multiple>`:
+Replace the checkboxes with a `<select multiple>`:
 
 ```svelte
 /// file: App.svelte
 <h2>Flavours</h2>
 
-<select multiple bind:value={flavours}>
-	{#each menu as flavour}
-		<option value={flavour}>
-			{flavour}
-		</option>
++++<select multiple bind:value={flavours}>+++
+	{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}
++++		<option>{flavour}</option>+++
 	{/each}
-</select>
++++</select>+++
 ```
 
-> Press and hold the `control` key (or the `command` key on MacOS) for selecting multiple options.
+Note that we're able to omit the `value` attribute on the `<option>`, since the value is identical to the element's contents.
+
+> Press and hold the `control` key (or the `command` key on MacOS) to select multiple options.

content/tutorial/01-svelte/06-bindings/06-multiple-select-bindings/app-a/src/lib/App.svelte

@@ -1,43 +1,30 @@
 <script>
 	let scoops = 1;
-	let flavours = ['Mint choc chip'];
+	let flavours = [];
 
-	let menu = [
-		'Cookies and cream',
-		'Mint choc chip',
-		'Raspberry ripple'
-	];
-
-	function join(flavours) {
-		if (flavours.length === 1) return flavours[0];
-		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
-	}
+	const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
 </script>
 
 <h2>Size</h2>
 
-<label>
-	<input type=radio bind:group={scoops} value={1}>
-	One scoop
-</label>
-
-<label>
-	<input type=radio bind:group={scoops} value={2}>
-	Two scoops
-</label>
+{#each [1, 2, 3] as number}
+	<label>
+		<input
+			type="radio"
+			name="scoops"
+			value={number}
+			bind:group={scoops}
+		/>
 
-<label>
-	<input type=radio bind:group={scoops} value={3}>
-	Three scoops
-</label>
+		{number} {number === 1 ? 'scoop' : 'scoops'}
+	</label>
+{/each}
 
 <h2>Flavours</h2>
 
 <select multiple bind:value={flavours}>
-	{#each menu as flavour}
-		<option value={flavour}>
-			{flavour}
-		</option>
+	{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}
+		<option>{flavour}</option>
 	{/each}
 </select>
 
@@ -48,6 +35,6 @@
 {:else}
 	<p>
 		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
-		of {join(flavours)}
+		of {formatter.format(flavours)}
 	</p>
-{/if}
+{/if}

content/tutorial/01-svelte/06-bindings/06-multiple-select-bindings/app-b/src/lib/App.svelte

@@ -115,7 +115,7 @@
 				background: var(--bg-1);
 			}
 
-			select {
+			select:not([multiple]) {
 				background: var(--bg-2);
 			}