fede4ka1245/keyboard-calculator

Caclulator keyboard inspired by ux and ui in tikoff bank application

Calculator Keyboard

About

Calculator keyboard component build on clear ts and css. Can be usefull for number inputs, where users can count some staff.

Install

npm i calculator-keyboard

Idea

Use calculator for numeric inputs where user can count some staff

API

/**
 * Params for onUpdate function
 */
type OnUpdateParams = {
  originalExpression: string[];
  processedExpression: string[];
};

/**
 * Represents a virtual keyboard calculator for basic arithmetic operations.
 */
class KeyboardCalculator {
  /**
   * The internal stack that holds the expression elements.
   */
  stack: string[] = ["0"];

  /**
   * Creates a new instance of the KeyboardCalculator class.
   * @param element - The HTML element to which the calculator will be attached.
   */
  constructor(element: HTMLElement);

  /**
   * A callback function triggered whenever the calculator's state is updated.
   * @param params - An object with the original and processed expressions.
   */
  onUpdate: (params: OnUpdateParams) => any = () => {};

  /**
   * Removes the calculator from the DOM.
   */
  destroy(): void;

  /**
   * Resets the calculator's internal stack to its initial state.
   */
  clearValue(): void;

  /**
   * Returns the current result of the evaluated expression with a precision of four decimal places.
   * Returns undefined if the expression is invalid.
   */
  getCurrentCountedValue(): number | undefined;

  /**
   * Checks if the current expression is valid and can be evaluated.
   */
  isExpressionValid(): boolean;
  // ... (private methods)
}

Can by styled by redefining css vars and change styles for elements below

CSS vars

:root {
  --awesome-calculator-height: 14em;
  --awesome-calculator-hover-background: rgba(128, 128, 128, 0.4);
  --awesome-calculator-hover-border: solid 1px rgba(128, 128, 128, 0.6);
  --awesome-calculator-active-bg: rgba(128, 128, 128, 0.8);
  --awesome-calculator-border-radius: 5px;
  --awesome-calculator-key-color: black;
  --awesome-calculator-key-bg: rgba(128, 128, 128, 0.2);
  --awesome-calculator-gap: 2px;
}

HTML elements structure

// "key" is numbers from 0 to 9, "dot", "divide", "multiply", "plus", "minus", "equal"
<div id='awesome-calculator' class="awesome-calculator-container">
    <div class="key key-${key}" id="awesome-calculator-key-${keyValue}">
        <div>
            ${key}
        </div>
    </div>
</div>

Example in codesandbox

Example on vue in codesandbox

Inspired by keyboard in Tinkoff bank application