Cute little JavaScript tricks

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.

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

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

But should they be? Death by Hamburger,  Obvious 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

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

4

CodePen

CodePen