JavaScript Tricks

Master modern JavaScript techniques, DOM manipulation, and interactive features that will make your websites come alive.

Interactive JavaScript Demos

Interactive Counter

let count = 0;
const counter = document.getElementById('counter');

function updateCounter() {
  counter.textContent = count;
  counter.style.transform = 'scale(1.1)';
  setTimeout(() => {
    counter.style.transform = 'scale(1)';
  }, 150);
}

document.getElementById('increment')
  .addEventListener('click', () => {
    count++;
    updateCounter();
  });

Dynamic Color Picker

#667eea

const colorPicker = document.getElementById('colorPicker');
const colorPreview = document.getElementById('colorPreview');
const colorValue = document.getElementById('colorValue');

colorPicker.addEventListener('input', (e) => {
  const color = e.target.value;
  colorPreview.style.backgroundColor = color;
  colorValue.textContent = color;
});

Typing Animation

function typeText(element, text, speed = 100) {
  let i = 0;
  element.textContent = '';
  
  const timer = setInterval(() => {
    element.textContent += text.charAt(i);
    i++;
    
    if (i > text.length) {
      clearInterval(timer);
    }
  }, speed);
}

Drag & Drop

Drag Me

Drop Zone

const draggable = document.getElementById('draggable');
const dropZone = document.getElementById('dropZone');

draggable.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', e.target.id);
});

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');
  dropZone.appendChild(document.getElementById(data));
});

Advanced JavaScript Techniques

Async/Await Patterns

Modern asynchronous JavaScript patterns for handling promises elegantly.

async function fetchUserData(userId) {
  try {
    const response = await fetch('/api/users/' + userId);
    const user = await response.json();
    
    const posts = await fetch('/api/users/' + userId + '/posts');
    const userPosts = await posts.json();
    
    return { user, posts: userPosts };
  } catch (error) {
    console.error('Error fetching user data:', error);
    throw error;
  }
}

Event Delegation

Efficient event handling for dynamic content using event delegation.

document.addEventListener('click', (e) => {
  if (e.target.matches('.delete-btn')) {
    const item = e.target.closest('.item');
    item.remove();
  }
  
  if (e.target.matches('.toggle-btn')) {
    const content = e.target.nextElementSibling;
    content.classList.toggle('hidden');
  }
});

Intersection Observer

Efficient scroll-based animations and lazy loading with Intersection Observer.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-in');
      observer.unobserve(entry.target);
    }
  });
});

document.querySelectorAll('.animate-on-scroll')
  .forEach(el => observer.observe(el));

Web Workers

Offload heavy computations to background threads for better performance.

// Main thread
const worker = new Worker('worker.js');
worker.postMessage({ data: largeDataSet });

worker.onmessage = (e) => {
  const result = e.data;
  updateUI(result);
};

// worker.js
self.onmessage = (e) => {
  const data = e.data.data;
  const result = processLargeData(data);
  self.postMessage(result);
};

Performance Tips

⚡

Debounce & Throttle

Use debounce for search inputs and throttle for scroll events to improve performance.

🎯

Event Delegation

Attach event listeners to parent elements instead of individual child elements.

🔄

Lazy Loading

Load images and content only when they're about to enter the viewport.

📱

Mobile Optimization

Use touch events and optimize for mobile performance and battery life.

🎨

Memory Management

Clean up event listeners and remove references to prevent memory leaks.

⏱️

RequestAnimationFrame

Use requestAnimationFrame for smooth animations instead of setTimeout.