Skip to content

Latest commit

 

History

History
45 lines (24 loc) · 1.92 KB

File metadata and controls

45 lines (24 loc) · 1.92 KB

Key Value

Simple project that displays the Key and KeyCode of the pressed key, based on project idea from app-ideas repo. Depolyed on Github Pages here.

Requirements

Node.js with npm with the following npm packages installed locally or globally-

Parcel (devDependency)

Used to enable usage of node modules (tone in this case) in browser. Browserify not used because it takes some config for HMR. And Webpack no longer polyfills node modules.

Tone.js (prodDependency)

Used to make sound on keypress.

Install

$ git clone https://github.com/ranmerc/implement-app-ideas
$ cd implement-app-ideas/beginner/Key-Value-App
$ npm install

I had parcel installed globally so it is not included in package.json file so if you do not have parcel installed you may also want to do -

$ npm install parcel-bundler --save-dev

NPM Scripts

$ npm run dev

Targets src/index.html outputs to dist/ and starts a dev server on port 1234.

$ npm run build

Builds the production version of the app and outputs to build/. Cache folder is deleted because of this issue and public url is used because of this issue.

References

  • Design on Figma.

  • How to code CSS media queries targeting ALL mobile devices and tablets? on Stack Overflow.

  • KeyboardEvent on MDN.

  • Tone.js docs.