diff --git a/README.md b/README.md index 6540574..ea52d24 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,22 @@ # naive-keypad -## Build the browser application +An interactive demonstration of a keypad with a quickly discoverable code. + +## Deploying + +To deploy it on your web server, you need to copy those files/directories: + +- `index.html` +- `src/` + +## Developing + +You may optionally use a build step to minify the code and have a development server. Ensure you have [Node.js](https://nodejs.org) installed. Then run your favorite package manager (npm, yarn, pnpm, bun, etc.) to install the dependencies and build the application: ```sh npm install -npm run build -``` - -Copy the contents of the `dist` directory to your web server, and there you go! - -## Changing the code - -You may during the build process override the code of the keypad: - -```sh -VITE_KEYPAD_CODE=7894 npm run build +npm run dev # Run the Vite development server +npm run build # Build the application in the dist/ directory ``` diff --git a/index.html b/index.html index 472e05f..2df5b2e 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Digicode +
@@ -14,6 +15,6 @@
- + diff --git a/package.json b/package.json index 1fceae1..69e6fd8 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "devDependencies": { - "typescript": "^5.0.2", - "vite": "^4.4.5" + "typescript": "^5.2.2", + "vite": "^4.5.0" } } diff --git a/src/digicode.ts b/src/digicode.js similarity index 71% rename from src/digicode.ts rename to src/digicode.js index 44dd376..b13dc06 100644 --- a/src/digicode.ts +++ b/src/digicode.js @@ -1,16 +1,18 @@ -import './style.css'; - const IS_SUCCESS = 'is-success'; const IS_ERROR = 'is-error'; const DELAY = 1000; -const CODE = import.meta.env.VITE_KEYPAD_CODE || generateCode(4); +const CODE = generateCode(4); let builder = ''; -const display = document.getElementById('display') as HTMLDivElement; -const light = document.getElementById('light') as HTMLDivElement; -const keypad = document.getElementById('keypad') as HTMLDivElement; +const display = /** @type {HTMLDivElement} */ (document.getElementById('display')); +const light = /** @type {HTMLDivElement} */ (document.getElementById('light')); +const keypad = /** @type {HTMLDivElement} */ (document.getElementById('keypad')); -function generateCode(len: number): string { +/** + * @param {number} len + * @returns {string} + */ +function generateCode(len) { let code = ''; for (let i = 0; i < len; i++) { code += Math.floor(Math.random() * 10).toString(); @@ -24,7 +26,10 @@ function resetCode() { light.classList.remove(IS_SUCCESS, IS_ERROR); } -function composeDigit(digit: number) { +/** + * @param {number} digit + */ +function composeDigit(digit) { builder += digit.toString(); display.innerText = builder + '_'.repeat(CODE.length - builder.length); light.classList.remove(IS_SUCCESS, IS_ERROR); diff --git a/tsconfig.json b/tsconfig.json index 736af3f..ed03a9d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,6 +6,8 @@ "lib": ["ES2020", "DOM", "DOM.Iterable"], "types": ["vite/client"], "skipLibCheck": true, + "allowJs": true, + "checkJs": true, /* Bundler mode */ "moduleResolution": "bundler",