• do
InterCourses
CoursesBlogs
0
← DOM Manipulation with JavaScript
○The page is a tree○Exercise: follow the document reference○Load a script when the page is ready○Exercise: initialize a deferred script○Find one element by id or CSS selector○Exercise: select a notice and label○Compare DOM properties, HTML attributes, and node types○Exercise: inspect a room input and its nodes✦Module Quiz
○Find every match with querySelectorAll○Exercise: label every trail stop○Move from a child to its relatives○Exercise: trace a nested card○Check for missing elements and search within a card○Exercise: update only the chosen card○Compare a live HTMLCollection with a static NodeList○Exercise: safely expand a live collection✦Module Quiz
○Safe text and HTML○Exercise: render a safe notice○Read and change link attributes○Exercise: update an accessible link○Data attributes and conditional text○Exercise: announce session availability○Boolean attributes and DOM properties○Exercise: unlock a volunteer sign-up✦Module Quiz
○Add, remove, and check classes○Exercise: mark a favourite card○Toggle a panel accessibly○Exercise: toggle the help panel○Inline styles, classes, and hidden○Exercise: style and hide a notice○Change a CSS custom property from JavaScript●Exercise: change a workshop card accent✦Module Quiz
○Create and Append a Text Node○Exercise: Add a Reading List Item○Place Nodes Before and Between○Exercise: Order the Workshop Agenda○Remove, Replace, and Clear Safely○Exercise: Refresh a Museum Display○Clone a Card and Insert a Batch○Exercise: Clone Two Exhibit Cards✦Module Quiz
○Listen for Clicks with a Named Handler○Exercise: Check Library Hours○Event Target, Current Target, and Delegation○Exercise: Delegate Pantry Actions○Keyboard Events Without Trapping Keys○Exercise: Search the Recipe Box○Once, Remove, and Bubble○Exercise: Control Workshop Notifications✦Module Quiz
○Read a field while someone types○Build a live name preview○Handle submit without leaving the page○Validate a library request○Keep a selection in sync on change and reset○Sync a preference and its reset state○Read multiple checked values with FormData○Build a checkbox-based garden request✦Module Quiz
○Filter a list as someone types○Build a live trail finder○Toggle an accessible disclosure○Build a guide menu disclosure○Create and remove items with one delegated listener○Build a neighborhood task board○Sort a workshop table with accessible buttons○Build an accessible sortable resource table✦Module Quiz
○Read selectable cards and detail updates○Build directory cards and a selected profile○Trace live search and an empty state○Add live search to the community directory○Trace safe additions and delegated removal○Add and remove community directory cards✦Module Quiz
○Read and update a live itinerary○Build the workshop itinerary○Add a validated item through a form○Add a workshop session○Filter and remove live entries○Finish the workshop planner✦Module Quiz
○Fetch JSON and render safe text○Exercise: load recipe cards○Handle loading, empty, and failed responses○Exercise: handle alert states○Build a query with URLSearchParams○Exercise: search the catalog○Abort outdated requests○Exercise: keep the latest result✦Module Quiz
○Load a dashboard from an offline API fixture○Build an events dashboard○Query a dashboard with URLSearchParams○Add event search to the dashboard○Retry requests without stale results○Finish a resilient event dashboard✦Module Quiz

Exercise: change a workshop card accent

The night-market demo changed two visual details by setting one custom property. A ceramics workshop card now needs an optional plum accent and a way to restore the stylesheet's teal default.

Transfer the idea

A CSS custom property starts with two hyphens, like --accent. A declaration such as border-color: var(--accent) looks up the effective value. element.style.setProperty("--accent", "#hex") changes the value inline on that element, so descendants can inherit it. element.style.removeProperty("--accent") removes the inline value and exposes the value declared in style.css again. Do not replace a class or entire style attribute merely to change one shared variable.

Here is a separate reading-room shelf example. Its selectors, value, and text are not your workshop answer:

javascript
const shelf = document.querySelector("#reading-shelf");
const apply = document.querySelector("#shelf-violet");
const reset = document.querySelector("#shelf-reset");
apply.addEventListener("click", () => {
  shelf.style.setProperty("--shelf-accent", "#7048a4");
});
reset.addEventListener("click", () => {
  shelf.style.removeProperty("--shelf-accent");
});

The starter stylesheet already uses var(--accent) for the card border and its tag. Run the preview, click Plum accent, then Reset accent; inspect both pieces of the card. Write the handlers in script.js and submit when both directions work.

Your Task

  1. On load, change #theme-status to Teal accent selected. The starter CSS already supplies --accent: #167069 on the card; leave that default in place.
  2. On #plum-accent click, set --accent inline on #workshop-card to #713e83 and show Plum accent selected.; the card border and tag should both change.
  3. On #reset-accent click, remove the inline --accent override and show Teal accent restored.; the border and tag should return to teal.
Hint 1
1 / 2
HINT 1

Call style.setProperty("--accent", value) on the card, not on the button.

HINT 2

removeProperty removes the inline override so the stylesheet value wins again.

Take the Quiz →
Loading editor…
READY
intercourses
javascript