03 Interactive pages: challenges

Use a deferred external script and an exact selector.

const status = document.querySelector("#status");
if (status !== null) {
  status.textContent = "Ready";
}

Your HTML must contain <p id="status">Waiting</p>. Confirm the source file is unchanged even though the displayed DOM text changes.

Use createElement inside the loop and clear the container first.

const clubs = ["Robotics", "Art", "Coding"];
const list = document.querySelector("#club-list");
if (list !== null) {
  list.replaceChildren();
  for (const name of clubs) {
    const item = document.createElement("li");
    item.textContent = name;
    list.append(item);
  }
}

Add <ul id="club-list"></ul> to your page. Test an empty array as well.

Use textContent and inspect the DOM.

const output = document.querySelector("#status");
if (output !== null) {
  output.textContent = "<b>Chess</b>";
  console.log(output.querySelector("b") === null);
}

The visitor sees the angle-bracket text and the console logs true. Do not replace textContent with innerHTML.

Pass the function reference as the second argument.

const button = document.querySelector("#activate");
function activate() {
  console.log("Activated");
}
button.addEventListener("click", activate);

Supply <button id="activate" type="button">Activate</button>. Do not write activate() in addEventListener.

Update count, then renderCount.

const subtractButton = document.querySelector("#event-subtract");
subtractButton.addEventListener("click", () => {
  if (count > 0) {
    count -= 1;
  }
  renderCount();
});

Add the matching type=button element to the complete counter page. The test ends at zero, not -1.

Use the input event, trim and textContent.

Use the complete live-greeting listener from 03.2. Test text input, paste, deletion and only spaces. A keydown-only solution misses some ways a field can change.

Use a real button and keep the hidden boolean as the state.

Use the 03.2 help control. Hidden panel means aria-expanded=false and Show help; visible panel means true and Hide help. The controls should still work with Tab and Enter or Space.

Use valid fictional name/email details so each test isolates quantity.

Only 1 and 6 succeed, producing 6 and 36 credits. Rejected input should replace an earlier success message. Check blank input before Number conversion and enforce an integer range.

Inspect which operations the program actually performs.

The program changes DOM text only. There is no network booking/email operation. Browser checks can be changed or bypassed; a real server must verify received values, permission and availability itself.

Use a stable HTTP address and the app-specific key.

The stored value is JSON text. Loading parses it, validates its version/subject/integer duration and fills the controls. A different host or port may have a different storage area.

Edit only this app’s key in your practice origin’s storage panel.

All three unsuitable records lead to defaults and controlled guidance. Forget calls removeItem for this feature’s key only. A blocked or failed save must say Not saved rather than claim success.

Use the capstone folder in the download as guidance after attempting your own design.

The reference uses an array of workshop objects, selected form elements, submit/click listeners, a numeric calculation and a versioned JSON record. some checks whether at least one workshop ID matches; find retrieves that record for rendering.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A saved workshop-cost choice</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <main>
    <h1>A saved workshop-cost choice</h1>
<p>Practice preview only: no booking, payment or personal details. Save remembers only the selected workshop and quantity on this browser.</p>
<form id="plan-form" novalidate>
  <p><label for="plan-workshop">Workshop : </label> <select id="plan-workshop" name="workshop"><option value="robotics">Robotics</option><option value="web">Web design</option></select></p>
  <p><label for="plan-quantity">Tickets, 1 to 6 : </label> <input id="plan-quantity" name="quantity" type="number" min="1" max="6" step="1" value="1" required></p>
  <button type="submit">Preview cost</button>
  <button id="plan-save" type="button">Save this choice</button>
  <button id="plan-forget" type="button">Forget this choice</button>
</form>
<p id="plan-result" role="status" aria-live="polite">Choose a workshop and preview its cost.</p>
<p id="plan-status" role="status" aria-live="polite"></p>
  </main>
</body>
</html>

script.js

const workshops = [
  { id: "robotics", name: "Robotics", price: 6 },
  { id: "web", name: "Web design", price: 4 }
];
const planKey = "csc-js03-workshop-choice-v1";
const planForm = document.querySelector("#plan-form");
const workshopInput = document.querySelector("#plan-workshop");
const quantityInput = document.querySelector("#plan-quantity");
const result = document.querySelector("#plan-result");
const status = document.querySelector("#plan-status");

function validChoice(value) {
  return value !== null && typeof value === "object" && !Array.isArray(value)
    && value.version === 1
    && workshops.some((workshop) => workshop.id === value.workshopId)
    && Number.isInteger(value.quantity) && value.quantity >= 1 && value.quantity <= 6;
}
function readChoice() {
  const text = quantityInput.value.trim();
  const choice = { version: 1, workshopId: workshopInput.value, quantity: Number(text) };
  return text !== "" && validChoice(choice) ? choice : null;
}
function renderChoice(choice) {
  const workshop = workshops.find((item) => item.id === choice.workshopId);
  result.textContent = `${workshop.name}: ${choice.quantity} ticket(s), ${choice.quantity * workshop.price} credits. Preview only.`;
}
function showDefaults() {
  workshopInput.value = "robotics";
  quantityInput.value = "1";
  result.textContent = "Choose a workshop and preview its cost.";
}
planForm.addEventListener("input", () => {
  result.textContent = "Choice changed. Preview again for the current cost.";
  status.textContent = "Changes are not saved until you select Save this choice.";
});
planForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const choice = readChoice();
  if (choice === null || !planForm.reportValidity()) {
    result.textContent = "Choose an available workshop and a whole quantity from 1 to 6.";
    return;
  }
  renderChoice(choice);
});
document.querySelector("#plan-save").addEventListener("click", () => {
  const choice = readChoice();
  if (choice === null || !planForm.reportValidity()) {
    result.textContent = "Choose an available workshop and a whole quantity from 1 to 6.";
    status.textContent = "Not saved: correct the input first.";
    return;
  }
  renderChoice(choice);
  try {
    localStorage.setItem(planKey, JSON.stringify(choice));
    status.textContent = "Choice saved in this browser. No booking was made.";
  } catch (error) {
    status.textContent = "Not saved: browser storage is unavailable or full.";
  }
});
document.querySelector("#plan-forget").addEventListener("click", () => {
  try {
    localStorage.removeItem(planKey);
    showDefaults();
    status.textContent = "This saved choice was removed.";
  } catch (error) {
    status.textContent = "The saved choice could not be removed.";
  }
});
showDefaults();
try {
  const text = localStorage.getItem(planKey);
  if (text !== null) {
    const choice = JSON.parse(text);
    if (validChoice(choice)) {
      workshopInput.value = choice.workshopId;
      quantityInput.value = String(choice.quantity);
      renderChoice(choice);
      status.textContent = "Saved choice restored. This is still a preview.";
    } else {
      status.textContent = "Saved choice is invalid. Defaults shown; Save can replace it.";
    }
  }
} catch (error) {
  status.textContent = "Saved choice could not be loaded. Defaults are available.";
}

Test Web design × 3 = 12 credits, Robotics × 6 = 36, blank/7/fractional rejection, reload restore, invalid stored data and blocked storage. No names or emails are stored and no reservation is created. This small example does not synchronise changes across multiple open tabs.