Apply for the next session

This is in the works! Would you like to help flesh it out? Let's do it!

You can’t just “look” at these CodePen embeds. You have to actually click “Edit on CodePen” to open them up and have room to see everything and to change the browser size – and all that jazz. Really dig into these – one at a time – until you understand them deeply.

Toggle a class on click (or tap)

You can get an element from the DOM with element.querySelector('selector')

You can listen for events such as ‘click’ with event.addEventListener('event', function)

You can toggle a class with element.classList.toggle('className')

We dare you to give it a serious try – before you look at the example.

This is how real programmers work. You have a set of tools – and a goal – and then you have to figure out how to use them. There is no manual. Just a description of how each tool works.


Toggle a menu

A different menu interface for small screens seems to be the norm lately.

But should they be? Death by HamburgerObvious Always Wins

Here is a small-screen menu pattern that involves no JavaScript.

BUT… you probably won’t listen.

Here’s one way to think about it that introduces the idea of “event delegation.”


Switch body class with a checkbox

Add and remove body class with checkbox and JS. This is a naive implementation – but it’s probably what you’d try first. Get a good handle on this.


Switching themes with data-attributes



Change color with input slider


Apply for the next session