Textarea bindings in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the textarea value to the variable.

Svelte

<script>
  let text = '';
</script>

<textarea [1]={text}></textarea>
<p>{text}</p>

Drag options to blanks, or click blank then click option'

Abind:value

Bvalue

Cbind:text

Dbind:input

Attempts:

3 left

💡 Hint

Common Mistakes

Using just 'value' attribute without binding.

Trying to bind to 'input' or 'text' which are not valid binding properties.

In Svelte, to bind the value of a textarea to a variable, use bind:value.

2fill in blank

medium

Complete the code to update the variable when the textarea content changes.

Svelte

<script>
  let message = '';
</script>

<textarea [1]={message}></textarea>
<p>{message}</p>

Drag options to blanks, or click blank then click option'

Abind:value

Bbind:content

Con:change

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using on:change without binding does not update the variable automatically.

Trying to bind to a non-existent property like 'content'.

The bind:value directive keeps the variable updated with the textarea content in Svelte.

3fill in blank

hard

Fix the error in the textarea binding to correctly update the variable.

Svelte

<script>
  let note = '';
</script>

<textarea [1]={note}></textarea>
<p>{note}</p>

Drag options to blanks, or click blank then click option'

Avalue

Bbind:note

Cbind:text

Dbind:value

Attempts:

3 left

💡 Hint

Common Mistakes

Using value attribute without binding.

Trying to bind to the variable name instead of the property.

The correct way to bind the textarea's content to the variable note is using bind:value.

4fill in blank

hard

Fill both blanks to create a textarea that updates the variable and displays its length.

Svelte

<script>
  let content = '';
</script>

<textarea [1]={content}></textarea>
<p>Length: {content [2]</p>

Drag options to blanks, or click blank then click option'

Abind:value

B.length

C.size

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using .size which is not valid for strings.

Not binding the textarea value properly.

Use bind:value to bind the textarea content, and .length to get the string length.

5fill in blank

hard

Fill all three blanks to bind a textarea, show its uppercase content, and display character count.

Svelte

<script>
  let input = '';
</script>

<textarea [1]={input}></textarea>
<p>Uppercase: {input[2]()</p>
<p>Count: {input[3]</p>

Drag options to blanks, or click blank then click option'

Abind:value

B.toUpperCase

C.length

D.toLowerCase

Attempts:

3 left

💡 Hint

Common Mistakes

Using .toLowerCase() instead of uppercase.

Forgetting parentheses on .toUpperCase().

Not binding the textarea value.

Bind the textarea with bind:value, use .toUpperCase() to show uppercase, and .length for character count.