@satachito/jp-formula/README.md

Formula input WebComponents

# jp-formula

Have you ever wanted to let users enter mathematical formulas? This WebComponent is for that purpose.

Other than that, this WebComponent can let you input functions or call functions.

# Demo

https://satachito.github.io/jp-formula/

# Usage

```
<style>
jp-formula > input {
;	border:	1px solid red
}
</style>

FORMULA:<br>
<jp-formula id=FORMULA></jp-formula>
<input type=button value=Eval id=EVAL>
<span id=RESULT_FORMULA></span>
<br>
<br>

FUNCTION: @ means argument<br>
<input value=3 id=ARGUMENT style="width: 32px">
<jp-formula id=FUNCTION></jp-formula>
<input type=button value=Apply id=APPLY>
<span id=RESULT_FUNCTION></span>
<br>
<br>

BAD SYNTAX:<br>
<jp-formula id=FORMULA_X></jp-formula>
<input type=button value=Eval id=EVAL_X>
<span id=RESULT_FORMULA_X></span>
<br>
<br>

<script type=module>

import './node_module/@satachito/jp-formula/_.js'

FORMULA.value = '2 * ( 3 + 4 ) / 5'
EVAL.onclick = _ => {
	try {
		RESULT_FORMULA.textContent = FORMULA.Eval()
	} catch ( ex ) {
		alert( 'Not a valid formula\n' + ex.join( '\n' ) )
	}
}

FUNCTION.value = '@ * 2'
APPLY.onclick = _ => {
	try {
		RESULT_FUNCTION.textContent = FUNCTION.Apply( Number( ARGUMENT.value ) )
	} catch ( ex ) {
		alert( 'Not a valid formula\n' + ex.join( '\n' ) )
	}
}

FORMULA_X.value = 'abc'
EVAL_X.onclick = _ => {
	try {
		RESULT_FORMULA_X.textContent = FORMULA_X.Eval()
	} catch ( ex ) {
		alert( 'Not a valid formula\n' + ex.join( '\n' ) )
	}
}

</script>
```

# Syntax

Visit our awesome calculator site and see tutorial

https://slip.828.tokyo

https://slip.828.tokyo/Tutorial.html