inline-calculator v1.2.2

Inline Calculator

An HTML inline input calculator for doing math in the browser. Inspired by the YNAB budget calculator. Math calculations are computed using mathjs.

Table of Contents

• Usage
• Configuration
  • Selector
  • Callbacks
    • onCalculated
    • onError
• Contributing
  • Getting Start
  • Example
  • Testing

Usage

Install the package.

# Yarn
yarn add inline-calculator

# NPM
npm i inline-calculator

Create a text input with an id of inline-calculator.

<input type="text" inline-calculator />

Import and initialize the constructor.

import InlineCalculator from "inline-calculator";

InlineCalculator.initialize();

When users enter a mathematical expression and press the enter key, the input's value will update with the return value of the expression.

For Example:

2 + 2

Will return:

4

Configuration

Selector

Override the default id (#inline-calculator) selector. The event listener uses Document.querySelector() so you can pass any type of selector you want.

<input type="text" class="my-custom-class" />

import InlineCalculator from "inline-calculator";

InlineCalculator.initialize({
  selector: ".my-custom-class"
});

Callbacks

onCalculated

The onCalculated callback is called directly after the calculation.

import InlineCalculator from "inline-calculator";

InlineCalculator.initialize({
  onCalculated: function(value) {
    alert(`Your new value is ${value}.`);
  }
});

onError

The onError callback is called when mathjs throws an exception.

import InlineCalculator from "inline-calculator";

InlineCalculator.initialize({
  onError: function(error) {
    alert(`Oops! Something went wrong. ${error}`);
  }
});

Contributing

Getting Start

Install dependencies with Yarn.

yarn install

Example

To see an example of the inline calculator in action, run the webpack-dev-server. Webpack will open http://localhost:8080/ in your browser.

yarn start

Testing

This package uses Jest for unit testing.

yarn test