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()

Read More

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()

Read More

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 […]

Read More

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()

Read More

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 […]

Read More

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() […]

Read More

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

Read More

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

Read More

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 […]

Read More

JavaScript30 – Day 5

In today’s lesson, we’ve created a small image gallery using JavaScript and nested CSS Flexboxes. The final code can be found on 05 – Flex Panel Gallery. References: CSS Flexbox JS Event Listener JS Toggle Method JS Query Selector

Read More

JavaScript30 – Day 4

Today, Wes explained various NodeList and array functions. The final code can be found on 04 – Array Cardio Day 1. References: NodeList Array Array.prototype.filter() Array.prototype.map() Array.prototype.sort() Array.prototype.reduce()

Read More

JavaScript30 – Day 3

In today’s lesson, I’ve learned how to create dynamic CSS using JavaScript. The exercise was about how to fetch values of HTML input elements via JavaScript and convert these into CSS statements. The final code can be found on 03 – CSS Variables. References: CSS :root CSS variables Document.querySelectorAll() EventTarget.addEventListener()  

Read More