Flex Panels Project 🎬

This project was built by following Wes Bos's JavaScript 30 course. It is an interactive image gallery using CSS Flexbox, where clicking on an image panel expands it smoothly.

Code Sample

const panels = document.querySelectorAll('.panel');

function toggleOpen() {
  this.classList.toggle('open');
}

function toggleActive(e) {
  if (e.propertyName.includes('flex')) {
    this.classList.toggle('open-active');
  }
}

panels.forEach(panel => panel.addEventListener('click', toggleOpen));
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

What I Learned

• Using CSS Flexbox for responsive layouts
• Adding and removing classes with JavaScript
• Listening to transitionend events for smooth animations