Pure JS Calculator
by J. Jones
HTML
<h1>Javascript Calculator</h1>
<textarea id="input" onkeyup="calculate(gid('input'),event)" rows='20' cols='50' type="text">
Hit enter or return to evaluate a line
12/5*9+9.4*2-1
Nothing will happen if you try to evaluate text or an expression that doesn't change value like the following
23
Variables can be used. They can't contain hyphens because the interpreter thinks they're subtraction operations. Multiple statements can be put on the same line with semicolons.
a=23; 2*a
There's a bunch of math functions directly mapped from the javascript Math object (The log() function is the natural log in this library by the way)
ceil( exp(log(1)) * asin(sin(1)) + 0.5 )
Javascript doesn't seem to round floating point numbers when it should, so that needs to be explicit, if you want your answers to not be 15 digits long
b=pow(sqrt(3),2)
round(b)
The functionality of this app was modelled on a windows program called TabbyCalc
</textarea>
<pre>
based on <a href="http://www.portablefreeware.com/?id=705">TabbyCalc</a>
=== Available Functions ===
abs(x) Returns the absolute value of x
acos(x) Returns the arccosine of x, in radians
asin(x) Returns the arcsine of x, in radians
atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians
atan2(y,x) Returns the arctangent of the quotient of its arguments
ceil(x) Returns x, rounded upwards to the nearest integer
cos(x) Returns the cosine of x (x is in radians)
exp(x) Returns the value of Ex
floor(x) Returns x, rounded downwards to the nearest integer
log(x) Returns the natural logarithm (base E) of x
max(x,y,z,...,n) Returns the number with the highest value
min(x,y,z,...,n) Returns the number with the lowest value
pow(x,y) Returns the value of x to the power of y
random() Returns a random number between 0 and 1
round(x) Rounds x to the nearest integer
sin(x) Returns the sine of x (x is in radians)
sqrt(x) Returns the square root of x
tan(x) Returns the tangent of an angle
=== Math Constants...
CSS
body {
margin: 1.5em;
font-size: 1em;
}
h1 {
font-size: 1.5em;
color: #28b;
}
textarea {
font-size: 1em;
}
JavaScript
// To Do:
// * load/save functionality
// * shift+return to mute output?
// 'Unix' Shortcuts would be nice; command+key on mac
// and ideally alt+key on windows or linux
// k cut line(s)
// u paste line(s) doesn't work
// a go to beginning of line
// e go to end of line
// n go to next line
// p go to previous line
function getLineNumber(textarea) {
return textarea.value.substr(0, textarea.selectionStart).split("\n").length - 1;
}
function gid(id) {
return document.getElementById(id);
}
function scopedEval(a) {
// prevents collisions with other variables inside
// the calculate() function
return eval(a);
}
function calculate(el, event) {
if (event.keyCode !== 13) { return } // 13 is enter or return
var ar = el.value.split('\n'); // array
var ln = getLineNumber(el);
var last = ar[ln - 1];
var result = scopedEval(last).toString();
if (result === last) { return } // exit
ar.splice(ln, 1, result);
el.value = ar.join('\n');
// put caret back into right position
var caretPos = 0;
for (i = 0; i <= ln; i++) {
caretPos += ar[i].length + 1; // don't know why +1
}
caretPos -= 1; // don't know why -1
el.selectionStart = caretPos;
el.selectionEnd = caretPos;
}
// === Math Constants ===
// JavaScript provides 8 mathematical constants that can be
// accessed with the Math object:
const E = Math.E // returns Euler's number
const PI = Math.PI // returns PI
// Math Object Methods
// Method Description
abs = Math.abs // (x) Returns the absolute value of x
acos = Math.acos // (x) Returns the arccosine of x, in radians
asin = Math.asin // (x) Returns the arcsine of x, in radians
atan = Math.atan // (x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians
atan2 = Math.atan2 // (y,x) Returns the arctangent of the quotient of its arguments
ceil = Math.ceil // (x) Returns x, rounded upwards to the nearest integer
cos = Math.cos // (x) Returns the cosine of x (x is in radians)
exp = Math.exp //...