Bindings and events

Let's work on another feature of the app: the form to add new content.

AddForm.svelte component

This is yet another long component, so I recommend copying and pasting it from the ch3 folder inside the GitHub repository. The path to the code is src/components/AddForm.svelte, and you should place that in a file at the same location in your project.

The AddForm component renders a form that, when submitted, invokes a handler that sends the data to the API server. The API server stores the journal entry and responds with a JSON object containing the ID of the newly created object.

Let's highlight some snippets from that file (most HTML tags and elements' class attributes have been removed for clarity), as follows:

src/components/AddForm.svelte (fragment)

<form on:submit|preventDefault={submit}>
    <input type="text" bind:value={title} />
    <textarea bind:value={content...