Calculator Snippet CC

The April 2015 Community Challenge requires building a calculator.

Implement a simple calculator


Where the definition of "simple" is whatever you make it - only
supports basic arithmetic operators? Fine. It supports scientific
notation, exponents and trigonometry? Fine! Takes input from the
console? Fine! Toggle between binary, hex, octal and decimal
notations? Fine!


The common denominator here, is that you need:

• A way to take user input

• A way to parse/validate user input

• A way to perform the operations in the input

• A way to output the result(s)

Everything else you want to put in, is up to you and the time you can
devote to this small project in the limited number of days we have
until April is over - be creative!

I am specifically looking for insights on the way I have integrated with the keypressed concept, the way that the system can be extended by adding binary or unary operators, and for any mathematical oversights I currently may have.

I am learning Javascript, CSS, and d3 and I am somewhat sure I am missing basic practices that I should have too. If you see anything that's contrary to industry best practices, please point those out too.


Note: I found that the snippet does odd things with key-presses occasionally: here is the standalone 'original' version that I
'hacked' to make in to a snippet: standalone
calc.html. I find the
experience of the standalone version is better.



`var calc = {
stack: {
values: new Array(1024),
size: 0,
decimal: 0
},

display: {
value: 0.0,
integral: true
},

layout: [
{
compact: false,
buttons: ["seven", "eight", "nine", "root", "clear"]
},
{
compact: false,
buttons: ["four", "five", "six", "times", "divide"]
},
{
compact: false,
buttons: ["one", "two", "three", "plus", "minus"

Beyond not having the basic framework for the HTML, you have one error according to the W3C validator:

readonly="true" is not valid, the correct attribute is readonly="readonly"

There is a pretty bad UI problem here. When you click the buttons as follows 9 - 3 = 2, the calculator reads 62, whereas it should reset and only read 2 because you clicked the = button.

Beyond this, your calculator does not follow the order of operations. Probably the simplest way to handle this would be to only update the calculation when the +, -, and = buttons are pressed (like the Windows calculator does), parsing and calculating everything else from the stack.

StackExchange Code Review Q#86564, answer score: 7