JavaScript30 – Day 19
In today’s lesson, I learned how to pipe webcam input and manipulate the stream on the fly. In comparison to the other lessons, this lesson required the use of npm. The final code can be found on Day 19 – Webcam Fun.
Resources:
- Array
.prototype .for Each() - Canvas
Rendering Context2D.draw Image() - Canvas
Rendering Context2D.get Image Data() - Canvas
Rendering Context2D.put Image Data() - Document
.create Element() - Document
.query Selector() - Document
.query SelectorAll() - Element
.inner HTML - Element
.set Attribute() - Event
Target .add Event Listener() - HTMLCanvas
Element .toDataURL() - HTMLVideo
Element - Media
Devices .get User Media() - Node
.insert Before()
JavaScript30 – Day 16
In today’s exercise, I learned how to create a dynamic mouse shadow. As always, the final code can be found on Day 16 – Mouse Move Shadow.
Resources:
JavaScript30 – Day 15
Today’s lesson covered the secrets of using local storage. I learned how to create a small restaurant booking system, that stores the ordered dishes in the browser’s local storage. The final code can be found on Day 15 – LocalStorage.
Resources:
JavaScript30 – Day 12
In today’s exercise, I’ve learned how to trigger an action when a user provides a specific key sequence. A potential use would be by adding easter eggs to websites. As always, the final code can be found on Day 12 – Key Sequence Detection.
References:
JavaScript30 – Day 11
In today’s exercise, I learned how to create a custom video player that allows basic control as well as adjusting the video speed and the volume. The final code of the exercise can be found on 11 – Custom Video Player.
Resources:
JavaScript30 – Day 10
In today’s exercise, I learned how to check multiple checkboxes when the shift button gets pressed. While the code is rather short, it’s definitely one of the most tricky codes we’ve created so far. The final code can be found on Day 10 – Hold Shift and Check Checkboxes.
Resources: