To create a new calculator, click on the +Calculator on the navigation bar.

Before you start coding, click on the button .

This is where you can configure the settings of the calculator:

  • Add/edit the title of the calculator

  • Set the tab size for your script editor

  • Choose libraries to include in your code (Lo-Dash, Moment.js, or Math.js) - Optional

  • Choose localization (English or Russian) - Optional

IO - Input Output

The IO tab is where you add/edit input and output for your calculator.

You can choose the type of input/output to use. Configure the settings by clicking the button on the added input. Here, you can make changes to the property name, label, and position of the input/output.

The following table explains the extra settings function of the input and output.

Input

Settings

Numbers

'Display Slider': A slider as an alternative for entering a value.

Date

1. The value '0' holds the present date.
2. Increment/decrement in values entered is the day/month/year from/before the present date.
3. Switch to absolute/relative date: Change the input format.

Radio/Dropdown

1. Control type: Choose radio or dropdown.
2. Add choice: To add and edit choice.

Output

Settings

Value

1. Decimal places: Set the decimal place of the output.
2. Currency sign: Place a currency sign in front of the output.
3. Display in percent: Calculates and displays the output in percentage (%).

Table

Columns: Add and edit columns to display your output.

Others

Settings

Defaults (Under an added input)

1. Update defaults: Set a default value to an input.
2. Load defaults: Return the value of the default input.

Script

The SCRIPT tab is where you write your codes in JavaScript.

You can refer to the Cheatsheet for guidelines, but first, you need to add the input and output.

If you can't code in JavaScript, feel free to use our Script Helper and have a look at these examples.

Check our demo video on how to create a "Tip Calculator" easily without coding skills.

Share

The SHARE tab is where you can find the link and codes to embed your calculator. You can also write a description to further explain the calculator.

Style

You can style your calculators by changing the background color, font color, and font size in the STYLE tab. Changes can be seen when you open the link to your calculator in another tab.


Did this answer your question?