projects tag: manipulating the dom
Audio Visual Slider
An application I created at the height of the COVID-19 pandemic as part of the course content of a Dynamic Web 1 (JavaScript) course I was (and still am) teaching. We had just migrated to online learning, and I wanted to create an application that visualized what we were all feeling. I selected images that expressed those feelings, and synched the animations with the beat of music I chose. It was a rough time, but my students for that class were really amazing. I was truly inspired by them.
#appendChild, #css in js animation, #css keyframes, #css transitions, #DOMContentLoaded event, #event listeners, #getElementsByTagName, #innerhtml property, #input event, #manipulating the dom, #modern javascript, #node sass, #project, #web audio api
Monsters API JS App
This little search application utilizes two APIs. One is for the text called {JSON} Placeholder, and the other API is for the images called Robohash. The app also utilizes the fetch API method, the map() method, event listeners, createElement, appendChild, JavaScript array of objects, template string literal interpolation, Modern JavaScript, and more!
#e.keyCode, #e.which, #fetch api, #innerhtml property, #json placeholder api, #keydown event, #manipulating the dom, #modern javascript, #node sass, #project, #promise chaining, #robohash api, #template string literal interpolation
OMDB API JS App
I originally created this client slide application using the OMDB API before creating my OMDB API Node.js version. After I created that one, and discovered potential built-in API errors in the Node.js version, I applied and transformed them into their client-side rendition. I felt it important to introduce my students to application error handling and thus a basic form of "testing".
#ajax, #api error handling, #css in js, #event listeners, #getElementsByTagName, #innerhtml property, #javascript object, #manipulating the dom, #modern javascript, #mousedown event, #node sass, #project, #template string literal interpolation, #this