Group session July 1st

Introduction

You don’t need to deeply know a language to use some tricks. Especially when we’re talking about JavaScript. That’s kinda what it was made for.

Give these a gander. We’ll talk about how they work in more detail going forward.

Toggle a class on click (or tap)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

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

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

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

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.

Switch body class with a checkbox

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on 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.

Switching themes with data-attributes

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

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

Change color with input slider

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

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.

Got any other low hanging fruit ideas?

We’re just looking to collect some easy wins here. Have something you’d like us to add? Scroll events? Touch events?

Group session July 1st