Project final - Widget

Combine all parts, add noscript fallback and data-* hooks, then document.

Final step: combine and add fallback

In the final lesson we combine all parts and make the widget resilient. We add three things:

<noscript>: fallback message when JavaScript is off
data-* attributes: JavaScript hooks
A descriptive comment at the top of the document

The panel then works in no-JavaScript environments and external scripts can find the widget easily. These three small additions make the widget ready for production.

noscript and data-* hooks

The content of <noscript> is shown only when JavaScript is disabled. We put a message like 'This panel requires JavaScript' in our widget.

data-* attributes carry custom data; for example data-refresh="60" says the panel refreshes every 60 seconds. These attributes help JavaScript find and control the widget.

The panel stays both accessible and scriptable.

Exercise Finish the widget: comment, data-*, noscript

Take the widget from the previous lesson. Add three things:

1) At the very top of the document, before <!DOCTYPE>, put a descriptive comment: .

2) On the <section> tag add id="sales-widget", data-widget="sales" and data-refresh="60" attributes.

3) After </section>, before <template>, add a <noscript>; inside it put <p>This panel requires JavaScript; please enable JavaScript.</p>.

Show example solution

<!-- Sales Dashboard widget: KPI, table and template -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sales Dashboard</title>
  </head>
  <body>
    <section id="sales-widget" data-widget="sales" data-refresh="60">
      <header>
        <h1>Sales Dashboard</h1>
      </header>
      <main>
        <article>
          <figure>
            <figcaption>Monthly revenue</figcaption>
            <p>$12,450</p>
          </figure>
          <table>
            <thead>
              <tr>
                <th>Product</th>
                <th>Sales</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Cotton t-shirt</td>
                <td>320</td>
              </tr>
              <tr>
                <td>Linen trousers</td>
                <td>184</td>
              </tr>
            </tbody>
          </table>
        </article>
      </main>
    </section>
    <noscript>
      <p>This panel requires JavaScript; please enable JavaScript.</p>
    </noscript>
    <template id="widget-template">
      <article>
        <header>
          <h2>New Sales Dashboard</h2>
        </header>
        <slot name="content">
          <p>Waiting for data</p>
        </slot>
      </article>
    </template>
  </body>
</html>

The widget is complete!

Congratulations! After 5 lessons you have a real sales dashboard widget: semantic shell, KPI and table, reusable template and graceful fallback, all together.

You can carry these patterns to your own panels: header/main/article shell, figure+table data structure, template+slot reuse, and noscript+data-* hooks.

Next step: style this widget with a CSS course or wire it to live data with JavaScript.

Test yourself

When is the <noscript> element shown?
- When JavaScript is disabled or fails to load
- Only when CSS is disabled
- Only on mobile browsers
- Never, it's just treated as a comment
Show answer

When JavaScript is disabled or fails to load — Correct! noscript content is shown when JavaScript is disabled or fails to load.

Complete the data-* attribute

<section id="sales-widget" data-____="60">
</section>

Show answer

<section id="sales-widget" data-refresh="60">
</section>

Match the final-step concepts

noscript

Content when scripts off
data-*

Custom data attribute
id

Unique identifier
comment

In-document note

Next lesson: Challenge - Responsive image

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies