Apply for the next session

This is in the works! Right now, it's just holding place to help us game out the Study Hall system. : )

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.

CodePen

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.”

CodePen

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.

CodePen

Switching themes with data-attributes

4

CodePen

Change color with input slider

CodePen

Apply for the next session