Progressive enhancement in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a button that works without JavaScript.

Svelte

<button [1]>Click me</button>

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

Atype="button"

Bonclick="alert('Hi!')"

Cdisabled

Dhref="#"

Attempts:

3 left

💡 Hint

Common Mistakes

Using onclick attribute which requires JavaScript

Using href attribute on a button element

The type="button" attribute ensures the button behaves correctly without JavaScript.

2fill in blank

medium

Complete the Svelte code to show a message only if JavaScript is enabled.

Svelte

<noscript><p>Please enable JavaScript.</p></noscript>
{#if [1]
  <p>JavaScript is enabled!</p>
{/if}

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

Atrue

BjsEnabled

Cfalse

Dwindow

Attempts:

3 left

💡 Hint

Common Mistakes

Using variables that are undefined

Using false which never shows the message

Using true inside the {#if} block always shows the message when JavaScript runs.

3fill in blank

hard

Fix the error in this Svelte code to progressively enhance a form submit button.

Svelte

<form on:submit|[1]={handleSubmit}>
  <button type="submit">Send</button>
</form>

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

Aonce

BpreventDefault

Ccapture

DstopPropagation

Attempts:

3 left

💡 Hint

Common Mistakes

Using stopPropagation which only stops event bubbling

Using capture or once which do not prevent default

The preventDefault modifier stops the form from submitting normally, allowing JavaScript to handle it.

4fill in blank

hard

Fill both blanks to create a Svelte component that shows a message only after JavaScript loads.

Svelte

<script>
  let [1] = false;
  onMount(() => {
    [2] = true;
  });
</script>

{#if jsLoaded}
  <p>JavaScript is ready!</p>
{/if}

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

AjsLoaded

BisReady

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in declaration and assignment

Not setting the variable to true inside onMount

We declare jsLoaded as false, then set it to true inside onMount to show the message only after JS loads.

5fill in blank

hard

Fill all three blanks to create a Svelte form that works without JS and enhances with JS.

Svelte

<form method="POST" action="/submit" on:submit|[1]={handleSubmit}>
  <input name="email" type="email" required />
  <button type="submit">Submit</button>
</form>

<script>
  import { [2] } from 'svelte';
  let [3] = false;
  [2](() => {
    [3] = true;
  });
  function handleSubmit(event) {
    event.preventDefault();
    // handle form with JS
  }
</script>

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

ApreventDefault

BonMount

CjsReady

DstopPropagation

Attempts:

3 left

💡 Hint

Common Mistakes

Using stopPropagation instead of preventDefault

Not importing onMount

Using inconsistent variable names

The form uses preventDefault to stop normal submit when JS runs. We import onMount to detect JS load and set jsReady to true.