Give these a gander. We’ll talk about how they work in more detail going forward.
Toggle a class on click (or tap)
You can get an element from the DOM with
You can listen for events such as ‘click’ with
You can toggle a class with
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.
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
This one uses a data-attribute to make it clear and simple instead of adding and removing classes.
Change color with input slider
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?