Utilities & Scripts

A download button that fetches the file as a Blob via the Fetch API and triggers a native browser download. Cycles through idle, downloading, ready, and fallback states with CSS-animated icon transitions. Falls back to a direct link if CORS blocks the fetch.

Reads opening and closing times from data attributes on each day row, determines the current day and time in a configurable IANA timezone, and sets open/closed state attributes on both the row and the container. Supports overnight windows, closed days, duplicate detection, and auto-refresh every minute.

A set of 9 animated social share buttons (clipboard, mail, Facebook, Pinterest, WhatsApp, Reddit, LinkedIn, X, Telegram) driven by data attributes. Hovering one button scales down siblings using CSS :has(). Each platform opens a pre-built share URL; clipboard uses the Async Clipboard API.

A data-attribute-driven countdown timer with configurable timezone offset, per-unit display, four label formats (plain, short, long, abbr), and automatic status states (active, finished, error). Seconds trigger per-second ticking; omitting them saves to a once-per-minute refresh cycle.

A fixed back-to-top button that appears after the user scrolls a configurable distance using GSAP ScrollTrigger, animating in with a rotate and scale entrance. Includes a duplicate arrow for a CSS overflow-clip hover effect. Supports native scrollTo, Lenis, and Locomotive Scroll.

Lazy-loads Lottie JSON animations with GSAP ScrollTrigger — each animation initialises only when half a viewport away from entering, plays while visible, and pauses on leave. Respects prefers-reduced-motion by rendering a single static frame instead of playing.

A collection of vanilla JS and jQuery toggle patterns driven entirely by data attributes. Covers toggle (flip between two states), one-action set, keyboard (Escape key), and multi-component variable-name variants — no classes required.

Counts the number of data-count-item elements inside a named data-count-group and writes the total into any matching data-count-display element. Supports multiple independent counters on the same page via unique name identifiers.

A theme toggle button that flips a data-theme-status attribute between "light" and "dark", persisting the choice in a JS-Cookie. Includes a Shift+T keyboard shortcut, CSS icon swap animation, and a localStorage alternative variant.

Watches the scroll position against a navbar-height offset and updates data-theme-nav and data-bg-nav on the body as the user scrolls through sections tagged with data-theme-section and data-bg-section. Drive nav colour and background with pure CSS attribute selectors.

Tracks scroll direction and distance using two configurable thresholds, updating data-scrolling-direction ("up" / "down") and data-scrolling-started ("true" / "false") on the body. Use CSS attribute selectors to hide the navbar on scroll-down, shrink it after the threshold, and reveal it again on scroll-up.

Wires data-anchor-target links to Lenis's scrollTo method with a custom quartic ease and configurable duration and offset. Clicking a link smoothly scrolls to the matching section id without any native anchor jump.

The minimal Lenis initialisation snippet with autoRaf for standalone use, plus the GSAP ScrollTrigger integration pattern using lenis.on('scroll') and gsap.ticker. Covers nested scroll prevention, stop/start API, and a link to the full documentation.

Displays a live clock — hours, minutes, seconds, and timezone abbreviation — using Intl.DateTimeFormat with IANA timezone support. The timezone can be set per element via data-current-time or falls back to a configurable default. Updates every second.

Shows a "New" badge only when the published date in data-expiring-date is within the last 7 days. The badge hides itself automatically once the window expires, with no server-side logic required. Format: D/M/YYYY.

A pure-CSS fluid scaling system using CSS custom properties and clamp(). Sets a --size-font variable derived from the viewport width and design container size, applied to the body font-size so all em-based values scale proportionally across four breakpoints.

Writes the current year into every element with the data-current-year attribute using Date.getFullYear(). Use a placeholder like 20?? so the intended behaviour is clear before JavaScript runs.