Search All Projects

Monsters Rolodex 2022 (Hooks)

Monsters Rolodex 2022 (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.

apis, api error handling, create-react-app, css grid, css in js, (dart) sass, fetch api, flexbox, javascript object, manipulating the dom, mobile friendly, modern javascript, npx, ,react 18, react event handlers, react image lazy loading, react virtual dom, setState() method, template string literal interpolation, yarn
Learn more →

Monsters Rolodex 2022 (Classes)

Monsters Rolodex 2022 (Classes)

I recently upgraded this project to React 18 using a top-level React class component AND functional components. The class component contains the state, and the other components contain the props. I use the react-lazy-load-image-component package to implement lazy loading of my Robohash images fetched from the Robohash API, some of which sometimes did not load immediately and left an image placeholder. Then I would literally have to manually clear the browser cache and reload the page to fetch those straggler images from the API. With the react-lazy-load-image-component package, images are loaded from the top down instead of the other way around, and this resulted in much faster and successful loading of all the images from the API. In addition, I use yarn, create-react-app, try catch for error handling, async/await, scss modules using dart sass, and hosted the project on gh-pages.

apis, api error handling, create-react-app, css grid, css in js, (dart) sass, es6 class constructor method, es6 superclass constructor method, fetch api, flexbox, javascript object, manipulating the dom, mobile friendly, modern javascript, npx, react 18, react event handlers, react image lazy loading, react virtual dom, setState() method, template string literal interpolation, this, yarn
Learn more →

OMDB API JS App

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", if you will.

ajax, api error handling, css in js, event listeners, getElementsByTagName, innerhtml property, javascript object, manipulating the dom, mobile friendly, modern javascript, mousedown event, node sass, template string literal interpolation, this, vanilla javascript
Learn more →

Audio Visual Slider

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, mobile friendly, modern javascript, node sass, web audio api
Learn more →

Monsters API App

Monsters API 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, javascript array of objects, keydown event, manipulating the dom, mobile friendly, modern javascript, node sass, promise chaining, robohash api, template string literal interpolation
Learn more →

Poke API App

Poke API App

An application which utilizes the Poke API based on Pokemon characters and utilizes 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.

ajax, animated magnifying glass icon search input, code refactor, create element, css transforms, css transitions, design refactor, fetch api, innerhtml property, keydown event, load event, manipulating the dom, map method, mobile friendly, modern javascript, nested map methods, nested api objects, node sass, onerror property, parallax, pointer events, poke api, promise chaining, window pageOffset, window scroll
Learn more →

Wikipedia Viewer

Wikipedia Viewer

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, mobile friendly, modern javascript, node sass, web audio api
Learn more →

Canvas 2D Breakout Game

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.

babel 7, canvas 2D, eslint 8, innerhtml property, keydown event, keyup event, modern javascript, mousemove event, node sass, webpack 5
Learn more →

Dragging Bubbles

Dragging Bubbles

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!

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, set at target time, touch friendly, web audio api
Learn more →

LetsBCoding WordPress

LetsBCoding WordPress

An idea I had been brewing for a while where students could join, save information from classes and collaborate.

advanced custom fields, automated git deployments, composer, custom mu plugins, custom wordpress themes, local by flywheel, modern javascript, nodejs, node sass, php7, phpcs, phpdotenv, siteground hosting, wordpress, wordpress custom plugins, wordpress plugin creation, workflow refactor, wordpress rest api, wordpress scripts
Learn more →

Guess the Keys

Guess the Keys

A fun little game made with JavaScript, SCSS/CSS3, and HTML.

appendChild method, arguments object, babel 7, browser compatibility, createDocumentFragment method, createElement method, css in js, es5 function class, es6 modules, eslint 8, event listeners, game, input validation, keycode, keypress event, modern javascript, prettier, scss, setProperty method, split method, String.fromCharCode method, unicode characters, unicaode values, webpack 5
Learn more →

Making Music in the Browser

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.

css animation, css attr, css in js, css keyframes, css pseudo selectors, gh-pages, javascript, mobile friendly, node sass, npm, touch events, web audio api
Learn more →

Custom HTML5 Video Player

Custom HTML5 Video Player

An app which creates a custom HTML5 video player using the Shadow DOM so that the video player can go full screen without issue.

fullscreen api, html5 video, html5, cross-browser issues, cascading stylesheets, shadow dom, user-agent stylesheets, pseudo elements, javascript
Learn more →

OMDB API NodeJS

OMDB API NodeJS

An app which implements the OMDB API Using Nodejs, protects your API key, and deploys to Heroku.

async-await, css animation, dotenv, ejs, ejs-lint, eslint, express, got, heroku, invalid search keywords error handling production, local scripts, modern javascript, node.js, node modules, nodemon, node sass, omdb api, pagination, required boolean attribute, scss, scroll-down button, scroll-up button, stacktrace error-handing development
Learn more →

Web Audio API AJAX

Web Audio API AJAX

A Web Audio API app which uses AJAX to retrieve a locally hosted audio file.

ajax, babel 7, buffer, canvas, cdnjs, code refactor, confetti-js, eslint 8, gh-pages, modern javascript, node-sass, npm, prettier, random colors, scripts, web audio api, webpack 5, workflow refactor
Learn more →

Node Collaborative Drawing

Node Collaborative Drawing

A real time collaborative drawing app built with websockets and the socket.io websocket library, express, and node canvas.

collaboration, expressjs, node canvas, nodejs, serve favicon, socket.io, touch-friendly, touch-end event, touch event fix for canvas 2d, touchmove event, touch-start event, websockets
Learn more →

Node Chat App

Node Chat App

A real time communications app built with websockets/socket.io websocket library, Node.js, and Express.

websockets, socket.io, nodejs, express, geolocation api, google maps api maps url
Learn more →

Trump Talks Trash

Trump Talks Trash

A Random Quote API Application using the What Does Trump Think? API.

fetch apinodejsexpressejsrandom quote api
Learn more →

Cat Whisperer

Cat Whisperer

A little text to speech app I created so that cat lovers could be inspired to write about their cats using the Speech Synthesis API while being inspired by the app’s cat image slideshow

text to speech, speech synthesis api, audio web api, session storage, file downloads
Learn more →

Rockin Synth

Rockin Synth

A piano deyboard application built with JavaScript, es6 modules, the Web Audio API, event delegation, Sass, and more.

babel, e.keyCode, e.which, es6 modules, eslint, event delegation, event listeners, kbd tags, prettier, transitions, web audio api
Learn more →

Welcome To The Groove

Welcome To The Groove

An audio player in the form of a jukebox created with es6-javascript, html5-audio, oop, and includes a search-in-text searchbar.

audio web api, metadata, object oriented javascript, object oriented javascript, progress bar, search, thumb slider
Learn more →

Speech To Text

Speech To Text

A voice controlled notes app using the Speech Recognition Api and React.

web speech recognition api, session storage, react, webpack 4, babel 7, jest testing
Learn more →