Textarea bindings in Svelte - Mini Project: Build & Apply

Textarea Bindings in Svelte

📖 Scenario: You are building a simple note-taking app where users can type their notes into a box. The app should remember what the user types and show it live below the box.

🎯 Goal: Create a Svelte component with a <textarea> that updates a variable as the user types. Display the typed text below the textarea in real time.

📋 What You'll Learn

Create a variable called note initialized as an empty string.

Add a <textarea> element bound to the note variable using Svelte's binding syntax.

Display the current value of note inside a <p> tag below the textarea.

Ensure the displayed text updates instantly as the user types.

💡 Why This Matters

🌍 Real World

Textarea bindings are common in forms, note-taking apps, and anywhere users input multi-line text.

💼 Career

Understanding two-way binding in Svelte is essential for building interactive web apps that respond instantly to user input.

1

Set up the note variable

Create a variable called note and set it to an empty string "" inside the <script> tag.

Svelte

  // Your code here

Need a hint?

Use let note = ""; inside the <script> tag to create the variable.

2

Add a <textarea> with binding

Add a <textarea> element below the <script> tag. Bind its value to the note variable using Svelte's bind:value syntax.

Svelte

  let note = "";

Need a hint?

Use <textarea bind:value={note}></textarea> to bind the textarea content to the variable.

3

Display the live note text

Add a <p> tag below the <textarea> that shows the current value of the note variable using curly braces {note}.

Svelte

  let note = "";

Need a hint?

Use <p>{note}</p> to show the live text below the textarea.

4

Add a label and accessibility features

Wrap the <textarea> with a <label> that says "Your Note:". Add an id attribute "note-textarea" to the textarea and link it with the label's for attribute for accessibility.

Svelte

  let note = "";





{note}

Need a hint?

Use <label for="note-textarea">Your Note:</label> and add id="note-textarea" to the textarea.