Projects for Javascript30 by Wes Bos
-
1. JS Drum kit β Notes
Lessons: Data-attributes, how to select elements with data-attributes, using audio element and manipulating it with various methods in JS, transition end event, how to add eventlistener to a nodelist of elements.
-
Lessons: Manipulating the CSS transform properties based on calculated JS variables, executing a function continuosly after a set period of time using
setInterval()
method, Using theDate()
object, transform-origin property. -
3. CSS Variables with JS β Notes
Lessons: Using CSS variales, updating the variables using JS, mousemove event, accessing the CSS variables using documentElement property and setProperty method, dataset property
-
4. Working with Array methods 1 β Notes
Lessons: Using array.prototype methods => filter, sort, map, reduce. Changing a nodelist of items into an array using i)
Array.from()
ii) [..nodelist] spread operator -
5. Flex Panel Gallery β Notes
Lessons: Moving element in and out view with translate property. Triggering an event after a transition event has finished its work.
-
6. Fetch API type ahead β Notes
Lessons: How to use Fetch API, Using RegExp to filter user input value from an array of data and inserting the result into the DOM.
-
7. Working with Array methods 2 β Notes
Lessons: Using array methods :
.some()
,.every()
,.find()
,.findIndex()
-
8. Fun with HTML5 Canvas β Notes
Lessons: How to use HTML5 canvas, context and various methods related to it (
strokeStyle, lineTo, moveTo
etc...), How to draw on the canvas on mousedown, changing the color hue and linewidth with strokes -
9. Useful Devtools tricks β Notes
Lessons: Cool devtools commands like
console.assert()
to perform basic tests,console.dir()
to get detailed info about an element,console.time()
to view runtime of a task,console.group()
to group similar infos -
10. Hold shift and check multiple checkboxes β Notes
Lessons: How to fire events only a certain key is pressed, using flag variables to set flip checkboxes
-
11. Custom Video Player β Notes
Lessons: Using HTML5 video element and its various methods and properties, using mousedown flag variable to implement drag and update functionality, updating progress bar with JS and
flex-basis
property, -
12. Key Sequence Detection β Notes
Lessons: Getting key from keyup event and storing in an array, maintaining an array length using
.splice()
. -
13. Slide in on scroll β Notes
Lessons:
-
14. JS Reference VS Copying β Notes
Lessons:
-
15. Using LocalStorage β Notes
Lessons:
-
16. Mouse move shadow β Notes
Lessons:
-
17. Sort without articles β Notes
Lessons:
-
18. Adding up times with Reduce β Notes
Lessons:
-
19. Webcam Fun β Notes
Lessons:
-
20. Speech Detection β Notes
Lessons:
-
Lessons:
-
22. Follow Along Link Highlighter β Notes
Lessons:
-
23. Speech Synthesis β Notes
Lessons:
-
24. Sticky Nav β Notes
Lessons:
-
25. Event Capture, Propagation and Bubbling β Notes
Lessons:
-
26. Stripe Follow Along Nav β Notes
Lessons:
-
Lessons:
-
28. Video Speed Controller β Notes
Lessons:
-
Lessons:
-
Lessons: