WDD 330: Web Frontend Development II

W05 Learning Activity: Dataset

Overview

The dataset HTML property is a way to access custom data attributes on HTML elements. This allows for the storage of additional information on an element without affecting the HTML structure. The dataset property is an object that contains all the custom data attributes of an element, and each attribute can be accessed using camelCase notation. For example, if an element has a data attribute of data-user-id, it can be accessed using element.dataset.userId.

Prepare

dataset is a property on any HTML element that allows you to access custom data-* attributes. This allows data to be passed to JavaScript without using id or class attributes, which can become extensive and complex. Using dataset prepares you to used many UI frameworks that use data attributes to bind data to HTML elements, keeping things flexible and declarative in HTML.

Here is an example of how to use the dataset property:

<button data-user-id="42" data-role="admin">Edit</button>
const element = document.querySelector('#myElement');
element.dataset.userId = '12345';
console.log(element.dataset.userId); // '12345'
element.dataset.userId = '67890';
console.log(element.dataset.userId); // '67890'
element.dataset.userId = '12345';
console.log(element.dataset.userId); // '12345'
element.dataset.userId = '67890';
console.log(element.dataset.userId); // '67890'

Activity Instructions

This activity will teach you how to embed structured data into HTML elements using data-* attributes and access that data using JavaScript to build interactive behavior and CSS to style elements based on that data.

Set Up Your HTML

  1. Create an HTML file named datasets.html
  2. In the HTML file, create the following list of items: 
    <ul id="items">
  <li>Banana</li>
  <li>Carrot</li>
  <li>Blueberry</li>
</ul>
  3. Add the following data-* attributes to each item:
    • data-name: The name of the item (e.g., "banana", "carrot", "blueberry").
    • data-category: The category of the item (e.g., "fruit", "vegetable", "dairy").
    • data-color: The color of the item (e.g., "yellow", "orange", "blue").
    Check Your Understanding 
    <ul id="items">
  <li data-name="banana" data-category="fruit" data-color="yellow">Banana</li>
  <li data-name="carrot" data-category="vegetable" data-color="orange">Carrot</li>
  <li data-name="blueberry" data-category="fruit" data-color="blue">Blueberry</li>
</ul>

JavaScript Interaction

  1. In a script file or <script> tag, select all list items using document.querySelectorAll and store them in a variable.
  2. Loop through each list item and log the values of the data-name, data-category, and data-color attributes to the console using the dataset property.
    Check Your Understanding 
    const items = document.querySelectorAll('#items li');
items.forEach(item => {
  console.log('Name:', item.dataset.name);
  console.log('Category:', item.dataset.category);
  console.log('Color:', item.dataset.color);
});
  3. Add an event listener when a user clicks on a product, display its details below the list.
    Check Your Understanding 
    const items = document.querySelectorAll('#items li');
const details = document.createElement('div');
document.body.appendChild(details);
items.forEach(item => {
  item.addEventListener('click', () => {
    details.innerHTML = `
      <h2>Item Details</h2>
      <p>Name: ${item.dataset.name}</p>
      <p>Category: ${item.dataset.category}</p>
      <p>Color: ${item.dataset.color}</p>
    `;
  });
});

Style

  1. Style items differently based on their data-category or data-price.
Check Your Understanding 
li[data-category="fruit"] {
  background-color: lightyellow;
}

li[data-category="vegetable"] {
  background-color: lightgreen;
}

li[data-category="dairy"] {
  background-color: lightblue;
}

Questions to Consider

Optional Resources