Bite-sized JavaScript creations to review fundamentals.
Play musical sounds using your keyboard.
Key concepts: keydown & transitionend events, audio elements, data attributes, flexbox
A minimalistic clock.
Key concepts: SVG transforms, SVG opacity, time, setInterval
Adjust CSS variables using JavaScript.
Key concepts: CSS variables, slider, color picker, filter: blur
Utilize JavaScript array functions to map, filter, sort and reduce.
Key concepts: map, filter, sort, reduce, highlight.js, console.table
Enhance a flexbox gallery with text transitions and transformations.
Key concepts: transform: translateY, flexbox
Fetch remote data and return search results dynamically, as the user enters a query.
Key concepts: fetch, transform: perspective, new RegExp, creative uses of map and replace to create html.
Drawing on an HTML 5 canvas using the mouse.
Key concepts: canvas, programmatic hue, keyboard events.
Hold shift to check a range of checkboxes.
Key concepts: e.shiftKey, checkboxes.
Creating a basic counter web component using vanilla JS.
Key concepts: Classes that extend HTMLElement, shadowDOM, lifecycle methods, properties (in JS) vs. attributes (in HTML).
* Inspired by Wes Bos' #Javascript30 course.