Calculator

components.mac-calculator.js

import Ember from 'ember';

export default Ember.Component.extend({
  init() {
    this._super(...arguments);
    this.set('displayValue', 0);
    this.set('calcValueCurrent', 0);
    this.set('calcValueNew', 0);
    this.set('calcAction', null);
  },
  
  actions: {
    press(value) {
      // INPUT NUMBERS
      if (typeof value == 'number') {
    		this.set('calcValueNew', value);
        this.set('displayValue', value);
    	} 
      // INPUT EVERYTHING ELSE
      else if (typeof value === 'string') {
        // AC (clear)
        if (value === 'AC') {
    			this.set('displayValue', 0);
          this.set('calcValueCurrent', 0);
          this.set('calcValueNew', 0);
        }
        if (value === '+' || value === '–' || value === '×' || value === '÷') {

          // Add
          if (value === '+') {
            let calcValueCurrent = this.get('calcValueCurrent');
            let calcValueNew = this.get('calcValueNew');
            let sum = calcValueCurrent + calcValueNew;
            this.set('calcValueCurrent', sum);
          }

          // Update output display
          let calcValueCurrent = this.get('calcValueCurrent', value);
          this.set('displayValue', '');
          setTimeout(() => {
            this.set('displayValue', calcValueCurrent);
          }, 100);
        }

      }
      
      console.log('current: ' + this.get('calcValueCurrent'));
      console.log('new: ' + this.get('calcValueNew'));
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Calculator'
});

models.mac-math.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({

});

routes.mac-route.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({

});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.calc {
  outline: 1px solid black;
  width: 278px;
}

.output {
  background-color: black;
  color: white;
  font-size: 60px;
  text-align: right;
  width: 250px;
  height: 100px;
  margin: 3px;
  padding: 0px 10px;
}

.button {
  outline: 1px solid grey;
  display: inline-block;
  width: 60px;
  height: 50px;
  margin: 3px;
  text-align: center;
  cursor: pointer;
  font-size: 25px;
}

.button-double {
  width: 130px;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
{{mac-calculator}}
<br>

templates.components.mac-calculator.hbs

{{yield}}

<div class="calc">
  {{input value=displayValue class="output" readonly=true}}
  <div class="input">
    <div class="input-row">
      <button class="button" {{action "press" "AC"}}>AC</button>
      <button class="button" {{action "press" "±"}}>±</button>
      <button class="button" {{action "press" "%"}}>%</button>
      <button class="button" {{action "press" "÷"}}>÷</button>
    </div>
    <div class="input-row">
      <button class="button" {{action "press" 7}}>7</button>
      <button class="button" {{action "press" 8}}>8</button>
      <button class="button" {{action "press" 9}}>9</button>
      <button class="button" {{action "press" "×"}}>×</button>
    </div>
    <div class="input-row">
      <button class="button" {{action "press" 4}}>4</button>
      <button class="button" {{action "press" 5}}>5</button>
      <button class="button" {{action "press" 6}}>6</button>
      <button class="button" {{action "press" "–"}}>–</button>
    </div>
    <div class="input-row">
      <button class="button" {{action "press" 1}}>1</button>
      <button class="button" {{action "press" 2}}>2</button>
      <button class="button" {{action "press" 3}}>3</button>
      <button class="button" {{action "press" "+"}}>+</button>
    </div>
    <div class="input-row">
      <button class="button button-double" {{action "press" "0"}}>0</button>
      <button class="button" {{action "press" "."}}>.</button>
      <button class="button" {{action "press" "="}}>=</button>
    </div>
  </div>
</div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}