JavaScript 30 — Day 5 — Flex Panel Gallery

A panel gallery that expands each section on click.

This was a fun one that didn’t require a lot of JavaScript. There was a little extra CSS needed to make it flex in the right directions and grow correctly when activated. JS wise, it was really just adding a ‘click’ and ‘transitionend’ event listeners to the panels.

I think this probably would have served better as a CSS exercise with the JavaScript preloaded.

If you want to check out my progress or the files, you can check out this challenge’s repo.

No real new material for me but a great review and practice on a few concepts.

Ah, that’s refreshing

This was a good, quick refresher exercise on:

• Using child selectors like (:first-child), (:last-child), etc.
• Flexbox as well as the flex shorthand (grow, shrink, basis) which I don’t use nearly as much as I should.
• Toggling classes on elements
• Transitionend event listeners, which can be used to listen for any or a specific transition ending.
• Transitions in general. While the starter files have them preloaded, you can play around with them to get a good review on how they work.