JavaScript examples

Send a request, await the response, and handle status, timeout, and cancellation behaviour.

• Cancel an in-flight fetch with AbortController

  Abort a pending request when the input changes or the view unmounts, so a slow response cannot overwrite a newer one or update a dead component.

  JavaScriptadvanced

• Fetch JSON and separate a failed request from a failed status

  Await a JSON response, then branch on transport failure, HTTP status, and malformed body separately instead of catching everything together.

  JavaScriptbeginner

Attach, configure, delegate, and remove browser event listeners correctly.

• Add an event listener with the options you actually need

  Pass an options object instead of a bare boolean to addEventListener: once, capture, and passive tell the browser how the listener should behave and when it should stop mattering.

  JavaScriptbeginner

• Debounce a scroll handler without dropping the last call

  Wrap the scroll handler in a trailing-edge timer so a burst of scroll events collapses into exactly one call that still runs for the final position instead of dropping it.

  JavaScriptintermediate

• Delegate events for a list that changes after load

  Bind one click listener to a stable list container and route events with closest, so rows added or removed later need no extra wiring and cleanup never falls behind the markup.

  JavaScriptintermediate

Declare, derive, update, and share component state inside the React render model.

• Derive a running total during render instead of storing it

  Compute a total from the items you already hold in state, so a quantity change cannot leave the stored sum out of step with the list.

  JavaScriptintermediateReact

React to intersection, viewport entry, or document visibility changes.

• Lazy-load images with IntersectionObserver

  Swap a placeholder image for the real file only when the browser is about to show it, and see where the loading attribute the platform already ships is the better answer.

  JavaScriptintermediate

• Reveal an element the first time it enters the viewport

  Play a reveal animation the first time an element scrolls into view, then drop its observer so the effect cannot replay when the reader scrolls back up the page.

  JavaScriptbeginner

Reshape collections and records in memory into the structure the next step needs.

• Group array items by a computed key

  Build a plain object whose keys come from each record, so lookups stop scanning the list and grouping stops needing a second pass.

  JavaScriptbeginner

Decide whether entered data is acceptable and report the result to the person filling the form.

• Announce field errors without moving the caret

  Report validation failures beside the field they describe, announce them politely, and leave focus where the reader typed.

  JavaScriptintermediate

• Validate a controlled React form on submit

  Keep field values in state, run one rule pass on submit, and render messages beside the fields they describe without interrupting typing.

  JavaScriptintermediateReact

• Validate form input before the browser submits it

  Add cross-field rules to a plain HTML form inside its submit handler, report them through the browser's own validity API, and keep the built-in messages working.

  JavaScriptbeginner