Awesome

JavaScript30

See all of the exercises at https://JavaScript30.com

Day 1 - Drum Kit: data-key tags, .wav files, playing audio, flexbox, transforms

Day 2 - Clock: transforms, dates, intervals

Day 3 - Variables: range inputs, data tags, css variables, setProperty

Day 4 - Array Cardio: filter, map, sort, reduce, Array.from, console.table

Day 5 - Flex Panel Gallery: cubic-bezier transitions, flexbox, translations, toggle classes

Day 6 - Type Ahead: auto-complete, RegExp, match, string replace

Day 7 - Array Cardio Pt. 2: some, every, find, findIndex, splice

Day 8 - HTML5 Canvas: canvas, 2d, drawing, offsetX, hsl

Day 9 - Dev Tools: console.warn, console.error, console.info, console.assert, classList.contains, console.dir, console.group, console.const, console.time

Day 10 - Checkboxes: querySelector on input type, select multiple checkboxes with shift

Day 11 - Video Player: video, range inputs, video skips, video volue, video play back rate, progress bar w/ flexBasis, cursor

Day 12 - Key Sequence Detection: secret key codes, string from char code

Day 13 - Slide in on Scroll: debounce, timeouts, image heights, window.scrollY, classList.add, classList.remove, image offSet, translate transforms

Day 14 - Reference vs Copying: Object.assign, spread operator, JSON.parse, JSON.stringify

Day 15 - LocalStorage: localStorage, innerHTML, e.target.dataset, reset form, input labels

Day 16 - Mouse Move Shadow: offsets, Math.round, text shadows

Day 17 - Sort: text strip, text replace, sort

Day 18 - Times with Reduce: split, Math.floor

Day 19 - Webcam: canvas, video, audio, range inputs, navigator.mediaDevices, download photo, video effects, pixels, browser-sync

Day 20 - Speech Detection: window.SpeechRecognition, browser-sync

Day 21 - Geolocation: browser-sync, navigator.geolocation, rotate transform

Day 22 - Link Highlighter: getBoundingClientRect, scrollY, translate transform

Day 23 - Speech Synthesis: SpeechSynthesisUtterance, options

Day 24 - Sticky Nav: fixed nav, offSet, scrollY, scale transform

Day 25 - Events: capture, propagation, once, bubble

Day 26 - Stripe Nav: transition opacity, arrow, getBoundingClientRect, coords

Day 27 - Click and Drag: pageX, offsetLeft, scrollLeft, cursor, calc height, transform scaleX rotateY

Day 28 - Video Speed Controller: video, toFixed(2), pageY, offsetTop

Day 29 - Countdown Timer: data prop, setInterval, clearInterval, dates, textContent, document.title, timestamps, parseInt, form reset

Day 30 - Whack A Mole: svg, scores, play game, Math.random, setTimeout

Huge thank you to @WesBos!