• 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

Build a checkbox-based garden request

A community garden wants visitors to request watering and/or compost help. The starter has the name field and one checkbox. Complete the form, then use the preceding seed-swap demo to guide the JavaScript.

Transfer the pattern

Here is a separate worked example for a library survey. The shared name groups checked fields, while textContent keeps the visitor's text literal:

html
<form id="library-form">
  <label><input type="checkbox" name="format" value="Audio"> Audio</label>
  <label><input type="checkbox" name="format" value="Print"> Print</label>
</form>
<p id="library-result" role="status"></p>
javascript
const survey = document.querySelector("#library-form");
const result = document.querySelector("#library-result");
const selected = new FormData(survey).getAll("format");
result.textContent = selected.length ? selected.join(", ") : "No formats chosen";

For the garden, do the read inside submit so each request uses the latest checkbox state. Prevent navigation and trim the visitor's name. An unchecked box is absent from FormData, not a value of false. Use textContent, not HTML insertion, for the output.

Your Task

  1. Add a labelled help checkbox with value Compost beside the existing Watering option.
  2. Make #garden-status a polite live status region.
  3. Prevent default navigation when #garden-form is submitted.
  4. On submit, report the checked help values using FormData.getAll("help"); report “no help selected” when none are checked.
  5. Include the trimmed guest name as literal text in the report, without parsing markup.
  6. For a blank or whitespace-only guest name, show a missing-name error instead of a request.

Try one check, both checks, and neither, resubmitting each time. Type <em>Jo</em> as a name: the output should show the angle brackets rather than create an emphasized element.

Hint 1
1 / 2
HINT 1

Give both checkboxes the same name but different values; getAll returns only checked values.

HINT 2

Read a new FormData(form) inside the submit handler, not once when the page loads.

Take the Quiz →
Loading editor…
READY
intercourses
javascript