DOM practice
Cove Logistics needs a handoff screen that responds to real interactions. The records and labels are fresh, but every required technique comes from this unit. Create nodes safely, keep classes and properties aligned with state, and use delegation when controls belong to a changing list. Form tasks include blank text, zero quantities, and independent identifiers behind repeated names. Trace one interaction from target to handler to output before writing the code. Then try it twice. A listener that handles the first click but reuses stale state on the next click still leaves the handoff screen wrong.
<main><h1>Contact</h1><p id="name"></p></main>
body{font:16px/1.5 system-ui,sans-serif;color:#17243b;background:#fff;margin:20px}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer}main{max-width:100%}[hidden]{display:none!important}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.card{border:1px solid #94a3b8;padding:12px;min-width:0;overflow-wrap:anywhere}label{display:block}input,select{box-sizing:border-box;max-width:100%}ul{padding-left:24px}@media(max-width:600px){.cards{grid-template-columns:1fr}}
document.querySelector('#name').textContent=fixture.name;
Read the markup and styles together, then trace the resulting control or layout.