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

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

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

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