projects tag: modern javascript
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.
$stack: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
Canvas 2D Breakout Game
I always had wanted to be able to create games using the HTML5 Canvas 2D API, so I built (and refactored) a Canvas 2D Breakout Game inspired by one I came across on MDN.
$stack:babel/canvas 2D/eslint/innerhtml property/keydown event/keyup event/modern javascript/mousemove event/node sass/project/webpack
Dragging Bubbles App
I have always wanted to closely tie audio and audio volume controls with visual and creating multiple audio sources, which I tie to one input of type range. So what better way than with the HTML5 Web Audio and HTML5 Canvas 2D APIs!
$stack:ajax/canvas 2D/click event/create buffer source/create gain/create media element source/input event/mobile friendly/modern javascript/pointerdown event/pointermove event/pointerout event/pointerover event/pointerup event/node sass/project/set at target time/web audio api
Making Music in the Browser
An app which makes sounds on the web page when clicking it or dragging the computer's or mobile device's pointing device around the screen.
$stack:css animation/css attr/css in js/css keyframes/css pseudo selectors/gh pages/modern javascript/node sass/npm/project/touch events/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!
$stack: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
Monsters Rolodex (React Hooks)
I recently upgraded this project to React 18 using functional React components AND hooks. For state I use the useState hook, for side effects the useEffect Hook, and the useCallback hook to prevent infinite function calls to the function created to fetch the data from the JSONPlaceholder API.
$stack:apis/api error handling/create react app/css grid/css in js/dart sass/fetch api/flexbox/modern javascript/npx/react 18/react hooks/lazy loading/project
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".
$stack: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
OMDB API Next.js
An app which implements the OMDB API using Next.js, protects your API key, and deploys to vercel.com.
$stack:async-await/css animation/custom next.js _error.js page/dotenv/environment variables/eslint/fetch api/husky/invalid search keywords error handling production/lint-staged/local scripts/modern javascript/next.js/next/router hooks/node.js/node modules/omdb api/pagination/prettier/project/react hooks/required boolean attribute/sass/scss/scroll-down button/scroll-up button/server side rendering/stacktrace error-handing development/stylelint/vercel
Poke API Web App
An application which utilizes the Poke API based on Pokemon characters and uses both the fetch API and AJAX, JavaScript promise chaining, the map method, creates most elements rendered to the html pages, checks for non - existent images and removes them or or sets their display properties to none, uses pointer events to replace touch and mouse events, custom build script, and Modern JavaScript in general.
$stack:ajax/code refactoring/create element/css transforms/css transitions/fetch api/keydown event/load event/map method/modern javascript/nested map method/nested api objects/node sass/onerror property/parallax/pointer events/poke api/project/promise chaining/window pageOffset/window scroll
Web Audio API AJAX
A Web Audio API app which uses AJAX to retrieve a locally hosted audio file.
$stack:ajax/babel/buffer/canvas/cdnjs/code refactoring/confetti-js/eslint/gh-pages/modern javascript/node-sass/npm/prettier/project/random colors/scripts/web audio api/webpack/workflow refactor