My take on the challenge + extra features added to each app
Each folder contains:
- My solution with added functionality (filename.html)
- Original solution (filename-ORIGINAL.html)
- Starter file (filename-START.html)
Grab the course at https://JavaScript30.com
01 - JS Drum Kit (view)
- Drums respond to click events
- Responsive; mobile first
02 - JS and CSS Clock (view)
- Clock hands have various length
03 - CSS Variables (view)
- Initial values of input elements sync up with CSS vars
- Inputs update values only when mouse button is pressed
rotate
variable instead ofpadding
- Responsive; mobile first
- Touch screen support
05 - Flex Panel Gallery (view)
- Panels expand on 'mouseover' instead of 'click'
- Opening a panel closes the previous one.
- more dynamic CSS transitions.
06 - Type Ahead (view)
- Results are sorted by a selected property
- find() and findIndex() are abstracted
08 - Canvas (view)
- Actions can be undone
- Touch screen support
- Canvas preseves content on resize
10 - Checkboxes (view)
- Clicking two boxes while holding Shift checks OR UNCHECKS all boxes in between, to match the state of the first box clicked
- The same operation is performed on subsequent clicks as long as shift is held (matching the very first box)
11 - Video Player (view)
- Dragging a slider doesn't stop on mouseleave
- Added a Full Screen button
12 - keyLog (view)
- Arbitrary number of availble keywords
- If the key sequence matches multiple keywords, the recently matched one takes precedence (e.g. gold < goldenrod)
- Longer keywords have higher precedence (red < darkred)
13 - Slide in on Scroll (view)
- Bugfix: On each scroll, images react to the window's final position, rather than initial
- Images start sliding as soon as they appear on screen - not when they're halfway in
- Custom debounce function (for the sake of practice)
16 - Mouse Move shadow (view)
- Interactive text-shadow size and blur
- Variable parameters set in UI
- Touch screen support
- Responsive font size
18 - Adding Up Times with reduce (view)
- Functional programming approach & reusable functions
18 - Webcam fun (view)
- Flip image horizontally
- Filters can be selected in UI
- Filter intensity can be adjusted in UI
- Bugfix: rgbSplit filter doesn't mix up channels
- greenScreen min and max colors are visualized in UI
30 - Whack A Mole (view)
- Bugfix: Moles can be bonked just once on each appearance
- Bugfix: Moles don't go back up after getting bonked without fully hiding first
- Moles change appearance when bonked
- Prevent clock hands from moving from 360deg back to 0deg at the end of a cycle
- make it interactive -> add to portfolio