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