Join Not Displaying Selected Items - Using Svelte - html

Question

What this code does: If no flavours are selected, "Please select at least one flavour" & "You ordered and undefined is displayed". Then if a flavour is selected, nothing is displayed.
What I'm trying to do: If no flavours are selected, "Please select at least one flavour" is displayed. Then only if something is selected, I want to display "You ordered (then list whatever they ordered)" ie: You ordered Mint choc chip, cookies and cream".
I'm confused because I thought that ${flavours.slice(0, -1).join(', ')}; & You ordered {join(flavours)} would list the flavours selected. This is the code that I'm playing around with. (credit: Svelte example from Svelte website)
<script>
let scoops = 1;
let flavours = ['Mint choc chip'];
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(', ')};
}
</script>
<h2>Flavours</h2>
{#each menu as flavour}
<label>
<input type=checkbox bind:group={flavours} value={flavour}>
{flavour}
</label>
{/each}
{#if flavours.length === 0}
<p>Please select at least one flavour</p>
<p>
You ordered {join(flavours)}
</p>
{/if}

Answer 1

You've got a few mistakes...
You're missing a quote (but that's a syntax error, I guess you would have noticed if you have this in your original code because it wouldn't work at all):
return `${flavours.slice(0, -1).join(', ')};
// fixed:
return `${flavours.slice(0, -1).join(', ')}`;
// you don't need the quotes here, anyway:
return flavours.slice(0, -1).join(', ');
You're also missing a else, that's why your code display nothing when some values are selected:
{#if flavours.length === 0}
<p>Please select at least one flavour</p>
{:else} <-- HERE -->
<p>
You ordered {join(flavours)}
</p>
{/if}
And, finally, why the slice? It drops the last value, is that really what you want?
// fixed
return flavours.join(', ');