These demos follow Wes Bos's JavaScript30 challenges that use Javascript (with ES6 features) without any libraries, frameworks, or external scripts of any kind. Below are what I found interesting as well any modifications I made to the final result.
-
Drum Kit
Highlights: HTML5 Audio, CSS transition event listeners
Tweaks: Instead of connecting the key to audio by keycode, bind the two by sound type. If the key were to ever change, it would be at one spot. -
JS+CSS Clock
Highlights: CSS transitions
Tweaks: Clock styling, abstracting degree functions, detect/disable transition during 59->0 -
CSS Variables
Highlights: Getting/setting CSS variables with values, HTML5 inputs (range, color), element.dataset, scoping variables to elements -
ARRAY Cardio
Highlights: Array filter(), map(), sort(), reduce(), console.table(), querySelector works on any DOM element (not just document), destructed array assignments -
FLEX Panels
Highlights: Nested Flexbox items, transition effects -
AJAX Typeahead
Highlights: fetch API, promises -
Array Cardio Day 2
Highlights: Array methods: .some(), .find(), .findIndex() -
HTML5 Canvas
Highlights: destructuring arrays, global composite operation (like Photoshop blend modes) -
Dev Tools Tricks
Highlights: break on node modifications, styling console output, console.assert, console.group()/groupEnd()/groupCollapsed(), console.count(), console.time()/timeEnd() -
Multiple Checkbox Selection
Highlights: selecting range of elements using shift key -
HTML5 Video Player
Highlights: video event listeners
Tweaks: Added fullscreen capability -
Key Code Detection
Highlights: Detecting a key sequence
Tweaks: Added more rainbows and detect Konami code (with arrow keys) instead of just single characters