Cute little JavaScript tricks

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.

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

Also, remember you’re just toggling a class attribute. So, you can use any positioning and media queries and transitions (animations) as you like – just like always. Don’t get it twisted.

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.

This one uses a data-attribute to make it clear and simple instead of adding and removing classes.

This one uses the ‘input’ event to live update based on the user-entered range value. You could update any value but in this case, we are updating a custom property value.