/Javascript30

30 Day Vanilla JS Challenge

Primary LanguageHTML

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.

  1. 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.

  2. JS+CSS Clock
    Highlights: CSS transitions
    Tweaks: Clock styling, abstracting degree functions, detect/disable transition during 59->0

  3. CSS Variables
    Highlights: Getting/setting CSS variables with values, HTML5 inputs (range, color), element.dataset, scoping variables to elements

  4. ARRAY Cardio
    Highlights: Array filter(), map(), sort(), reduce(), console.table(), querySelector works on any DOM element (not just document), destructed array assignments

  5. FLEX Panels
    Highlights: Nested Flexbox items, transition effects

  6. AJAX Typeahead
    Highlights: fetch API, promises

  7. Array Cardio Day 2
    Highlights: Array methods: .some(), .find(), .findIndex()

  8. HTML5 Canvas
    Highlights: destructuring arrays, global composite operation (like Photoshop blend modes)

  9. Dev Tools Tricks
    Highlights: break on node modifications, styling console output, console.assert, console.group()/groupEnd()/groupCollapsed(), console.count(), console.time()/timeEnd()

  10. Multiple Checkbox Selection
    Highlights: selecting range of elements using shift key

  11. HTML5 Video Player
    Highlights: video event listeners
    Tweaks: Added fullscreen capability

  12. Key Code Detection
    Highlights: Detecting a key sequence
    Tweaks: Added more rainbows and detect Konami code (with arrow keys) instead of just single characters