If you want to, you can do the exercise on Stackblitz instead.
You can follow along with the awesome official doc.
Use the 'title' variable instead of a hardcoded string.
Update the Button component so its text is always uppercase, and use it instead of <button> in App.svelte.
Modify Button so that it can be given a class, and add a boolean prop to conditionally apply the 'outline' class, like this:
<Button class="secondary" outline={false}>expenses</Button>
<Button class="secondary" outline={true}>balance</Button>
<Button class="secondary" outline={true}>dues</Button>
Loop through the views instead of having the same button written 3 times, and fix the view changing.
Modify Balances so that you can add new users.
Add initial data to the expenses store.
Create Dues component where you display dues and can click a button to delete all expenses.
Add default slot & footer slot to modal, so that form & footer buttons appear.
Fix the form so that an expense can be submitted, and it adds an expense.
- Add a transition between page views.
- Mark expenses as settled instead of deleting them.
- Allow modal to be closed with ‘Esc’.