ideas for demos

[onebree]

1. Drum kit
   1. play sounds on click (or tap)
2. Clock
   1. continuously add up degrees, instead of resetting at 00
3. CSS variables
4. Array Cardio 1
   1. add link to wikipedia, and instructions on what code to run there
   2. Show code on the page
5. Flex panel gallery
   1. when you click to open a panel, close all others
6. AJAX type ahead
   1. sort by cities closest to me (geolocation)
   2. figure out another solution without using innerHTML()
   3. use a different endpoint with constantly updated data
7. Array Cardio 2
   1. Show code on the page
8. Fun with HTML5 Canvas
   1. Add controls to change color, size, etc manually
9. Dev tools and tricks
   1. Show code on page
10. Hold shift to check multiple checkboxes
11. Custom HTML5 video player
    1. Toggle play on spacebar (not just click)
    2. Show distinction between volume and playback bars (icons on button?)
    3. Start progress bar at zero, along with video time on page load
    4. Use input event, instead of both change and mouseover
    5. Add full screen button and functionality
12. Key sequence detection
    1. Find a different library that doesn't set cookies, and is not unicorns/rainbows
13. Slide in images with scroll
14. Reference vs copy
15. localStorage and event delegation
    1. Re-render only the elements you want to toggle, not the entire list
    2. Buttons to delete all items, check all items, or uncheck all items
16. Mouse move shadow
    1. Add CSS blur effects to blend colors together as shadows overlap
17. Sorting Band Names without articles
18. Tally String Times with Reduce
19. Webcam fun 🐛
    1. Create color filters for G and B (like redEffect)
    2. Allow user to slide the amount of colors they want filtered in the image
    3. Add buttons to select whether to use color filters, RGB split, or green screen
    4. Tinker with green screen some with the sliders -- get true RBG items to be filtered out
20. Native speech recognition
    1. "What's the weather today?" -- and use some weather API and current location
    2. "Search for ..." and bring up search results
    3. Are there plugins to increase the confidence of the results?
    4. Unbind the event listeners when you're no longer focused on that window/tab -- make this an option
21. Geolocation 🐛 - proof of concept using this newer API
22. Follow along links
23. Speech synthesis 🐛
    • Depending on the speech synthesis engine used, the min/max values may be constrained
    1. Find out why rate > 2.0 does not work at all (no speaking)
       • https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/rate#Value
    2. Find out why pitch set to 0 works as if it's set to 1
       • https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/pitch#Value
24. Sticky nav
25. Event capture, propagation, bubbling, and once
26. Follow along nav
    1. Add CSS transitions/animations to fade dropdowns in/out, like Stripe
27. Click and drag
    1. Create another demo for drag-and-drop of elements.
28. Video speed controller
    1. Display the speed somewhere other than inside the rate percentage (gets hidden on small amounts)
    2. Change the minimum to 0.51, and display the rate as toFixed(1)
    3. Call return if percentage is under 0.51 - stop moving the slider
    4. Click or drag the speed, instead of mousing over
    5. Apply this idea to the HTML5 video player demo
29. Countdown clock
    1. Separate hours from countdown => HH:MM:SS
    2. ?minutes=X query string -- either remove it, OR wire it up to start timer if bookmarked
    3. Play audio when timer stops
    4. Send desktop notification when timer stops
30. Whack-a-mole game
    1. All-time score board -- use Firebase or localStorage
    2. Levels of difficulty
    3. Touch events, not just click
    4. Prevent additional clicks on the same mole (while it's up) from adding to score 🐛