UNIT 10 • STAGE 6 OF 7
JavaScript
Write the code that reads a card click, finds the right content, and opens the modal
How JavaScript Reads Your Data
In Stage 5 you added a data-dance attribute to each card, values like "jingle-dress" and "fancy-shawl". JavaScript can read those values using getAttribute().
You also need a way to reach all six cards at once. document.querySelectorAll('.dancer-card') returns a list of every element that matches that selector. forEach() loops through the list, running a function once for each card.
cards.forEach(function(card) {
var key = card.getAttribute('data-dance');
// key is now "jingle-dress", "fancy-shawl", etc.
});
The value stored in key is exactly what you typed in the data-dance attribute. You will use it in the next step as a lookup key in a data object.
Build the Dance Data Object
A JavaScript object works like a dictionary. Each key maps to a value, in this case, each dance key maps to an object with a title, nation, and description. Add this just before </body>, inside a new <script> tag:
'jingle-dress': {
title: "Jingle Dress",
nation: "Ojibwe · Lakota · Dakota",
description: "The Jingle Dress dance originates with the Ojibwe people of Whitefish Bay, Ontario, and carries a story of healing. In the origin narrative, a father received a vision when his daughter was gravely ill, he was shown how to make a dress covered in metal cones and how to perform a dance. She put on the dress, danced, and was healed. The very act of dancing in the Jingle Dress is a prayer; spectators may quietly ask a dancer to pray for an ill family member as she moves. The dress traditionally holds 365 cones, one for each day of the year. One foot must always remain on the earth as the dancer moves, keeping her connected to the ground."
},
'fancy-shawl': {
title: "Fancy Shawl",
nation: "Lakota · Dakota · Ojibwe",
description: "The Fancy Shawl dance has an origin rooted in courage. In the early 1940s, a group of teenage girls grew frustrated that only men were permitted to perform the Fancy Dance at powwow. They dressed in men's outfits and danced at a South Dakota powwow, and from that act of determination, women's Fancy Dance was born. A common teaching is that the dance represents a caterpillar emerging from her cocoon as a butterfly, the flowing shawl representing wings in motion. Unlike most women's dance styles, Fancy Shawl breaks with the tradition of keeping one foot on the earth. Dancers leap and spin with full-body freedom."
},
'womens-traditional': {
title: "Women's Traditional",
nation: "Lakota · Dakota · Ojibwe",
description: "Women's Traditional is one of the oldest dance styles at powwow. By tradition, a woman's feet should never completely leave the ground, this symbolizes the close bond between women and the earth. The fringe on her outfit swings in wide arcs with each deliberate step. Regalia for Northern Plains style includes a beaded yoke with long fringe, a fringed shawl draped over the left arm, leggings, moccasins, and a fan held in the right hand. A complete set of regalia often takes years to assemble and represents generations of family work and care."
},
'grass-dance': {
title: "Grass Dance",
nation: "Lakota · Dakota · Ojibwe",
description: "The Grass Dance, known to the Lakota as Peji Waci, is one of the oldest men's dance styles. In one Lakota account, warriors once wore grass around their arms and ankles to blend into the plains before a hunt or battle. When they returned to camp, they were the first to dance, stomping the grass down in all four directions. That stomping motion is still at the heart of the dance today. Grass Dance regalia has no feather bustle; instead, long chainette fringe or yarn is sewn to the shirt and apron, evoking waves of grass moving in the wind. A roach headdress and fan complete the outfit."
},
'mens-traditional': {
title: "Men's Traditional",
nation: "Lakota · Dakota · Ojibwe",
description: "Men's Traditional is rooted in the warrior societies of the Plains Nations. Dancers tell a personal story through movement, incorporating dramatic pauses, crouching, and scanning the horizon as if tracking game or watching for danger. Each story is different, and a skilled dancer conveys that narrative to the audience. The regalia is elaborate: a single back bustle with two cloth trailers, a roach headdress, a bone-pipe breastplate, eagle feathers, and a fan. Many of these elements were part of warrior society regalia long before the modern powwow, connecting today's dancers to those traditions directly."
},
'mens-fancy': {
title: "Men's Fancy",
nation: "Lakota · Dakota · Ojibwe",
description: "Men's Fancy Dance, also called Fancy Feather, first developed in Oklahoma after World War I and spread northward to the Plains and Great Lakes over the following decades. Dancers wear two large feather bustles, one at the lower back and one at the shoulders, along with a roach headdress, beaded aprons, and ribbonwork. Beyond keeping time with the drum, almost anything goes: splits, spins, and full-body athleticism. Songs for Men's Fancy Dance can reach 150 beats per minute, with an exhilarating acceleration toward the end of each song. It is a dance of the young."
}
};
Wire Up the Cards
After the dances object, add the click handler. It reads the data-dance key from the clicked card, looks up the matching entry in the dances object, fills the three modal fields, and opens the overlay:
cards.forEach(function(card) {
card.addEventListener('click', function() {
var key = card.getAttribute('data-dance');
var dance = dances[key];
document.getElementById('modal-title').textContent = dance.title;
document.getElementById('modal-nation').textContent = dance.nation;
document.getElementById('modal-description').textContent = dance.description;
document.getElementById('modal-overlay').style.display = 'flex';
});
});
Click any card in the preview. The modal should open with the correct title, nation, and description. If it does not open, check that your data-dance keys match the keys in the dances object exactly, including hyphens.
Open and Close
The modal needs two ways to close. Add these two event listeners after the card wiring code:
document.getElementById('modal-close').addEventListener('click', function() {
document.getElementById('modal-overlay').style.display = 'none';
});
// Click outside the box to close
document.getElementById('modal-overlay').addEventListener('click', function(e) {
if (e.target === this) {
this.style.display = 'none';
}
});
// Close the <script> tag:
// </script>
What is e.target === this?
The overlay covers the full screen, but the modal box sits inside it. When a visitor clicks the text in the modal, that click also reaches the overlay. e.target is the exact element the visitor clicked. this is the overlay itself. The check e.target === this means: only close if the visitor clicked the overlay directly, not any child element inside it.
Why This Code?
document.querySelectorAll('.dancer-card'), returns a NodeList of all elements matching the selector. A NodeList behaves like an array and supportsforEach().forEach(function(card) { ... }), runs the function once for each card in the list, passing the current card as the argument. This avoids writing six separate click listeners.card.getAttribute('data-dance'), reads the value of thedata-danceattribute from the clicked card. It returns the exact string you typed:"jingle-dress","fancy-shawl", and so on.dances[key], bracket notation looks up a key in an object using a variable. This is different from dot notation (dances.key), which would look for a property literally namedkeyrather than using the variable's value.textContent, sets the visible text of an element. It treats the value as plain text, so characters like<and&are displayed as-is rather than interpreted as HTML. This is safer thaninnerHTMLfor displaying untrusted data.style.display = 'flex', sets an inline style that overrides thedisplay: nonefrom the CSS stylesheet. Setting it back to'none'hides the overlay again.e.target === this, a click on the overlay also fires for clicks on child elements. This check limits the close behavior to clicks directly on the overlay background, not on the modal box.
Stage 6 Complete!
The modal is fully functional. Click any dancer card to open it, and click the close button or the background to dismiss it. In Stage 7 you will add media queries so the grid adapts to different screen sizes, and a footer to complete the page.
© 2026 Relentless Feather. All rights reserved.