JavaScript30 – Day 13

Another day, another lesson. Today, I’ve learned how to fade in and out images based on scroll interactions. The final code can be found on 13 – Slide in on Scroll. Resources: TBD

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 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: Document.querySelector() Document.querySelectorAll() EventTarget.addEventListener() Array.prototype.forEach()

JavaScript30 – Day 10.5

Expect the unexpected! On my way home to focus on my daily JavaScript30 challenge, I received a call from a very good friend in need of some assistance to create some CPT custom queries. The issue turned out to be slightly more complex than initially expected and as assisting him has a higher priority than […]

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: Document.querySelectorAll() Array.prototype.forEach() EventTarget.addEventListener()

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.assert() Console.clear() Console.dir() Console.groupCollapsed() Console.groupEnd() Console.count() […]

JavaScript30 – Day 8

In today’s lesson, I’ve learned how to create an HTML5 canvas to draw on. The final result reminded me of the good old ActionScript times and the final code can be found on 08 – Fun with HTML5 Canvas. Resources: JS Query Selector HTML Get Context

JavaScript30 – Day 7

Today, the second part of the array cardio took place. Wes thereby explained how to use the functions some(), every(), find(), index(), indexOf() and splice(). The final code can be found on Day 07 – Array Cardio Day 2. Resources: JS Every JS Find JS Find Index JS Some JS Splice

JavaScript30 – Day 6

In today’s lesson, I learned how to create an AJAX dynamic search using JavaScript. We worked with a JSON list with American cities and after providing a search string, the application returned all matching results. Resources: JS Event Listener JS Fetch JS Filter JS Map JS Push JS Promise JS RegExp JS Replace JS Query […]