calx.js/examples/index.html at master · xsanisty/calx.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Calx Examples - Modern Spreadsheet for the Web</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="navbar-content">
            <a href="index.html" class="navbar-brand">
                <span>📊</span> jQuery Calx Examples
            </a>
            <div class="navbar-links">
                <a href="index.html" class="active">Home</a>
                <a href="jquery-basic.html">Basic</a>
                <a href="jquery-datatypes.html">Data Types</a>
                <a href="jquery-dynamic-form.html">Dynamic Form</a>
                <a href="jquery-formatters.html">Formatters</a>
                <a href="jquery-multisheet.html">Multisheet</a>
                <a href="jquery-mortgage.html">Mortgage Calculator</a>
                <a href="jquery-advanced.html">Advanced</a>
            </div>
        </div>
    </nav>

    <div class="content wide">
        <h1>jQuery Calx - Interactive Examples</h1>

        <div class="alert alert-info">
            <strong>Welcome!</strong> jQuery Calx is a powerful jQuery plugin that turns your HTML into a spreadsheet-like calculation engine.
            Explore the examples below to see what you can build with it.
        </div>

        <h2>📚 Getting Started</h2>
        <div class="container">
            <div class="card">
                <h3><span class="card-icon">🎯</span> Basic Example</h3>
                <p class="card-description">
                    Learn the fundamentals of jQuery Calx with simple calculations.
                    Perfect for beginners to understand data-cell and data-formula attributes.
                </p>
                <a href="jquery-basic.html" class="card-link">View Example →</a>
            </div>

            <div class="card">
                <h3><span class="card-icon">🔢</span> Data Types</h3>
                <p class="card-description">
                    Explore how jQuery Calx handles different data types including numbers, text,
                    dates, and booleans with automatic type conversion.
                </p>
                <a href="jquery-datatypes.html" class="card-link">View Example →</a>
            </div>

            <div class="card">
                <h3><span class="card-icon">📋</span> Dynamic Forms</h3>
                <p class="card-description">
                    Build dynamic forms that add and remove rows on the fly while maintaining
                    calculations across all elements.
                </p>
                <a href="jquery-dynamic-form.html" class="card-link">View Example →</a>
            </div>
        </div>

        <h2>🎨 Advanced Features</h2>
        <div class="container">
            <div class="card">
                <h3><span class="card-icon">💰</span> Formatters & Input Masks</h3>
                <p class="card-description">
                    Master value formatting with currency, percent, and number formatters.
                    Includes input-mask behavior and conditional styling for negative values.
                </p>
                <a href="jquery-formatters.html" class="card-link">View Example →</a>
            </div>

            <div class="card">
                <h3><span class="card-icon">📊</span> Multiple Sheets</h3>
                <p class="card-description">
                    Work with multiple calculation sheets and reference cells across sheets
                    using Sheet1!A1 notation.
                </p>
                <a href="jquery-multisheet.html" class="card-link">View Example →</a>
            </div>

            <div class="card">
                <h3><span class="card-icon">🏠</span> Mortgage Calculator</h3>
                <p class="card-description">
                    Real-world complex example with PMT function, named variables, currency formatting,
                    and amortization schedule. Perfect for understanding advanced calculations!
                </p>
                <a href="jquery-mortgage.html" class="card-link">View Example →</a>
            </div>

            <div class="card">
                <h3><span class="card-icon">🚀</span> Advanced Features</h3>
                <p class="card-description">
                    Explore complex formulas, named ranges, custom functions, and advanced
                    calculation patterns for real-world applications.
                </p>
                <a href="jquery-advanced.html" class="card-link">View Example →</a>
            </div>
        </div>

        <h2>🧪 Testing & Development</h2>
        <div class="container">
            <div class="card">
                <h3><span class="card-icon">✅</span> Test Suite</h3>
                <p class="card-description">
                    Comprehensive test suite demonstrating various formulas, functions,
                    and edge cases with expected results.
                </p>
                <a href="jquery-test-suite.html" class="card-link">View Tests →</a>
            </div>

            <div class="card">
                <h3><span class="card-icon">🔧</span> Auto CALX Addresses</h3>
                <p class="card-description">
                    Test automatic cell address assignment for elements with data-formula
                    but no data-cell attribute.
                </p>
                <a href="test-auto-calx-address.html" class="card-link">View Test →</a>
            </div>

            <div class="card">
                <h3><span class="card-icon">⚙️</span> Create Cell API</h3>
                <p class="card-description">
                    Test the programmatic cell creation and manipulation API for
                    building dynamic spreadsheets.
                </p>
                <a href="test-createcell.html" class="card-link">View Test →</a>
            </div>
        </div>

        <h2>✨ Key Features</h2>
        <div class="feature-grid">
            <div class="feature-item">
                <div class="feature-icon">📐</div>
                <div class="feature-content">
                    <h4>Excel-Like Formulas</h4>
                    <p>Support for 300+ functions including SUM, AVERAGE, IF, VLOOKUP, and more</p>
                </div>
            </div>

            <div class="feature-item">
                <div class="feature-icon">🎯</div>
                <div class="feature-content">
                    <h4>Cell References</h4>
                    <p>Use A1, B2 notation or named variables like TAX, TOTAL in your formulas</p>
                </div>
            </div>

            <div class="feature-item">
                <div class="feature-icon">💱</div>
                <div class="feature-content">
                    <h4>Smart Formatters</h4>
                    <p>Currency, percent, number formatting with intelligent input parsing</p>
                </div>
            </div>

            <div class="feature-item">
                <div class="feature-icon">🎨</div>
                <div class="feature-content">
                    <h4>Conditional Styling</h4>
                    <p>Apply CSS styles based on cell values (e.g., red for negative numbers)</p>
                </div>
            </div>

            <div class="feature-item">
                <div class="feature-icon">🔄</div>
                <div class="feature-content">
                    <h4>Auto-Calculate</h4>
                    <p>Formulas recalculate automatically when dependent values change</p>
                </div>
            </div>

            <div class="feature-item">
                <div class="feature-icon">📊</div>
                <div class="feature-content">
                    <h4>Multiple Sheets</h4>
                    <p>Create workbooks with multiple sheets and cross-sheet references</p>
                </div>
            </div>
        </div>

        <h2>🚀 Quick Start</h2>
        <div class="info-box">
            <h3>HTML Setup</h3>
            <pre><code>&lt;!-- Include jQuery and Calx --&gt;
&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
&lt;script src="dist/jquery.calx.js"&gt;&lt;/script&gt;

&lt;!-- Create a form with calculations --&gt;
&lt;form id="calculator"&gt;
    &lt;input data-cell="A1" value="100"&gt;
    &lt;input data-cell="A2" value="50"&gt;
    &lt;input data-formula="A1+A2" readonly&gt;
&lt;/form&gt;

&lt;!-- Initialize Calx --&gt;
&lt;script&gt;
    $('#calculator').calx({ autoCalculate: true });
&lt;/script&gt;</code></pre>
        </div>

        <div class="info-box">
            <h3>Features at a Glance</h3>
            <ul>
                <li><strong>Simple Integration:</strong> Just add data-cell and data-formula attributes</li>
                <li><strong>Rich Functions:</strong> Statistical, financial, date, text, and logical functions</li>
                <li><strong>Named Variables:</strong> Use meaningful names like <code>data-var="TAX"</code></li>
                <li><strong>Input Masks:</strong> Type $100 or 100 - both work!</li>
                <li><strong>Conditional Styling:</strong> <code>data-style-if="negative"</code> for red text on negative values</li>
                <li><strong>Dynamic Forms:</strong> Add/remove rows and maintain calculations</li>
                <li><strong>Custom Functions:</strong> Register your own calculation functions</li>
                <li><strong>TypeScript Support:</strong> Full TypeScript definitions included</li>
            </ul>
        </div>
    </div>

    <footer class="footer">
        <p>
            jQuery Calx v3.0 |
            <a href="https://github.com/xsanisty/calx.js" target="_blank">GitHub Repository</a> |
            <a href="https://github.com/xsanisty/calx.js/issues" target="_blank">Report Issues</a>
        </p>
        <p>Made with ❤️ by the Calx community</p>
    </footer>
</body>
</html>