CSS Variables Project 🎨

This project was built by following Wes Bos's JavaScript 30 course. It demonstrates how to interactively update CSS variables using JavaScript to change styles in real-time.

Code Sample

const inputs = document.querySelectorAll('.controls input');

function handleUpdate() {
  const suffix = this.dataset.sizing || '';
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

What I Learned

• Using data-* attributes to store custom information
• Selecting multiple DOM elements efficiently
• Updating CSS variables dynamically from JavaScript
• Adding event listeners for both change and mousemove events