This assignment was to code out a few codepens, focusing on common elements that we can implement in our projects.

Modals are super useful. When used as bait and switch, they’re awful, annoying, and disruptive to the user’s experience. But when they are triggered, they do an awesome job of emphasizing content and de-emphasizing everything else.

See the Pen jQuery Modal by Amalie Barras (@amaliebarras) on CodePen.

My biggest challenge was to make the modally-ness of this to come across. It actually just looks like an opaque div, but really it is a 40% transparent div, it’s just not covering up any noisy content.

Dropdowns seemed like another great choice because they can be used for things from sub-navigation, to creating hierarchy by de-emphasizing the hidden content.

See the Pen jQuery dropdown by Amalie Barras (@amaliebarras) on CodePen.

The biggest challenge was decide how fast to make the dropdown go. I hate slow animations - nobody has time for that. But also, if timed just right, they can help the user pace their browsing and scan more carefully.


I also really like tooltips because they are instantaneous learn-more. And hovering is so low-effort.

See the Pen jQuery tooltip by Amalie Barras (@amaliebarras) on CodePen.


This was my favorite because it felt the most relevant. Filtering is my favorite thing in the world. It’s how I surf, shop, share, all of those millenial behaviors I exhibit.

See the Pen jQuery filter by Amalie Barras (@amaliebarras) on CodePen.

The biggest challenge was the “show all” button. I was trying to use .display, I thought I’d remembered that for something, but it wasn’t working because the proper method is .show. Eventually I got it to work and now you can play with these filters endlessly.