• Guess The Keys App

  • A fun little game made with JavaScript, SCSS/CSS3, and HTML. As I was developing this game, it also reminded me of the importance of checking for browser compatibility. Not knowing how your application works on various browsers, rather all the most important ones (Chrome, Safari, Firefox, IE), can result in major feature breakers! I wrote about my cross browser compatibility experience while developing this game on my Developer Blog. The post is entitled e.keyCode || e.which?. You can find the link to the post on the Guess the Keys Github repository README.md.

    keypress-event, javascript, event-listeners, disabled-property, game, keycode, scss, css-in-js, es6-javascript, keypress, browsers, input-validation
  • view more

  • Weather App with Node.js

  • A weather app using mapbox geolocation API, weatherstack API, request npm package, handlebars, fetch API, built with JavaScript, node-sass, dotenv for hiding API keys on Github remote repository, using a nodejs server and deployed to Heroku.

    css-clip-path, css-keyframes, css-animations, heroku, map-box-api, modern-javascript, nodejs, node-sass, nodejs-server, request-npm, weatherstack-api
  • view more

  • 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. This is made possible with the implementation of the Web Audio API.

    css-in-js, gh-pages, javascript, node-sass, npm, web-audio-api
  • view more

  • Custom HTML5 Video Player/Shadow DOM

  • An app which creates a custom HTML5 video player using the Shadow DOM so that the video player can go full screen without issue. This custom HTML5 video player looks more like a YouTube or Netflix experience insgtead of a user agent stylesheet!

    fullscreen-api, html-5-video, html-5, cross-browser-issues, cascading-stylesheets, shadow-dom, user-agent-stylesheets, pseudo-elements, javascript
  • view more

  • OMDB API with Node.js and Async/Await

  • An app which implements the OMDB API Using Nodejs, protects your API key, and deploys to Heroku. It uses the Got HTTP library, which replaces the deprecated Request library, and which supports Async/await (among other things!).

    async-await, dotenv, ejs, ejs-lint, eslint, express, got, heroku, local-scripts, modern-javascript, node.js, node-modules, nodemon, node-sass, omdb-api, pagination, scss
  • view more

  • Web Audio API Meets a Sprinkle of Confetti

  • A Web Audio API app which uses AJAX to retrieve a locally hosted audio file. When the user clicks on the start button, the background and text color of the button change, as does the background color of the page. Music starts playing, and confetti populates the page. When the user clicks on the stop button, the music stops, the background and text color of the button change, as well as the background color of the page. When the user clicks on the refresh button, the page and buttons are set to their default state.

    web audio api, ajax, confetti-js, npm, canvas, random colors, gh-pages, cdnjs, buffer, scripts, node-sass
  • view more

  • Node Collaborative Drawing

  • A real time collaborative drawing app built with websockets and the socket.io websocket library, express, and node canvas. What is it for? For friends and family or colleagues to connect in real time and draw collaboratively with each other.

    nodejs, serve favicon, socket.io, websockets, expressjs, node canvas, collaboration
  • view more

  • Speech To Text

  • A voice controlled notes app using the Speech Recognition Api and React. This little app was built with React, Webpack, The Web Speech Recognition Api, and Session Storage. I also use Babel 7 for JS compilation and Jest for testing.

    web speech recognition api, session storage, react, webpack 4, babel 7, jest testing
  • view more

  • Welcome To The Groove

  • An audio player app backed by a JS object called Jukebox with methods to play, stop, and load songs. Metadata is extracted from audio files, a progress bar with a thumb slider which displays the duration of songs, and is synched to the audio's current time. There is also a search input and more.

    object oriented javascript, audio web api, metadata, progress bar, thumb slider, search
  • view more

  • Rockin Synth

  • When the user presses a key, it creates a musical note corresponding to that of a real piano. When the user presses a key, a transition is triggered. When the user presses down on the key, it becomes a bit bigger and turns yellow. When the user lifts their finger from the key, the key scales down to its regular size and the yellow background disappears.

    event listeners, e.keyCode, e.which, kbd tags, transitions
  • view more

  • 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. There is also music if one wants to listen while writing. The user’s text is saved to session storage. If the user reaches the 5mb limit, he/she can save it to a .txt file and download it.

    text to speech, speech synthesis api, audio web api, session storage, file downloads
  • view more

  • Trump Talks Trash

  • A Random Quote API Application using the What Does Trump Think? API. I created a Nodejs app using the ejs (embedded javascript) view engine for Express, a minimalist framework for Nodejs. I was only using one image which was not large, and there were no fancy animations involved. I use the fetch() API method instead of AJAX.

    fetch api, nodejs, express, ejs, random quote api
  • view more

  • Chattrbox

  • A real time communications app built with websockets/socket.io websocket library, Node.js, and Express. What is it for? For friends, family, and/or colleagues to connect in real time and communicate with each other. messages are timestamped. chattrbox also uses the geolocation API and Google Maps API Maps Url.

    websockets, socket.io, nodejs, express, geolocation api, google maps api maps url
  • view more