Material Calculators

Configuration-driven calculator system for construction and landscaping material estimates.

System

• calculator-engine.js - Core engine handles forms and calculations
• calculator-configs.js - Calculator definitions
• styles.css - Shared minimal styling
• index.html - Main hub with all calculators

Creating New Calculators

1. Add Configuration

'my-calculator': {
    id: 'my-calculator',
    name: 'My Calculator',
    description: 'Description',
    resultLabel: 'Result Units',
    decimals: 3,
    fields: [
        {
            name: 'length',
            label: 'Length',
            unit: 'Feet',
            type: 'number',
            required: true
        }
    ],
    calculate: (values) => values.length * 2
}

2. Add to Index Page

Add to calculators array in index.html:

{ id: 'my-calculator', name: 'My Calculator', description: 'Description.' }

3. Create HTML File

<script src="calculator-engine.js"></script>
<script src="calculator-configs.js"></script>
<script>
    CalculatorEngine.init('my-calculator', CalculatorConfigs['my-calculator']);
</script>

Field Types

• number - Numeric inputs with validation
• text - Text inputs
• radio - Single selection
• select - Dropdown selection
• checkbox - Multiple selections

Layout Options

• rowSize - Fields per row (default: 2)
• layout - Custom layout with rows and singles
• validate - Custom validation function

Current Calculators

1. Concrete Flatwork
2. Concrete Column
3. Asphalt
4. Aggregate
5. Landscape Products