A small bridge to the next course
Your calculation can now be called by many interfaces. The browser's DOM, or Document Object Model, represents a page as objects. HTML describes the page structure; JavaScript can find an element and react to an event.
This optional bonus introduces one button only. Complex rendering, forms, storage and real APIs belong to the future web course. You can complete the programming projects without using any DOM feature.
One local example
Save the following as demo.html in a practice folder and open it in a browser:
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Quote preview</title></head>
<body>
<button id="quote-button" type="button">Show example quote</button>
<p id="quote-output" aria-live="polite"></p>
<script>
function calculateSubtotal(price, quantity) {
return price * quantity;
}
const button = document.getElementById("quote-button");
const output = document.getElementById("quote-output");
button.addEventListener("click", () => {
output.textContent = `Subtotal: ${calculateSubtotal(20, 3)} units`;
});
</script>
</body>
</html>
The script appears after the elements, so they exist when it looks them up. GetElementById finds the chosen element. AddEventListener registers a callback for a click; it does not execute that callback during registration. TextContent inserts text. The calculation itself does not depend on the DOM.
The visible result after clicking is Subtotal: 60 units. Before clicking, the output paragraph is empty. The button supports ordinary keyboard activation, and aria-live lets assistive technology announce the updated text.
Guided comparison
Moving arithmetic directly into a complex event handler would mix interface work and business rules. Keep the calculation callable without a browser so its existing tests remain useful.
Independent exercise
Change the example quantity to four. Predict the output, check the calculation separately, then activate the button. Which layer changed? What remains untested by merely clicking once?
Correction
The displayed subtotal becomes 80. The example input changed; the multiplication rule did not. One click does not verify invalid-input handling or other quantities. Domain tests and interface checks answer different questions.
Course conclusion
You have practiced understanding a rule, selecting data, writing functions, handling failures, testing examples and revising decisions. The next course can connect those skills to real web interfaces through DOM, events, forms and APIs. It is a future learning path, not a prerequisite for completing this one.