sebsterio/javascript30

30 Day Vanilla JS Challenge

JavaScript30

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

List of modifications

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 of padding
• 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

07 - Array Cardio 2

• 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

TODO

Clock

• Prevent clock hands from moving from 360deg back to 0deg at the end of a cycle

Sort without articles

• make it interactive -> add to portfolio