Skip to main content

JavaScript Interactivity

Pure Vanilla JavaScript — No Frameworks, No Libraries

10 Interactive Demos

Interactive Demos

Each demo demonstrates a specific JavaScript concept. All built with event delegation, DOM manipulation, and browser APIs.

03

Real-Time Validation

Regex + DOM Injection + Blur Events

Validates on blur, clears on valid input. Error messages injected directly into the DOM.

04

Animated Tabs

Active State + Content Switching + CSS Transitions

Sliding underline indicator with smooth content crossfade between panels.

This tab component demonstrates active state management and content switching using pure JavaScript. No hidden iframes or display-toggle tricks.

Animated underline indicator slides between tabs. Content fades in with a subtle translateY animation. Fully keyboard navigable.

Built with: event listeners on buttons, classList toggling, and CSS transition properties. Zero external dependencies.

05

Accordion / FAQ

max-height Transition + Single Open Pattern

Smooth expand/collapse via max-height. Only one panel open at a time. Chevron rotation on toggle.

Event delegation is a technique where a single event listener is attached to a parent element instead of individual child elements. Events bubble up to the parent, where you check the target to determine which child triggered it.
This project demonstrates raw DOM manipulation skills. Understanding the fundamentals (createElement, classList, addEventListener, IntersectionObserver) is essential before abstracting them away with React or Vue.
IntersectionObserver watches when elements enter or exit the viewport. It accepts a callback that fires with entries describing each observed element's intersection ratio, enabling lazy loading and scroll-triggered animations.
06

Theme Toggle

localStorage + CSS Custom Properties

Toggle persists preference in localStorage. Demonstrates client-side state persistence across sessions.

Dark Mode
07

Toast Notifications

Dynamic DOM Creation + Auto-Dismiss + Animation

Stacking toasts that slide in from the right and auto-dismiss after 3 seconds. Four severity types.

08

Scroll Progress Bar

Scroll Event + DOM Width Calculation

The gradient bar at the very top of the page fills as you scroll. Tracks scroll position relative to total document height.

Look at the top of the page as you scroll.

09

Drag and Drop Sortable

HTML5 Drag API + getBoundingClientRect

Reorder items by dragging. Uses dragover with position calculation to determine insertion point.

  • Learn JavaScript fundamentals
  • Master DOM manipulation
  • Understand event delegation
  • Build real projects
  • Deploy to production
10

Infinite Scroll

IntersectionObserver + Dynamic Content Loading

Loads more items as you scroll to the bottom of the container. Simulates paginated API loading.

Loading more items...