Progressive enhancement in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a basic link that works without JavaScript.

Remix

<a href="[1]">Go to Home</a>

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

A/home

Bjavascript:void(0)

C#

Donclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'javascript:void(0)' disables the link's default behavior.

Using '#' only scrolls to the top and does not navigate.

The href attribute should point to a valid URL to ensure the link works even if JavaScript is disabled.

2fill in blank

medium

Complete the code to add a button that enhances the link with JavaScript behavior.

Remix

<button type="button" [1]>Click me</button>

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

Ahref="/home"

Bonclick="alert('Hello!')"

Cdisabled

Dtype="submit"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'href' on a button is invalid HTML.

Setting type to 'submit' causes form submission unexpectedly.

The onclick attribute adds JavaScript behavior to the button, enhancing the user experience.

3fill in blank

hard

Fix the error in the Remix loader function to fetch data for progressive enhancement.

Remix

export async function loader() {
  const data = await fetch('/api/data').then(res => res.[1]());
  return { data };
}

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

Ablob

Btext

Chtml

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text()' returns raw text, not parsed JSON.

Using 'html()' is not a valid method on Response. 'blob()' returns a Blob, not parsed JSON.

The json() method parses the response as JSON, which is needed to get usable data.

4fill in blank

hard

Fill both blanks to create a form that works without JavaScript and enhances with Remix action.

Remix

<form method="[1]" action="[2]">
  <button type="submit">Submit</button>
</form>

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

Apost

B/submit

C/api/submit

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET method sends data in URL, not suitable for sensitive data.

Using wrong action URL causes form submission failure.

The form uses method post and action /submit to send data to the server, working without JavaScript.

5fill in blank

hard

Fill all three blanks to enhance a button with Remix useFetcher hook for progressive enhancement.

Remix

import { useFetcher } from '@remix-run/react';

export default function MyComponent() {
  const fetcher = useFetcher();

  return (
    <fetcher.Form method="[1]" action="[2]">
      <button type="[3]">Send</button>
    </fetcher.Form>
  );
}

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

Apost

B/api/send

Csubmit

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET method sends data in URL, not suitable here.

Using button type other than submit prevents form submission.

The useFetcher form uses method post, action /api/send, and button type submit to send data with progressive enhancement.