Home

djmblog.com

My calculator app djmCalc

by Dan McKeown

I built a simple JavaScript calculator and released it on GitHub as djmCalc. While creating it I considered more about calculator design than I had for a while. I wanted its behavior to be deterministic and cautious; some calculators will "press equal" for you in certain scenarios or leave factors out of sight in unnecessary ways. Due to this, the usage of my calculator may seem somewhat deliberate but I think the simplicity of its use might be a worthwhile tradeoff. In a calculator, what is a button? This fairly straightforward question leads to plenty of design decsions when building a calculator app. This is the way I put it in the project's readme:

The calculator has three types of buttons:
  • Mutating Mode Buttons: The buttons at the top that set themselves up for mutation when pressed--that is, selecting a button makes it able to be set by a Number or Operator button
  • Number Buttons: Allows digits to be added to either of the Number Mutating Mode Buttons
  • Operator Buttons: Allows operator to be selected for the Operator Mutating Mode Button (add, multiply, etc.), also allows selection of 'real-time' operators like equals [which causes an answer to the values currently in the mutating mode buttons to appear in the fourth 'answer' button] and Prime [which displays a theorectical and algorithmic answer to the question of whether the value in the 'answer' button is a prime number] and "Clear" which causes the value of whichever of the two Mutating Mode Number Buttons is currently selected (in mutating mode), if either, to be set to 0.

At the core of the calculator code is the ReactJS component that is used to create the number and operation buttons:

var Digitizr = React.createClass({
  render: function() {
    var numberSet = this.props.nSet;
    console.log('rendering in d');
    console.log(this.props.nSet); 
    return(〈div className="Digitizr"〉
      {numberSet.map(function(k){
      {console.log(k);}
      {var kLink = "#command/" + k;}
      return 〈a href={kLink} key={k.toString()}〉〈Button key={k.toString()} buttonLabel={k} /〉〈/a〉;
      })}
      〈/div〉)
  }
});

The app has a "is this a prime number" feature, but it is not a very complex algorithm and I am convinced that it is likely to fail on extremely large prime numbers but I haven't tested it exhaustively to find out. It is also worth pointing out that the calculator uses JavaScript mathematics, and the specific implementation in the user's browsers, so different types of quirky language and browser specific behavior can occur. I created a screencast where I show how the calculator's feature set can expand when you manipulate the DOM.

djmCalc screenshot


red tuliptulips


camerawolfno camera wolfing

Love Birds Consulting


eagle float in Independence Day parade
carousel WordPress theme


Ryukyu front-end framework


DJMcloud Podcast


nText
Mac text editor


apple picking in Washington


Crossing the Continental Divide: a novel by Dan McKeown
my novel