#javascript30

Wes Bos' #Javascript30 challenge

https://javascript30.com

30 Day Vanilla JS Coding Challenge

Build 30 things in 30 days with 30 tutorials

No Frameworks × No Compilers × No Libraries × No Boilerplate

1. JavaScript Drum Kit
   Manipulate HTML audio elements using JavaScript
2. CSS Clock
   A working analog clock using JavaScript and CSS animation.
3. Playing with CSS Variables
   Manipulate CSS variables in a document's stylesheet to change image properties.
4. Array Cardio #1
   Practice with Array methods: .filter(), .map(), .sort(), .reduce().
5. Flex Panels Image Gallery
   A small image gallery using Flexbox and animated text.
   Bonus: A CSS-only version that shows how to do it without JavaScript: Flex Panels Image Gallery
6. AJAX Type-Ahead
   Automatically search a dataset and show results while typing into a search box.
   Note: The instructor's original example had a bug which caused the case of the results to be changed under some circumstances. This is corrected in my version.
7. Array Cardio 2
   Practice with Array methods .some(), .every(), .find(), .findIndex().
8. Fun with The HTML5 Canvas Simple colorful drawing with the mouse on an HTML5 canvas.
9. Dev Tools Tricks
   14 tips for using the Developer Tools Console and console.
10. Hold Shift to Check Multiple Checkboxes
    Similar to multiple selection in an email client or file manager, this demonstrates selection of multiple checkboxes in an HTML form using the Shift key.
11. Custom HTML5 Video Player
    A custom video player using the HTML5 video element, the Fullscreen API and CSS animations.
12. Key Sequence Detection
    Track keypresses for a specific sequence of characters using the keyup event and Array.prototype.splice().
13. Slide-In on Scroll
    Use the scroll position with CSS transitions to slide images into view while scrolling.
14. Objects and Arrays - Reference vs Copy
    Small demonstrations of reference assignment for arrays and objects and methods of making actual copies of these data types.
15. HTML5 localStorage and Event Delegation
    Demonstrate the use of HTML5 localStorage and JavaScript event delegation.
16. CSS text-shadow Mouse Move Effect
    Track mouse position over an element and use the information to adjust the element's text-shadow properties.
17. Sorting Band Names Without Articles
    Demonstrate how to sort a list of strings without considering starting articles like "a", "an", and "the".
18. Tally Time Strings Using .reduce()
    An example of gathering time strings from HTML5 data and using .reduce() to calculate the sum of the values.
19. Unreal Webcam Fun
    Experimentation with the HTML5 canvas element and a webcam.
20. Native Speech Recognition
    Demonstrate use of the Web Speech API with simple text transcription.
21. Geolocation-Based Speedometer and Compass
    Demonstrate use of the Web Geolocation API with visual direction and speed indicators.
22. Follow-Along Link Highlights
    An interesting method for highlighing the hovered link using CSS3 animation.
23. Speech Synthesis
    A UI for Speech Synthesis with the Web Speech API.
24. Sticky Navigation Bar
    Implementation of a navigation bar that is automatically fixed to the top of the window rather than scrolled out of the viewport when the document is scrolled past a certain point.
25. addEventListener Options: Capture, Once, stopPropagation
    A visual demonstration of some of the less-used addEventListener options.
26. Follow-Along Dropdowns
    Dropdown menus with dynamic size and content.
27. Click and Drag to Scroll
    Click and drag to scroll an element's content rather than using a scroll bar.
28. Video Speed Controller
    An example of an HTML5 video element with a custom control which changes the playback rate.

• Video Speed Controller - alternate version
  An alternate version of the Video Speed Controller with different styling.

29. Countdown Clock
    A countdown clock implemented with CSS and JavaScript.
30. Whack-A-Mole
    The classic Whack-A-Mole game implemented with JavaScript and CSS transitions.