JavaScript30

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.forEach() CanvasRenderingContext2D.drawImage() CanvasRenderingContext2D.getImageData() CanvasRenderingContext2D.putImageData() Document.createElement() Document.querySelector() Document.querySelectorAll() Element.innerHTML Element.setAttribute() EventTarget.addEventListener() HTMLCanvasElement.toDataURL() HTMLVideoElement MediaDevices.getUserMedia() […]

JavaScript30 – Day 18

In today’s exercise, I learned how to fetch all video lengths from a site and calculate the total duration of all videos. The exercise was mainly based on the functions map() and ​​reduce(). The final code can be found on Day 18 – Adding Up Times with Reduce. Resources: Array.from() Array.prototype.map() Array.prototype.reduce() Math.floor()  

JavaScript30 – Day 17

Another day, another exercise. Today, how to sort arrays without while ignoring the articles of the corresponding title. The exercise required a combination of replacing, sorting and mapping and the final code can be found on Day 17 – Sort Without Articles. Resources: Array.prototype.join() Array.prototype.map() Array.prototype.sort() String.prototype.replace() String.prototype.trim()

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: Document.querySelector() Event.target EventTarget.addEventListener() Math.round()

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: Document.querySelector() Element.matches() Event.preventDefault() EventTarget.addEventListener() JSON.parse() JSON.stringify() localStorage.getItem() Storage.setItem()

JavaScript30 – Day 14

In today’s lesson, I’ve learned the difference between copies and references or variables, arrays and objects. The final code can be found on 14 – JavaScript References VS Copying. Resources: Array.prototype.slice() Array.prototype.concat() Object.assign()  

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: EventTarget.addEventListener() Array.prototype.push() Array.prototype.splice() Array.prototype.join() Array.prototype.includes()

JavaScript30 – Day 9.5

A part of Automattic’s creed says: I’m in a marathon, not a sprint. As a result of that, I decided to take a day off from the JavaScript30 challenge to reflect what I’ve learned so far. And while Germans use to say Don’t delay what you can do today my Aussie friends use to say […]

JavaScript30 – Day 9

Today’s lesson was about how to use the console like a pro. I learned how to print info, warning and error messages, how to count, how to group and a few others. The final code can be found on 09 – Dev Tools Domination. Resources: Console.log() Console.warn() Console.error() Console.info() Console.assert() Console.clear() Console.dir() Console.groupCollapsed() Console.groupEnd() Console.count() […]