Build it

Build a store stock lookup page in plain HTML and JavaScript: it loads a JSON file, searches it, uses one delegated listener for every row button, calls a second "DC stock" API on another origin, and shows every error state. Then break CORS on purpose and fix it. The delegation logic from step 4 is also a Practice exercise below, which you can solve and check right in your browser.

1. Create the files and the data

   The package.json is only there so the small Node API in step 6 can use import. Create the files below. stock.json stands in for an API response; prices are integer cents, so no rounding errors creep in (Working with data).

   TerminalCopy

   mkdir stock-lookup
   cd stock-lookup
   npm init -y
   npm pkg set type=module
   mkdir public
   code .

   public/index.htmlpublic/stock.jsonpublic/style.css

   HTMLCopy

   <!doctype html>
   <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Store stock lookup</title>
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <h1>Stock at <span id="site">...</span></h1>
     <form id="search">
       <label for="q">Article code or name</label>
       <input id="q" name="q" autocomplete="off" placeholder="A1001 or rice">
       <button type="submit">Search</button>
     </form>
     <p id="status" role="status">Loading stock...</p>
     <table>
       <thead><tr><th>Code</th><th>Article</th><th>Qty</th><th>Price</th><th></th></tr></thead>
       <tbody id="rows"></tbody>
     </table>
     <script type="module" src="app.js"></script>
   </body>
   </html>

2. Render rows safely, in one DOM change

   Every value goes in as text. append turns strings into text nodes, never HTML. The whole table body is replaced in one call, so the browser does one layout.

   JavaScriptCopy

   // render.js: build table rows from data, safely
   const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
   
   function cell(...children) {
     const td = document.createElement('td');
     td.append(...children);          // strings become text nodes, never HTML
     return td;
   }
   
   function button(label, action) {
     const b = document.createElement('button');
     b.textContent = label;
     b.dataset.action = action;       // shows up as data-action="dc" in the HTML
     return b;
   }
   
   export function render(tbody, list) {
     const rows = list.map((item) => {
       const tr = document.createElement('tr');
       tr.dataset.code = item.articleCode;
       tr.classList.toggle('out', item.qty === 0);     // red when out of stock
       tr.append(
         cell(item.articleCode), cell(item.name), cell(String(item.qty)),
         cell(usd.format(item.priceCents / 100)),        // cents to dollars only for display
         cell(button('DC stock', 'dc'), ' ', button('Request 10', 'request')),
       );
       return tr;
     });
     tbody.replaceChildren(...rows);   // one DOM change for the whole table
   }

3. Load, search and handle every state

   The form's submit handler covers both the button and Enter. The last search is kept in localStorage, so it survives a reload. Each failure gets a message a cashier understands.

   JavaScriptCopy

   // app.js: load the stock file, search it, wire up the events
   import { render } from './render.js';
   import { handleRowClick } from './actions.js';
   
   const tbody = document.querySelector('#rows');
   const status = document.querySelector('#status');
   const input = document.querySelector('#q');
   let items = [];
   
   function showStatus(text, isError = false) {
     status.textContent = text;
     status.classList.toggle('error', isError);
   }
   
   function search(event) {
     event?.preventDefault();                 // stop the form from reloading the page
     const q = input.value.trim().toLowerCase();
     localStorage.setItem('lastQuery', q);    // remembered on this device, for this site
     const found = items.filter((i) => `${i.articleCode} ${i.name}`.toLowerCase().includes(q));
     render(tbody, found);
     showStatus(found.length ? `${found.length} articles` : 'No article matches.');
   }
   
   async function loadStock() {
     try {
       const res = await fetch('stock.json', { signal: AbortSignal.timeout(8000) });
       if (!res.ok) throw new Error(`Could not load stock (HTTP ${res.status})`);
       const data = await res.json();
       document.querySelector('#site').textContent = data.siteId;
       items = data.items;
       input.value = localStorage.getItem('lastQuery') ?? '';
       search();
     } catch (err) {
       const message =
         err.name === 'TimeoutError' ? 'The server is too slow. Try again.' :
         err instanceof TypeError ? 'No connection. Check the store internet.' :  // fetch network error
         err.message;
       showStatus(message, true);
     }
   }
   
   document.querySelector('#search').addEventListener('submit', search);
   tbody.addEventListener('click', handleRowClick);   // one listener for every button
   loadStock();

4. Handle every row's buttons with one listener

   JavaScriptCopy

   // actions.js: one click handler for every button in the table (event delegation)
   const API = 'http://localhost:4000';     // another origin: port 4000, not 5173
   
   export async function handleRowClick(event) {
     const button = event.target.closest('button[data-action]');
     if (!button) return;                   // the click was on a row, not a button
     const code = button.closest('tr').dataset.code;
     const cell = button.parentElement;
     button.disabled = true;
     try {
       let res;
       if (button.dataset.action === 'dc') {
         res = await fetch(`${API}/dc-stock/${code}`);          // a simple GET: no preflight
       } else {
         res = await fetch(`${API}/requests`, {
           method: 'POST',
           headers: { 'content-type': 'application/json' },     // JSON body: preflight first
           body: JSON.stringify({ siteId: 'D027', articleCode: code, qty: 10 }),
         });
       }
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const data = await res.json();
       cell.textContent = button.dataset.action === 'dc' ? `${data.dcQty} at DC` : `Sent ${data.id}`;
     } catch (err) {
       console.error(err);                  // a CORS block arrives here as a TypeError
       cell.textContent = `Failed: ${err.message}`;
     }
   }

5. Serve the page over HTTP

   ES modules do not load from a file:// page (Chrome blocks them with a CORS error), so serve the folder. serve is a small static file server; npx downloads and runs it.

   TerminalCopy

   npx serve public -l 5173

   OutputCopy

      ┌───────────────────────────────────────┐
      │                                       │
      │   Serving!                            │
      │                                       │
      │   - Local:    http://0.0.0.0:5173     │
      │   - Network:  http://192.0.2.2:5173   │
      │                                       │
      └───────────────────────────────────────┘

   Open http://localhost:5173. You see 4 articles, soybean oil in red. Type oil and press Enter: one row, and the page does not reload. Reload the page: the search box still says oil. To see the error states, rename stock.json (you get "Could not load stock (HTTP 404)"), or open DevTools with F12 (Cmd+Option+I on macOS), go to the Network panel, set throttling to "Offline" and reload ("No connection. Check the store internet.").

6. Add a DC API on another origin, without CORS first

   Create dc-api.js next to the public folder (not inside it). It logs every request, so you can see what the browser really sends.

   JavaScriptCopy

   // dc-api.js: a tiny "DC stock" API on another origin.  node dc-api.js [--no-cors]
   import { createServer } from 'node:http';
   
   const PAGE_ORIGIN = 'http://localhost:5173';
   const CORS = !process.argv.includes('--no-cors');
   const dcStock = { A1001: 1200, A2040: 0, A3112: 340, A4410: 95 };
   
   createServer((req, res) => {
     console.log(req.method, req.url, 'Origin:', req.headers.origin ?? '-');
     if (CORS && req.headers.origin === PAGE_ORIGIN) {
       res.setHeader('Access-Control-Allow-Origin', PAGE_ORIGIN);   // "this page may read me"
       res.setHeader('Vary', 'Origin');                              // caches: answer depends on Origin
     }
     if (CORS && req.method === 'OPTIONS') {                         // answer the preflight
       res.writeHead(204, {
         'Access-Control-Allow-Methods': 'GET, POST',
         'Access-Control-Allow-Headers': 'content-type',
         'Access-Control-Max-Age': '600',      // the browser may reuse this answer for 10 min
       });
       return res.end();
     }
     const send = (status, body) => {
       res.writeHead(status, { 'content-type': 'application/json' });
       res.end(JSON.stringify(body));
     };
     const [, route, code] = req.url.split('/');
     if (req.method === 'GET' && route === 'dc-stock' && code in dcStock) {
       return send(200, { articleCode: code, dcQty: dcStock[code] });
     }
     if (req.method === 'POST' && route === 'requests') {
       let body = '';
       req.on('data', (chunk) => (body += chunk));
       req.on('end', () => send(201, { id: 'REQ-1042', ...JSON.parse(body) }));
       return;
     }
     send(404, { error: 'not found' });
   }).listen(4000, () => console.log(`DC API on http://localhost:4000, CORS ${CORS ? 'on' : 'off'}`));

   In a second terminal, start it with CORS off. Click "DC stock" on lentils, then "Request 10" on rice.

   TerminalCopy

   node dc-api.js --no-cors

   OutputCopy

   DC API on http://localhost:4000, CORS off
   GET /dc-stock/A3112 Origin: http://localhost:5173
   OPTIONS /requests Origin: http://localhost:5173

   The browser Console shows:

   OutputCopy

   Access to fetch at 'http://localhost:4000/dc-stock/A3112' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
   Failed to load resource: net::ERR_FAILED
   TypeError: Failed to fetch
       at HTMLTableSectionElement.handleRowClick (http://localhost:5173/actions.js:13:19)
   Access to fetch at 'http://localhost:4000/requests' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

   Read the server log carefully. The GET reached the server and ran; the browser only hid the answer. For the JSON POST, only the OPTIONS preflight arrived, and because it was not allowed, the real POST was never sent. In your code, both arrive as a TypeError: Failed to fetch with no detail, by design.

7. Turn CORS on and check the preflight

   Stop the API with Ctrl+C, start it with node dc-api.js, and click the same two buttons. The cells now show "340 at DC" and "Sent REQ-1042":

   OutputCopy

   DC API on http://localhost:4000, CORS on
   GET /dc-stock/A3112 Origin: http://localhost:5173
   OPTIONS /requests Origin: http://localhost:5173
   POST /requests Origin: http://localhost:5173

   You can ask the preflight question yourself with curl (bash; in PowerShell use curl.exe, and put the command on one line):

   TerminalCopy

   curl -i -X OPTIONS http://localhost:4000/requests \
     -H "Origin: http://localhost:5173" \
     -H "Access-Control-Request-Method: POST" \
     -H "Access-Control-Request-Headers: content-type"

   OutputCopy

   HTTP/1.1 204 No Content
   Access-Control-Allow-Origin: http://localhost:5173
   Vary: Origin
   Access-Control-Allow-Methods: GET, POST
   Access-Control-Allow-Headers: content-type
   Access-Control-Max-Age: 600
   Date: Wed, 07 Oct 2026 05:42:10 GMT

8. Feel the cost of forced layouts

   Paste this into the DevTools Console on any page. Both functions add 2,000 rows; the first reads offsetHeight after each one.

   JavaScriptCopy

   // thrash.js: paste into the DevTools Console on any page
   const items = Array.from({ length: 2000 }, (_, i) => ({ articleCode: `A${1000 + i}`, qty: i % 50 }));
   
   function slow() {
     const tbody = document.createElement('tbody');
     document.body.append(tbody);
     for (const item of items) {
       const tr = document.createElement('tr');
       tr.textContent = `${item.articleCode} ${item.qty}`;
       tbody.append(tr);                       // write
       if (tbody.offsetHeight > 1e9) break;    // read: forces a layout every time
     }
     tbody.remove();
   }
   
   function fast() {
     const tbody = document.createElement('tbody');
     document.body.append(tbody);
     tbody.replaceChildren(...items.map((item) => {
       const tr = document.createElement('tr');
       tr.textContent = `${item.articleCode} ${item.qty}`;
       return tr;
     }));                                      // all writes at once
     console.log('height', tbody.offsetHeight); // one read, one layout
     tbody.remove();
   }
   
   for (const fn of [slow, fast]) {
     const t0 = performance.now();
     fn();
     console.log(fn.name, Math.round(performance.now() - t0), 'ms');
   }

   OutputCopy

   slow 2569 ms
   height 36000
   fast 26 ms

   Your numbers will differ by machine, but the gap is usually a factor of 50 to 100. Stop both servers with Ctrl+C when you are done.