Component bindings in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Svelte

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

<input type="text" [1]={name}>
<p>Hello, {name}!</p>

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

Abind:model

Bbind:input

Cbind:text

Dbind:value

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:input instead of bind:value

Trying to use bind:model which is not valid in Svelte

Forgetting to use bind: prefix

In Svelte, bind:value binds the input's value to the variable, keeping them in sync.

2fill in blank

medium

Complete the code to bind the checkbox checked state to the variable.

Svelte

<script>
  let accepted = false;
</script>

<label>
  <input type="checkbox" [1]={accepted}>
  Accept terms
</label>

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

Abind:selected

Bbind:value

Cbind:checked

Dbind:state

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:value which works for text inputs but not checkboxes

Using bind:selected which is for select elements

Using bind:state which is not a valid binding

Checkboxes use bind:checked to bind their checked state to a variable in Svelte.

3fill in blank

hard

Fix the error in binding a select element's value to the variable.

Svelte

<script>
  let color = 'red';
</script>

<select [1]={color}>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

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

Abind:selected

Bbind:value

Cbind:checked

Dbind:option

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:selected which is not a valid Svelte binding

Using bind:checked which is for checkboxes

Using bind:option which does not exist

For select elements, bind:value binds the selected option's value to the variable.

4fill in blank

hard

Fill both blanks to bind a custom component's prop and listen to its event.

Svelte

<script>
  import Child from './Child.svelte';
  let count = 0;
</script>

<Child [1]={count} on:[2]={() => count++} />

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

Abind:value

Bclick

Cbind:count

Dchange

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:value instead of bind:count for the prop

Listening to wrong event name like change instead of click

To bind a prop named count in a child component, use bind:count. To listen for a click event, use on:click.

5fill in blank

hard

Fill all three blanks to bind a textarea value, handle input event, and update a variable.

Svelte

<script>
  let message = '';
  function handleInput(event) {
    [1] = event.target.[2];
  }
</script>

<textarea [3]={message} on:input={handleInput}></textarea>
<p>Message length: {message.length}</p>

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

Amessage

Bvalue

Cbind:value

Dbind:input

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:input which is not a valid binding

Trying to update event.target.input instead of event.target.value

Not binding the textarea value

The variable message is updated with the textarea's value. The textarea binds its value with bind:value.