# Calculator

## Features

### Default appearance
![Default appearance](https://source.wowmi.us/companies/widgets/calculators/mortgage-payments-with-a-diagram/images/Screenshot_1.png)

### Color customization option
![Color customization option](https://source.wowmi.us/companies/widgets/calculators/mortgage-payments-with-a-diagram/images/Screenshot_2.png)

### To insert a calculator, create a wrapper with "ID"= "calculator-mortgage-payment"

### Sample code for customizing colors

      const CALCULATOR_COLORS = {
        pi: '#717BBC',
        insurance: '#E478FA',
        taxes: '#85E139',
        pmi: '#2ED3B7',
        hoa: '#F38744',
        '--color-primary': '#333333',
        '--color-radio-active': '#333333',
        '--color-accent': '#333333',
        '--color-label-text': '#8E8E8E',
        '--color-input-placeholder-and-radio-text': '#BFBFBF',
        '--background-main': '#F7F7F7',
        '--background-button-hover': '#717BBC',
        '--color-button-submit': '#fff',
        '--background-accent': '#FFFFFF',
      };