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