projects tag: keydown event
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
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
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
Wikipedia Viewer
This is a code refactoring of a project I created several years ago. I revamped the workflow, migrating from Gulp to Webpack, from jQuery to Modern JavaScript with async await, @babel/pollyfill to make my async wait code work with Babel 7 and Webpack 5, adding css animated scroll buttons, animated magnifying glass icon search input on focus, hover, and active, replacing PostCSS with Node Sass, and adding a dynamic year in the footer.
$stack:async await/babel/@babel/polyfill/code refactor/code update/eslint/innerhtml property/keydown event/modern javascript/node sass/prettier/project/webpack/wikipedia api/window pageOffset/window scroll