quickmathjs
Version:
A simple web-based plaintext calculator harnessing the power of math.js for intuitive free-form calculations. Now with a command-line interface (CLI) for testing purposes.
104 lines (94 loc) • 7.06 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick MathJS Web Calculator</title>
<link rel="icon" type="image/x-icon" href="logo.ico">
<meta property="og:title" content="Quick MathJS Web Calculator">
<meta property="og:description" content="An intuitive web-based plaintext calculator using math.js. Features inline results and supports free-form calculations.">
<meta property="og:image" content="./logo.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<textarea id="input" placeholder="Enter math expressions... (Example: '1 + 1 = ?' or 'a = 3' then 'a + 1 = ?')" spellcheck="false" onkeydown="handleKeyDown(event)"></textarea>
</div>
<div class="bottom-bar">
<div class="bottom-row">
<span id="title" >Quick MathsJS Web Calc</span>
<div class="actions"> <!-- This is a new container for padControls and mobileOperatorKeypad -->
<div class="padControls">
<button onclick="clearpad()">CLEAR</button>
<button onclick="triggerRecalc()">RECALC</button>
</div>
<div class="mobileOperatorKeypad">
<!-- These operators can take more than one shift button clicks in android keyboard to reach -->
<button onclick="insertText('^')">^</button>
<button onclick="insertText('%')">%</button>
<button onclick="insertText('=')">=</button>
</div>
</div>
</div>
<!-- Quick Start Section -->
<details class="quickstart">
<summary>Show Quick Start</summary>
<div id="quickstartDetails">
<h2>Quick Start</h2>
<strong>Example: Given this input</strong>:
<pre>
# Basic Expressions with Direct Calculation
1 + 1 = ?
= ?
# Variable Assignment with Explicit Value Retrieval
a = 3
a: ?
# Simultaneous Assignment And Results
c = a + 3 = ?
# 2> spaces as alt method for Explicit Value Retrieval
c = ?</pre>
<strong>After calculation, you will get this output</strong>:
<pre>
# Basic Expressions with Direct Calculation
1 + 1 = 2
= 2
# Variable Assignment with Explicit Value Retrieval
a = 3
a: 3
# Simultaneous Assignment And Results
c = a + 3 = 6
# 2> spaces as alt method for Explicit Value Retrieval
c = 6</pre>
<ol>
<li>Open the calculator by simply loading this webpage in your preferred web browser.</li>
<li>Type mathematical expressions in the provided textarea.</li>
<li>To assign a value to a variable, use the format: <code>a = 5</code>.</li>
<li>To evaluate an expression, write it and then append with <code>=</code>. For example: <code>a * 2 =</code>. The result will automatically be displayed next to the expression.</li>
<li>For multi-variable assignments or expressions with provided results, use the format: <code>a = b = 2 + 3 =</code>.</li>
<li>For explicit output add 2 spaces or more before a variable <code>=</code>.</li>
<li><code>=</code> by itself will imply displaying results from previous calcuation.</li>
<li>Errors, such as division by zero or undefined variables, will be indicated next to the problematic expression. For example: <code>1 / 0 = Error: Division by zero</code>.</li>
<li>English sentences can be supported as variable names as long as it does not conflict with MathJS reserved keywords like `in`, `i`, `or` and any other reserved keywords. e.g. 'People Count' can be a variable</li>
</li>
<li>To save your calculations, simply copy the URL which now contains your compressed data.</li>
<li>To load previously saved calculations, paste the copied URL into your browser.</li>
</ol>
<p><a href="#H4sIAAAAAAAAA3VVbW/bNhD+rl9xQzFMXl1F7y8b+kG1ncSD42S23CEIUkCWGJuIJKokFdv/fkfKztwmMyJGIu+ee8i7e/gB/u5o8XyTy634awn/kPUorwpYCcLhqqMlMYwPkG2pAFFw2spPQh4qAhu1BCWpWSMkzyURsGU7kAw6QeAl55R1AmpEJTjQIq+AtQQNKTpA3pTwRHLZcfSjzbsULFCRv6TL6QjSxTS7vplk+Hp7N1mk2fR2vlTLaVlSBWkE8BE8+Ayxml12a+RU6IUIPoGPC55auOkqSdsK6ei1EH7XTo72GtMXKtR0DBfg4rSvZu/YjnDDg28aJXY0DCu7CrdnLnBztCnxqPInieMJYmA4NvzaY2ua46/pfDQZw02aXU9wmI7SGVyu5qPXnWScbljDaiI5LeCyazR9gStzJskfIPPGbOmFP0DMDkM+0YaUuNr/dILwr2A1ZkQdaZ03BxDsSe5yTqCia445IcIyBNVA7kCTK5jAL/X+yTHOY9hW8tNPsZw2L4Rjgv+Pba7QbSvoEQLXC5I4igIc3SROjFyFOy47lu1HToKLjpOEQRLpADO2QZ5yWyOsqpLJvmUNaSTFAvovTMU2pmPbCsa3QjtwItuJMUhsJ65B9q2pdxdZXpzYQWhjaM8OA10a3zt1HpwxqfEbudUfhvjOpZkMdKXg5ALnTDcagjc4Fc8lVhTjSMQIflH8XVvNjjB/WTrPdBLvKJie5fhOkLhh4AUx7sobGC7WWUvRJ7Tc2EOmnh05URLEoXKadBXhvwlounqNNWS6VuTEbqweP0hsP+gBCPoHlu+FQaiexMHN6sLJOzDfAA8wmd2FquI3fJTTFatK0oDuRzAdK0Q0z8MDjHw8rGPEdku1v+uFdhglEa4ds7SaT7MlmPesgyJvABv7ifH6vMN3mEMEOAjd+l1DZd/1BVMVJEHpwkA3OJZMoQ3O3LGda93Qteo5qFU7PW+QEv6vL8Q3tS/MP8w1GeXb44pXZxSiQjkHaFXUumnTbDEdTZaQzscoKIv0XqcMVYfTPYw46TWh7r8/w8ODMwT3cQgP3hD8x8cz41fVORp/BGXr/AlqfNS+LlaO8vWHEPzgOyYoFDVt8kYaJZFmD6Eb0O11IG9EywQx5OntzEaT0sDuK6ll+nU6v9Lbmt2mY/WO6jJazc5kskL5fYID6zgmrCq66iTE2AsifyGlkgzMCawWMwsypid7+x3jz0MQtG6rAx5ze/jBrmJ5+RZ3CG0uJNGWPTzaYwjMirZdc7bDC8bS5b9Y3C7gGunPkLoWGc0UFeyZQA41FVK9IcF34rx7ee0o7leo+wiLk3DOONREiHyDjU83WwkN2UtVIopfy9m66i8pQOnAG0lVEVJzLmw88WmDSkvlQRG7XWV3qwyW2f1sos91TApaY30viPJDmepryHP1jePqC+Sa7PPyfbst2ZtopcVy7/ja/AuWBj/8bKmUt+1QssTRwLDXDnaAagLdClqKjr11YoUbPBqvUZVPgdaO8lLPv5C8Q6/7BwAA" target="_blank">Click To Load Example</a></p>
<p>For a comprehensive guide, more detailed instructions and source code, <a href="https://github.com/mofosyne/QuickMathJS" target="_blank">check out the full README</a>. Additionally, for details on supported mathematical syntax and operations, <a href="https://mathjs.org/docs/expressions/syntax.html" target="_blank">refer to the math.js documentation</a>.</p>
<p>For developers, there is an NPM package located <a href="https://www.npmjs.com/package/quickmathjs" target="_blank">QuickMathJS NPM Package</a></a> so you can integrate this in your projects like a text editor extention.</p>
<p><a href="https://www.quickmathjs.com/" target="_blank">quickmathjs.com</a>. Copyright © 2023 Brian Khuu • powered by <a href="https://mathjs.org/" target="_blank">math.js</a>.</p>
</details>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/14.2.1/math.min.js"></script>
<!-- Local math.js fallback if above link fails to load-->
<script>
if (typeof math === 'undefined') {
var script = document.createElement('script');
script.src = 'math.min.js';
document.body.appendChild(script);
}
</script>
<script src="calculator.js"></script>
<script src="script.js"></script>
</body>
</html>