How do you build a reactive order form (like a pizza configurator)?

Wire each control's input/change event to one shared function that recomputes the total from the current field values and writes it to the page.

<select id="size">
    <option value="10">Small ($10)</option>
    <option value="15">Medium ($15)</option>
    <option value="20">Large ($20)</option>
</select>
<input type="checkbox" id="cheese" value="2"> Extra cheese ($2)
<input type="number" id="quantity" value="1" min="1">
<p>Total: $<span id="total">10</span></p>

const size = document.querySelector("#size");
const cheese = document.querySelector("#cheese");
const quantity = document.querySelector("#quantity");
const total = document.querySelector("#total");

function updateTotal() {
    let price = parseInt(size.value);
    if (cheese.checked) price += 2;
    price *= parseInt(quantity.value);
    total.textContent = price;
}

// Attach to all inputs
size.addEventListener("change", updateTotal);
cheese.addEventListener("change", updateTotal);
quantity.addEventListener("input", updateTotal);

Key pattern: One calculation function called by multiple event listeners.